The 7 wonders of wireframes
Posted in Design on: Thursday, June 25, 2009 by Paul Boag
Quick, hand drawn wireframes can provide substantial benefits that will save you time and money.
Wireframes have become an intrinsic part of the way we work at Headscape. In this post I want to explain why we are so enthusiastic about them, and how we use them in our process.
However before we do that, lets take a step back and look at exactly what we mean by wireframes.
It is easy to think of wireframes as HTML prototypes of an entire website (or at least key sections). Although this is certainly one type of wireframe it is not the one I wish to focus on.
The problem with HTML prototypes is that they are time consuming and expensive. Building a functional prototype takes a lot of work and in most cases is discarded once the final build begins. Unless you can find a way of turning your prototype into a working site, this strikes me as a waste of resources. In my opinion, this cost precludes their use for anything other than the largest and most complex project. However, wireframing does not need to be like that. At Headscape the vast majority of wireframes are hand drawn sketches.
This most basic approach brings with it 7 benefits:
1. Improvements in team working
For us wireframing is not just the responsibility of a designer or user experience expert, it is something everybody participates in. We will regularly bring together designer, developer, project manager and whoever else is involved in the project, to wireframe key functionality. This is valuable because it improves team working and helping each member to better understand the role of others. It is also an excellent way to breaking the waterfall model of running projects, where each team member essentially works in isolation handing off work to the next person.
2. Clearer communication
These group wireframing sessions not only improve team working, but also communication.
We used to suffer from a problem where developers was not included early enough in the project cycle. This led to functionality being promised that was difficult or impossible to build. By including everybody in the wireframing process this problem has been eliminated. A developer will quickly spot issues in a wireframe that may be missed if buried in an email thread or functional specification.
That is the beauty of wireframes. Because they are visual it is much easier to grasp what is being proposed. Specification documents and emails are fine, but they are harder to visualize and perceptions can vary. Wireframes leaves much less room for misunderstanding.
3. A more engaged client
Of course, wireframes do not just improve communication within your own team. They also improve communication with the client. Engaging with the client continually throughout a project is vitally important. This is especially true when it comes to visual design (see The Battlefield of Design: Designers vs Clients). A client who has seen a wireframe and has been given the opportunity to provide feedback, is more likely to sign off the final design.
With some of our clients we go even further by including them in the wireframing process. We have found that with the right client this can significantly increase the quality of work. What is more, it gives the client a sense of ownership and engagement which invests them in the final design.
4. More numerous approaches
Another huge advantage of hand drawn wireframes is how easy they are to produce. When all you need is a pen, some paper and a few seconds to sketch something out, it becomes liberating. It lets you to explore many more approaches than full comp production allows.
Much of our approach is based on Leah Buley’s presentation at this years SXSW. She encourages the production of a wide variety of wireframes tackling the problem from many different angles. We will produce wireframes aimed at different user groups, different levels of expertise, and with emphasis on different business objectives or brand values. The aim is to generate as many ideas as possible.
Thanks to Paul Mooney for the use of this video
Once you have established a wide variety of approaches, you can refine, discard and combine them until you have two or three that could work.
It would be impossible to explore this number of different approaches in any other way.
5. A basis for testing
Once you have two or three wireframes with potential, the next step is to test them with real users.
There is a perception that it is necessary to test against completed comps or HTML prototypes, however that is not the case. There is real benefit in testing even the most basic hand drawn wireframe. You can…
- ask users what they would click on to complete certain key tasks,
- get feedback on the naming of labels,
- establish whether you have the right visual hierarchy.
Obviously testing against a hand drawn wireframe is not as informative as testing against a final site. However, it does enable you to identify problems before too much time has been invested.
6. A greater willingness to change
The problem with user testing a final design, HTML prototype, or worse still a completed site, is that a considerable amount of work has already been done. This makes it hard to change.
The same is true if a client rejects a finished design. Hours of work have gone into that design and the designer feels committed to that approach. There is a substantial cost in starting again.
This is not the case with hand drawn wireframes. Because they are quick and easy to produce, it costs nothing to discard them and try another approach. This willingness to change makes you much more responsive to the results of user testing and feedback from the client.
7. Faster and cheaper projects
Finally, although wireframing in this way takes a small investment of time and money, ultimately it brings cost savings and prevent slippages.
This is because…
- The developer has been involved in wireframing and so isn’t surprised by unforseen functionality that might increase costs and extend timescales.
- The client has seen the wireframes and so is more likely to signoff the final design. This reduces the need for expensive iterations or multiple concepts.
- User testing is done earlier in the project and so changes can be made before significant development has begun. It is more expensive to change existing work than build it right first time.
Wireframing upfront also reduces uncertainty in projects. It is possible to budget for, and schedule in, wireframing. However, it is much harder to do that for unforeseen complexity and multiple iterations.
Adding polish
It is worth noting that hand drawn wireframes do come with their drawbacks. We have found that sketches can become messy and confusing once they have been drawn and redrawn based on feedback. This can lead to confusion and also lacks professionalism when presenting to the client.
We therefore tend to take the final wireframes and produce a more finished version to present to clients. This becomes the definitive document that we work from. It is at this stage we also add more detail in terms of copy, making it a complete roadmap to work from.
When we first started this process the final wireframes were very polished. However, we discovered that this caused confusion among some of our clients who mistook these for final designs. We also found that producing these was time consuming and so undermined the benefits of hand drawn sketches.
Finally, we have settled on a tool called Balsamiq for producing finished wireframes. The reason we like Balsamiq is because it is amazingly quick to produce a wireframe, but also still looks like a wireframe rather than a finished design.
Conclusion
Too often we begin the design process by opening Photoshop. However although Photoshop is a powerful tool, it is the wrong place to start. It is a sledgehammer to crack a nut.
You may shy away from sketching wireframes because you cannot draw. However, this is not about artistic ability. It is about quickly and visually communicating ideas. Wireframing should be fast and furious, and I actually believe that artistic ability can make you overly precious about the quality of your sketches.
Hopefully this post has communicated the benefits of hand drawn wireframes and encouraged you to close your macbook and open your sketchbook.
Related Posts:
What did you think about this post?
Additional comments powered by BackType
23 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Great article. Konigi has some good wireframe info as well, I also cover some information on wireframes and interactive pdf’s for quick prototyping and testing sessions.
Leah’s presentation at SXSW with a great one and if those reading the article haven’t I suggest watching the video that Boag embedded.
Lot of good resources here.
i knew there were reason for #paperprototyping other than “wireframe software sucks” http://tr.im/pJ6b
This comment was originally posted on Twitter
Great article about wireframes from @boagworld http://bit.ly/PY49P
This comment was originally posted on Twitter
Lovely to read about your wireframing experience.
I have done sketched wireframes from year dot, just as part of my design process, but have never considered actually submitting them to a client .. until now .. Balsamiq here I come!
I always sketch up my designs first. I prefer to be relaxed and more clear headed in this approach. I only use my Mac at the very end of the construction phase. I’m waiting for the day the 960 grid is in a Moleskine pad. I keep looking for normal pads with it printed in, but sadly…. :(
I agree with the artistic ability being hindering. I’m originally a professional illustrator and it’s almost painful for me to do such rough outlines. If I could, I’d draw the whole wireframe like I was viewing it on the screen, but that would obviously be just stupid. :P
I just recently purchased Balsamiq Mockup and I’m loving it. Good article, Paul.
Very nice post Paul,
I have also found this to be a great way to wireframe, this is partly because i am useless in Photoshop, but the time saved and the ease at which i can change things will make this my preferred method for a long time yet.
We also hand draw wireframes for the speed of it and use Balsamiq for finished versions. We like the hand drawn look of Balsamiq–no misunderstanding that it is anything other than a wireframe.
Eclipse/Aptana/ZendStudio/PDT users should take a look at WireframeSketcher plugin. It’s a tool that brings digital wireframes to the Eclipse IDE.
Nice article, but I think the biggest problem is that with hand-crafted wireframes or balsamiq, you still don’t really have a way to show the workflow and have a ‘fully clickable’ example to give to your client so that he can play with it and feel how his application is going to be. I love tools like balsamiq and I thought that the only way of having this ‘dynamic client oriented approach’ was to spend time doing an HTML/CSS prototype (or anything you like), but I recently found FlairBuilder, http://www.flairbuilder.com/ I didn’t have much time to fully test it, but from what I’ve seen, this is definitely one of the best mockup tools I’ve seen so far.
Actually Balsamiq does allow the linking of pages and so is fully clickable. Also if you use an upcoming tool called napkee.com you can even export it as an HTML wireframe.
Thanks for the tip, balsamiq+napkee seems to be a great alternative to flairbuilder. When I talked about ‘fully clickable’ mockups, my point was that with a tool like flairbuilder, you are closer to the user experience that your client is going to feel with it’s real application. But on the other end getting to that kind of result quickly will make your client think it is easy to build, and that’s where balsamiq’s approach is interresting because it makes it clear to the clients that this is just a mockup… I think both tools are great, depending on the project and the type of clients you are faced to.
You’ve reminded me that I took a brief look at http://iplotz.com/ some time back so I must have another go with it, and will look at some of the others suggested here. I know that iplotz is free for limited usage.
Great article, but for good taste’s sake drop the Comic Sans ;)
I always do hand drawn sketches for all the projects I do. It make the process easier.
And sometimes I show a poslished version of the wireframes to clients, but I agree, even when you explain them that a wireframe is not a final design, they may think they are and it brings more confusion.
This is why I find that Balsamiq could be a good solution for these cases, I will definetely give it a try.
Hiya,
we use 960Gs sktech sheets. I like how it hleps you hone an idea. You quickely get the shape on the small ones and as the design matures through the process you get ever more detail. Works really well.
Nice article, good read.
Jamie & lion
Love that they use Balsamiq – been waiting to see support for it – “The 7 wonders of wireframes” « Boagworld http://bit.ly/P5zta
This comment was originally posted on Twitter
Love that they use Balsamiq – been waiting to see support for it – “The 7 wonders of wireframes” « Boagworld http://bit.ly/P5zta
This comment was originally posted on Twitter
Great insight! Wireframes have always been a useful part of our design process. This tool is helpful for the design/development team as well as clients who want to get a rough idea of what their project will look like. Whether you hand draw them or use a program to assist you, wireframes never take very long to create and are always worth the effort. Here is a link to some good wireframing resources/info: http://wireframes.linowski.ca/
Excellent article on wireframing. And the best part, for me, was the discovery of Balsamiq. I downloaded the trial and played around with it, and I love it. Now that I have a software tool that I really like using, I’ll be much more motivated to spend more time on wireframing than I have been in the past.
We’ve recently started using Balsamiq and I must say I love it. We’ll often draw quick sketches in meetings with clients and then ‘formalise’ these in Balsamiq for sharing either via email or Basecamp.
great post paul. This is the first time I have commented via iPhone and full kudos to you on the website layout on mobile.
Excellent post. I have been harping onto my bosses for eternity about the importance of wireframing, maybe this article will get my point across and make my job a lot easier