The Benefits of Wireframing a Design

Feb 1 2011 by Brad Shorr | 37 Comments

The Benefits of Wireframing a Design

Wireframing is an extremely important phase of the web development process. While it’s tempting to skip this step and proceed from the design brief and information architecture directly into design, it pays huge dividends to create wireframes somewhere in between of conceptual site planning and actual development of a site. Wireframing will allow you to do several things far more efficiently, and the time and effort you put into this phase pays dividends in the greater scheme of things.

In this article, I will go over five key benefits of website wireframing. What I’ll discuss are direct observations based on what we’ve experienced at the agency I work at.

What Is a Wireframe?

Before exploring these wireframing advantages in more detail, let’s pause for a minute to talk about what a wireframe is. A wireframe is a low-fidelity visual representation of a website’s layout design, sometimes referred to as a skeleton, outline or blueprint. Often, a wireframe represents the basic page layout structure and navigational scheme of the site’s pages, as well as major site components (like web forms and ad units).

Wireframe example 1

A wireframe does not contain finished design elements as such, but does display where design elements will appear on the page. Wireframes are normally produced in grayscale using off-the-shelf wireframing software such as Mockingbird or, in its simplest form, paper and pencil.

Wireframes allow project team members and clients to do such things as:

  • Test and refine navigation
  • See how content lays out on the page
  • Study and rapidly refine the user interface design of web forms and interactive elements
  • Evaluate overall effectiveness of the page layout against usability best practices
  • Determine web development/programming requirements

Here is an example of a wireframe for a home page:

Wireframe example 2

Here is an example of a wireframe for an interior page:

Wireframe example 3

To learn more about wireframes, as well as to discover tools, software and resources about wireframes, read the Ultimate Guide to Website Wireframing.

Let’s now go over the key benefits of wireframing web designs.

Wireframes Make Design Changes More Efficient

It takes a lot more time, effort and expertise to create a web page design than a wireframe. When the first thing clients see is a finished design, they are seeing something that has taken considerable time to produce and will involve (potentially) considerable expense to revise.

The bad news, especially from a cost standpoint, is that design changes are just about inevitable. I’ve worked on web development projects on the agency and client side for more than 15 years, and I’ve yet to see one that didn’t involve multiple (and often extensive) design changes.

However, when we review wireframes, both internally and with clients, design changes can be reworked in a matter of minutes. Don’t like the size of the header? Make it smaller. Too small now? Let’s see it a hair bigger. Is the conversion zone overshadowed by the logo? Let’s take a look at it this way.

Changes like the ones above, when made to full-blown, high-fidelity designs, can run up thousands of dollars of expense (to say nothing of extending the timeline to complete the project). Knowing the impact in time and cost to making design changes, clients and web development team members become almost reluctant to voice concerns for fear of the time and cost involved in addressing design issues.

The point to remember: Wireframing makes it quick and inexpensive to tweak or even overhaul a design at exactly the time when you want to be doing major changes and fine-tuning.

Wireframes Make Site Navigation Designs Better

One of the most important factors in web design is content findability, and an intuitive site navigation design is important in this regard. If users cannot easily get to where they want to go on a site, they’re gone.

As users become increasingly more web-savvy, the negative impact of shoddy navigation increases. Unfortunately, clients, designers and even developers have a difficult time evaluating navigation until they actually have an opportunity to use it.

Wireframes allow people to give the new site a test run: to see how easy or difficult it is to locate key pages; to determine whether dropdown menus clarify or confuse the user; to find out whether breadcrumbs are useful or distracting; to understand whether the overall navigational scheme is intuitive, incomprehensible or somewhere in between.

When site navigational issues come to light after designs are completed, it’s a bit like realizing your ceilings are too low after the house has been built. Changes to navigation can run the gamut, but many of them are almost prohibitively expensive to correct. I think this is one reason why we see so many websites — even large and sophisticated ones that display wonderfully creative content and dazzling design — still manage to deliver an overall inferior user experience.

Wireframes Make Content Development More Design Friendly

As a content person, I love how wireframes help us get everything we can out of web copy from a design standpoint.

How Wireframes Can Improve Content

