The 7 wonders of wireframes

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.

An example hand drawn wireframe

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.

An example of a Balsamiq Wireframe

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.

  • http://www.uidesignguide.com uidesignguide

    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.

    • Jason Rodwell

      I agree, Leah’s presentation is great.

      However, does Mr Mooney fancy her or something? He could barely take the camera off her…rather frustrating not to see some of the slides she’s was talking about.

      • http://www.louisvuittonhouse.com/ lv

        This is the first time I have commented via iPhone and full kudos to you on the website layout on mobile

  • http://www.creativebedlam.com/ Matt Morse

    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!

  • http://twitter.com/sulcalibur Sulcalibur

    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

  • http://www.expansionbroadcast.com Eric Masiello

    I just recently purchased Balsamiq Mockup and I’m loving it. Good article, Paul.

  • http://ticklefishdesign.com John McFarlane

    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.

  • http://www.chaostoclarity.com/blog/ Tracey Holinka

    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.

  • http://wireframesketcher.com Peter Severin

    Eclipse/Aptana/ZendStudio/PDT users should take a look at WireframeSketcher plugin. It’s a tool that brings digital wireframes to the Eclipse IDE.

  • http://twitter.com/mlainez Marc Lainez

    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.

    • http://headscape.co.uk/people/boag.html Paul Boag

      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.

    • http://twitter.com/mlainez Marc Lainez

      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.

  • http://accessibleweb.eu/ Richard – Accessible Web Testing and Design

    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.

  • mollie

    Great article, but for good taste’s sake drop the Comic Sans ;)

  • http://www.caneidia.com Ricardo

    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.

  • http://Jkg3.com Jamie knight

    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

  • http://www.mediacontour.com Media Contour

    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/

  • http://www.creydesign.com Chris Reynolds

    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.

  • http://www.evoluted.net Ash Young

    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.

  • http://www.microedge.do.uk Website design

    great post paul. This is the first time I have commented via iPhone and full kudos to you on the website layout on mobile.

  • http://www.creativecaravan.co.uk Andy Caravan

    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

  • http://www.marginmedia.com.au Ratu

    Very interesting read, I have often sketched wireframes during initial client meetings however have never realised their true worth. Great read.

  • http://www.modernframeproductions.com chelsea

    My experience is – great for the team; a disaster with clients. They get way too confused (no matter how rough the sketch is). Since wireframes look super simple clients think web development is as easy as that – there is in fact much experience and thought behind these wireframes, simple as they may look. Clients try to ‘make their own’ and to us it really doesn’t flow well. I have, however, been having great experiences with clients through the use of ‘moodboards’.

  • http://twitter.com/DaquanWright Daquan Wright

    Absolutely, I’m doing the layout for my current website and my next layout. I use wireframing for bouncing ideas around in my head. Wireframing is good because it focuses on: content delivery, content placement, layout of site features and components, etc.

    Wireframing is concerned with information and ideas, which is where the process should start. PS focuses on details, but details are meaningless without understanding of the overall context.

  • Carlo Rizzante

    Smiling about the comic sans. Indeed it might be appropriate, since how often people with little education in typography just love that font face? Anyway, I started recently using wireframes. First I sketch freely by myself, after the first meeting for a new project. Then I show the wrireframes to the customer and we usually refine them together, here and there. Usually thanks to this step the design process flow much smoother than I was used to experience before.

  • Carlo Rizzante

    Smiling about the comic sans. Indeed it might be appropriate, since how often people with little education in typography just love that font face? Anyway, I started recently using wireframes. First I sketch freely by myself, after the first meeting for a new project. Then I show the wrireframes to the customer and we usually refine them together, here and there. Usually thanks to this step the design process flow much smoother than I was used to experience before.

  • speezyD

    As someone has already mentioned, as much as wireframes are a very useful tool for the team designing and developing the website/app, my experience is that most clients are confused about what they are looking at. Even further, some don’t care and just want to see the design or simply cannot visualize how it will work. Much of the time I find that clients are quick to disregard the wireframe and even though we have a process that requires a ‘sign off’ on the finalized wireframe, they are quick to make changes during the next phases. Maybe this cannot be avoided, but I’m just not sure how valuable a wireframe is to a client. You must have amazing communication.

Headscape

Boagworld