Content — whether inserted for SEO purposes or for human readers (great content addresses the needs of both) — can look clunky or elegant.

An example of clunky content is something you see every day: large blocks of undifferentiated text. Nobody is going to read it. Elegant content — content that informs and persuades — makes use of design elements such as readable fonts, properly sized fonts, numbered lists, bullets and well-positioned subheads. In a wireframe, it’s easy to play around with these elements and arrive at a formatting scheme that will maximize readability and persuasiveness.

How Wireframes Can Improve User Interface Copy

For the user’s interface, little pieces of copy can be far more important than big ones. Example: should the call to action button say Learn More, More Information or Click Here? How the client and design team answer that question will have an enormous impact on conversions.

And yet, when content and user interface copy issues are addressed while reviewing a finished design, there’s a tendency to live with a problem and to compromise the effectiveness of the copy in an effort to contain cost and keep the project on schedule.

When content issues are dealt with at the wireframing stage, making changes is a piece of cake. Result: a website that blends the best of copy and design and maximizes user experience on every page.

Wireframes Help Clients Help Their Cause

Wireframes are a visual way to evaluate a new website and, as we all know, a picture is worth a thousand words. When clients green light the design phase of a project based on a sitemap and a few static design layouts, they are, to a certain extent, driving blind.

In my experience, this causes many a web development project to fall short of client expectations. As an agency, we have an obligation to give clients a clear understanding of what is going to be developed, and wireframes, for all the reasons enumerated above, allow us to do exactly that. We want our clients to see what the site will look like (at least roughly), to feel the navigation and to read the content in context.

When clients are confronted with a wireframe, their reaction ranges from shock to total satisfaction (usually somewhere in between). And from our point of view, there is no wrong response. It is far easier and less costly — and puts far less strain on the relationship — to address issues in this early phase of the project than later on, or worse, to launch a site knowing it has serious deficiencies.

Almost inevitably, wireframes generate a useful punch list of changes that are routine to make early on. In some cases, a wireframe leads a client to rethink their approach on a more strategic level. Comments we typically hear include:

  • I didn’t realize our product line was this confusing
  • We have too many options in our navigation: our key pages are getting lost in the shuffle
  • Our call to action is weak
  • Our Contact form takes too long to fill out
  • We’re talking too much about ourselves and not enough about our customer
  • Our most important product photos are below the fold: nobody’s going to see them

When we have conversations around topics like those above at the wireframing stages, they lead to happy resolutions. When these conversations occur after design and development are completed, they frequently do not.

Wireframes Help Web Developers

I’m about as far away from being a programmer as you can get, but my sense is that when you give programmers marching orders without the benefit of a wireframe, you’re asking them to do the job with one hand tied behind their back. If all the web developer has to go on is a sitemap, design templates and a bunch of verbal instructions from the client and project manager, there are going to be a lot of questions and assumptions as the build process moves forward.

Wireframes give web developers a clear path of what has to be done. It clarifies the direction and objectives of the site build and allows for better decision-making as to which web technologies, techniques and processes should be used in order to achieve an excellent result.

Summary

A web development project is a lot like building a house. Both are complicated projects. Both involve teams of specialists working in concert to give concrete form to a client’s vision. If you are going to build a house, you naturally want the best builder you can find. But you also want to equip the builder with the right tools. And you want to make sure the builder has the right process in place to get the job done on time and within budget.

Wireframing is not a cure-all, but is something we’ve found to be a very valuable tool — one we would never dream of giving up.

Related Content

About the Author

Brad Shorr is Director of Content Marketing for Straight North, a Chicago-based interactive marketing agency that specializes in marketing strategy, Web development and Internet marketing services that include search engine optimization, PPC management, social media and e-mail marketing. Follow Brad Shorr on Twitter: @bradshorr and Straight North on Facebook.

37 Comments

Tanner

February 1st, 2011

What a great topic to cover. So wireframing isn’t necessary to design, by any means, but – and I wish you had emphasized this point more in your article – quick wireframe sketching allows you to painlessly see changes and alternative solutions almost immediately.

Sure, you could build a house without a floor plan, but the extra few minutes you spend sketching out the details will save you a lot of time down the road. Time is what I believe is key here.

Great article, thanks for the advice.

Me

February 1st, 2011

Been doing this for years. Can’t imagine not doing it. Wonderful article!

Hiram

February 1st, 2011

I have tried both ways. Projects with a wireframe and projects without. The bottom line is that every time we do a wireframe it saves about 40% extra work/changes/modifications/revisions and of course headaches.

Great article!

Brad Shorr

February 1st, 2011

Hi Tanner, one of the great things about blogging is that commenters just add to the wealth of information that’s shared. Your point about quickly reviewing alternate concepts is definitely a major advantage of wireframing. As a content person, I have a lot of trouble imagining how a design will look: I need to see it. Clients are often the same way.

Hi, “Me” – Nice going on being ahead of the curve. We can’t imagine doing Web projects any other way, either!

Pixel Air

February 1st, 2011

Bread and Butter! And If it’s not then it SHOULD be! ;)

Libby Fisher

February 1st, 2011

I agree with Tanner, the biggest reason that I use wireframes and why I think that they save time in the long run is because, by “sketching out” the layout of the website first, you can foresee potential problems or issues and often solve them before you even begin work on the actual site.

Great article though, thank you!

Andrea at ProtoShare

February 1st, 2011

Brad,

A great article on wireframing. The five points you list on what wireframes can do for a team, I think, are right on.

Could you elaborate on a couple of those points? It helps to learn from others’ processes as no two processes are ever the same.

“Study and rapidly refine the user interface design of web forms and interactive elements”
– Do you collaborate on this part specifically with the client, your design & development team, or both? Do you find times when the project requires complex interactions that prototyping the specific interactions helps or are simple wireframes are still able to do the trick?

“Evaluate overall effectiveness of the page layout against usability best practices”
– You mention best practices. Do you also ever test your wireframes with end users?

Thanks again for sharing!

Rafael

February 1st, 2011

Excellent article !

Sankar Datti

February 1st, 2011

Great Article Brad. Every one should read it and follow especially designers.

Patrick

February 1st, 2011

@ Tanner – while it technically might not be “necessary” if we taking the building a house analogy and wireframes are floor plans its pretty close to insanity to start without them.

We’ve build websites for over 10 years as an agency and we wouldn’t ever design a site without them – they make the website experience in the end a much better and more intuitive experience for the user.

Kaushik Panchal

February 2nd, 2011

Great article, Will be Wireframing all the projects now on.

Pasxal

February 2nd, 2011

Great article! Nice summup of al the advantages of wireframing. The only thing I am always questioning is who will make the wireframes? It has to be someone who knows al lot about design, usability, conversion, UI,etc.

Most of the time a designer will do the job, but it has to be a team effort with all kind of specialists. The good thin about wireframes is that you don’t get emotially attached, so making changes doesn’t hurt that much. So working in teams is your ultimate goal in my opinion.

Steven Piper

February 2nd, 2011

Good post well done.

We’ve been wireframing for years and it has definitely had a positive impact on the development cycle. There are, however, two things I think you should have mentioned, which we have found out (at cost):

1 – We always start with plain old pen and paper.
All of us get together with a few sheets of paper and sketch out really rough ideas. Once these have taken shape, we then move on to OmniGraffle.

2 – Make sure you wireframe to scale.
When a client is specific about the size and clear space their logo needs etc, you need to make sure you are wirframing to scale, otherwise when you come to the design stage you find out the logo (or whatever) can’t physically fit in the space allocated for it on the wireframe.

On our latest project, we spent almost 3 months on the wireframing stage, but it did cut down the development time considerably.

Vivek Parmar

February 2nd, 2011

nice article and well explained without messing up anything

@mimojito (aka Efren)

February 2nd, 2011

I’ve been advocate for years to the importance of wireframes, especially when dealing with clients (obviously). It helps them focus on at the buckets of information rather than the fact that they do not like the color yellow. In the past few years, I’ve coupled wireframes with prototyping tools like Adobe Flash Catalyst or Fireworks and recently have fallen in love with Balsamiq.

Wireframes and a functioning prototype help customer quickly see what you mean when you tell them that “images on the carousel are going to swoosh to the left/right when you click on X”.

Great job and great post. Cheers mate!

Raghavendra S Diddimani

February 2nd, 2011

Good article for web designer, its really very helpful. :)

Brad Shorr

February 2nd, 2011

Thanks to everybody for your comments. Andrea, good questions – I’ll try to answer.
1. We collaborate intensely among our staff. Whether and to what degree the client participates varies. Some clients are very “hands on” and want to be involved; others are content to go with our best judgment except on the major issues. If we think something is really crucial, we’ll always give clients the opportunity to get involved.
2. Yes, I would say that e-commerce sites in particular cannot always be locked down through wireframing. I’m sure we’ve run into complex issues like that on lead generation sites as well, but I can’t think of any specifically at the moment.
3. Testing with end users is definitely a great idea, and I’ll have to admit we dont do it as often as we probably should. Then again I wonder what everybody here thinks about that. I wonder if an end user would understand the wireframe process and characteristics enough to provide the right kind of input. What do you think?

Ram

February 2nd, 2011

Good Article

Johnathan

February 2nd, 2011

Wire framing does help a lot. I normally start with graph paper (drafting paper, whatever you want to call it), I can sit, watch TV or sit at the restaurant with some coffee and BS with people while I do my initial layouts.

Than I move to Expression Design, which is Perfect for wire framing. If you haven’t tried Expression Web I suggest trying it out before you knock it.

I am always looking for ways to improve work flow and ever since my introduction to wire framing I less headaches, since by the time I hit PS my layout normally is set in stone.

Andrea at ProtoShare

February 2nd, 2011

@Brad,
Thanks for your answers!

1. Bringing clients into the wireframing process does seem to vary, especially in the early stages of wireframing. I find it interesting how some companies never bring their clients into that process for fear of confusion and others wouldn’t think about moving forward until the client approves the wireframes.

2. e-commerce sites needing prototyping does make sense. I guess I’ve never really thought about lead generation sites having complex functionality, but I’m sure it depends on what the goal of that site/page is.

3. I’m also curious on other people’s approaches to user testing on the wireframes. We advocate it to an extent, especially if a site does require complex interactions or is introducing content that is not commonly encountered. Of course, these testing situations do require some guidance to explain that the tester is not navigating a finished website. In addition, very specific questions need to be asked and tasks assigned so they don’t get lost in the prototype either.

Great feedback, I appreciate it!

John McDuffie

February 2nd, 2011

Can’t survive without mockups – also can’t imagine anyone not liking the idea – my clients love them too. It’s hard to show someone what you’re thinking and even harder to work out a design only to have he client not like it. This way it’s only paper and you can sit down with the client and go over everything. Or send them a PDF whatever works.
Great article.

Barry

February 2nd, 2011

Fireworks makes wire framing so easy. Excellent article.

Dean Karasinski

February 2nd, 2011

I just wrote a post similar to this one! I feel bad posting a link here but I think it will be helpful

http://deanographics.com/articles/layout-and-color-schemes-and-creative-process/

I dropped a few good links in this post especially for 31three design they have some great images of wireframe layouts!

dan

February 2nd, 2011

I always wireframe.
In fact the wireframe to me is the most important design component of the site.
not only does it help the document flow to be more correct, it greatly reduces errors in the css/layout.
it also means that with a site BUILT on the wireframe the layout changes on the final (or near to final) version of the website are very easy to edit.

Alice

February 3rd, 2011

Interesting article, and very true! Although I would be interested to see HOW you wireframe… how were the example wireframes in the article created for example? Do you show your clients your paper sketches first or go straight to Photoshop/Omnigraffle? What’s best practise?

CJ Oltman

February 4th, 2011

Thanks for all the great feedback, I head the wireframing projects here at Straight North.

@Alice
The wireframes in this example are screen shots from a real website project.

In my experience with the various wireframing software, I’ve found “Axure” to be the most efficient and effective solution. Axure gives you the ability to build functional wireframes – allowing your clients to navigate throughout the pages. Axure even allows you to get more in-depth building out advanced functionality with tools like “dynamic panels”, etc.

You can take a tour, download a trial and learn from tutorials on their website:
http://www.axure.com/

In general, wireframing should purely be used to visualize the organization of content and elements throughout the website. Here you can look closely at functionality, user experience and user interface in its simplest form. The client usually will not see the first stage of the wireframe until it has been passed around and revised from an internal review. This provides a way for clients (and even other non-creative professionals on your team) to visualize these elements and iron out the details – eliminating the need to backtrack.

Once the client has signed off on the wireframe – the designers, developers and copywriters can all get started using the wireframe as a base. This greatly increases the productivity and efficiency of the project process for everyone. And if for some reason the client does request changes after signing off, you can bill accordingly.

Let me know if you have any other questions!

Hernan

February 4th, 2011

Muy buen artículo, pero creo que para ser aún más exactos en el boceto de nuestro cliente, también los podemos acompañar con un diagrama de flujo!!!!!!!
Very good article, but I think to be even more accurate in the sketch of our client, we also follow a flow diagram !!!!!!!

Ash Menon

February 6th, 2011

It’s a nice read, and I agree with most of the points. I would argue, however, that the importance of wireframing must be stressed to the client. Otherwise it’s easy for them to assume that once they agree to the rough sketches, the next step is to get the finished product.

Hannah Hurst

February 7th, 2011

A really detailed article with some great points made. I personally think wire frames are a must! They save time and still get across the important content layout with minimal effort to adjust. Once a wire frame has been decided upon then comes the detailed design :-)

Bahadur

February 8th, 2011

This was an excellent article and a very detailed one as well. What is important to realize is that at the end of the day visitors are coming to the website not for the design but for the content that you provide them with. Design plays a secondary role in the sense that it can either retain your visitor and keep them on the site longer, and a poor design can simply turn them off and increase your bounce rate. Therefore wire framing for the purpose of not just web design, but also content placement is crucial. There was a blog topic that also questions the fact that whether design comes first of content http://blog.9thsphere.com/blog/web-design-or-content-first

All in all, focusing on design first won’t get you the right results – even if you create a wire-frame. You need a solid set of goals, content and other media elements before hand in order to develop a wire frame that will actually be successful.

Mike Yan

February 8th, 2011

We produce wire frames for every project these day, but we find with larger projects this is not always enough. We are more likely to create a full prototype for the bigger jobs, which helps the client visualise the end result easier than with a heavy functional specification which they cannot interoperate as well as they can with a visual working model.

With out no doubt the minimum is to produce a wireframe which usually is enough to plan out smaller projects with a client.

Great article and very topical.

alfred devanesan samuel

February 11th, 2011

This article helped me a lot.

Onjefu

February 25th, 2011

Excellent article. I’m going to forward this one to a few colleagues.

jason

March 7th, 2011

A question for you all, that’s related to “who” and “when”…

When do you typically get graphics designers/designers/creatives involved in the process – before, during or after wireframes? The issue I have right now is that our design/creative team often come up with interface concepts and interactions without understanding wireframes or seeing the need for them.

As an example, we’ve previously invested time in producing wireframes that show page layout & functionality (helping to make wireframes into functional spec documents, as well) but these have then been largely “ignored” by the design team, who go on to move items around, add elements, remove elements add/change functionality and so on.

Who else has had this type of experience and what have you done to solve the problem?

tx
J

Holger

March 10th, 2011

Hi Brad,
good and useful summup of the advantages of wireframing.
You got already quite a lot of interesting comments.
I would like to add two links to regarding articles …
… a brief overview about wireframing tools:
http://ux4dotcom.blogspot.com/2010/12/prototyping-and-wireframing-its-your.html
… and a further article for interested readers
http://ux4dotcom.blogspot.com/2010/01/why-and-why-not-wireframing.html

Yuri Alberto

March 11th, 2011

Yeah!! wireframing is the best technique to manage the User Interface Design Proccess.. The key is in the visualization..

Eric Bieller

April 6th, 2011

Love the house building comparison.. Have always thought that to be true. Some great points here. Wireframing is very important but it’s so tempting to just jump into the actual design! But in the end it’s always worth it to plan before you execute.. Thanks for sharing!

Leave a Comment

Subscribe to the comments on this article.