The Importance of Wireframing

Wireframing When 45royale first started, there’s no question we had a few bad habits. You see, way back in the day when we would get a new project, discuss the requirements with our client, maybe sketch out a few quick ideas, and then jump right into full color Photoshop comps. Our reasoning for that approach was that it was unlikely that we would hit a design home run right out of the gate, so we wanted to start the process as soon as possible to allow time for revisions. After a while we came to realize that we were spending way too much time on revisions and the revisions that we were making were far more complex. Not only did we have to adjust layout, but all of the corresponding graphic treatments as well. This was frustrating for us, worrisome for the paying client, and disastrous for the project schedule. However, it didn’t take us long to realize that we needed a new approach. We decided to account for more time in our schedules to do gray box wireframes and added it to Step 1 of our process. The end result was that while we added another step to our design process, we actually saved time in the long run because we were addressing problems early and not waiting to resolve problems during full color phase. After implementing this new method, we certainly noticed an improvement in our projects. Let’s take a closer look at why wireframing is the right choice for you and your clients.

Wireframing plays an important role in Information Architecture

Certain requirements and concepts can seem like great ideas during initial project calls, but things can quickly fall apart when you start laying them out on paper. Since wireframes take considerably less time to generate than full color comps, you can spend time early on using them to map out all of the pages for a particular site. Even at this early stage you can get a sense of the user experience and therefore spot potential usability problems with your design. Plus, the issues that you uncover could drastically change your approach to the project as a whole. It’s much easier to make adjustments early than it is to have an “oh shit” moment when it’s crunch time.

Helping the client to focus

To put it simply, using gray box models eliminates the distraction of an element’s visual treatment. When reviewing a page layout for the first time in color, it’s very easy for the client’s opinion of the page to be influenced by the graphical design. If you happen to select an overall green color scheme for the page and your client happens to hate the color green, then they’re likely to have a strong emotional response to the color that will make it harder for them to focus on the “bones” of the page. Their feedback may be, “You need to completely start over” when in actuality, the layout works fine and the color was the only thing throwing them off. A stripped down wireframe will let you get important feedback on sizing, layout and placement without your client getting hung up on the presentation.

Wireframes teach you about your client

By sticking to gray box models and removing the visual distractions, you can begin to get a true sense of your client by listening to their feedback. Their responses and your interaction with them will give you a better sense of what to expect during future phases of the project. Initially when you’re laying out a rough structure for a page, the client could comment on the size of a particular button, for example. As you’re working through the process of wireframing you may notice that the client is consistently commenting about the large size of that button and other elements that you’re putting into the page. You can then begin to watch for feedback patterns and learn, “Hey, this client doesn’t like large bulky things and prefers smaller, more low profile elements”. Having that knowledge could save you A TON of time on revisions when you get to the full color comp because you already know their preferences going in.

Also, and maybe more importantly, wireframing can give you insight into how the client communicates. Do they give you more constructive feedback on a comp over the phone or do they do a more thorough job once they’ve had some time to think and type up an official response? By knowing how your client communicates, regardless of whether they are aware of it themselves, you can apply that knowledge to future aspects of your project which will increase your speed and give you a better chance at success.

Wireframes can save you time

If you’re operating on a tight timeline, it may seem like a waste to do a gray box version of a page before moving to a full color comp. You might think, “I don’t have a ton of hours to work with here, so I better just jump right into in”. We made that same mistake in the beginning, but almost no matter what you do, your client is going to have revisions. Doing a wireframe first allows you to spot potential problems early and make adjustments to the layout in the gray box stage vs. making changes in full color where there can be many detailed elements. As a result, we’ve incorporated a gray box wireframe as the initial stage of our full color comp process. We use the wireframe to layout the actual dimensions of the page, so that once the client approves the final wireframe, it’s really just a matter of skinning the page with a graphical treatment. If the wireframing process is productive, then you won’t receive a bunch of requests for revisions to the layout and you and your client can focus strictly on refining the visual treatments.

Other resources

Whether you use actual sketches or build gray box models in Photoshop or Illustrator, the important thing is that you’re taking the time to plan things out at the beginning. Even if you’re not a graphic designer, there is software available that can help you produce a wireframe that you can review with your client and then pass off to other team members on the project. Most of the time we stick to gray box wireframes in Photoshop, however we’ve used these applications below at one point or another with success:

OmnfiGraffle

Is a Microsoft Visio-like program for the Mac that has some great wireframe stencils built into it. It has a ton of features, but it could be overkill if you just want to do a basic wireframe.
Lovely Charts

If you’re just toying with the idea of wireframing for the first time, I’d definitely recommend giving Lovely Charts a try. The interface is pretty straightforward and the best part about it is, it’s FREE!
Balsamiq

If you’re looking for a quick way to communicate a concept to a client, I’d recommend using Balsamiq. They have a free demo that you can try that still allows you to save out the final product. The basic elements are all covered and the hand-drawn look helps your client to focus on the structure without getting hung up on the visual treatments.

What do you think?

Every situation and every project is different, but taking the time to do the legwork up front will almost certainly pay dividends down the road. Your client will appreciate your attention to detail and they’ll definitely appreciate the money that saves them since you’ll have less full color revisions.

We’d love to hear your thoughts about the importance of wireframing. Please feel free to share any techniques you use with clients or if you have a particular wireframing method of choice, let us know in the comments!

27 Responses to "The Importance of Wireframing"

Ahmed 03162009

Good article!

Being new to web design, I use to have those same bad habits of starting things directly into photoshop!

I think the most annoying point with working WITHOUT wireframes, is that clients are easily distracted with visual elements, and that just makes lot of revisions to do! I remember having a design turning from 2 or three revisions to 10 or more! And the result is never as good as we expected…

Now that I’ve learned the lesson, I’m trying to do my best to present decent wireframes before starting any visual work!

As content is the most important thing on a website, I strongly think that Wireframes helps people get the best approach of putting elements on the right place in a webpage.

So yes! Wireframes are the key for good websites!
John Loudon 03182009

I am a big fan of wire framing. I carry sites out in this manner when its an internal project or large site.

I find that some clients just don’t have the vision to see a site from looking good from just a wire frame, its important for large sites its a must, but a mock up is what sells a lot of sites (for the smaller clients little shops and business’s). So I would say this method would be judged depending on who the client is.

Good post though!
Ash bryant 03182009

I agree that wire framing is a good thing, however I have tried this (and still do), but I do find that it works with some clients and not others. Some of them will see a wire frame as an unfinished design, and not fully get it until they see a “design”.

I have found I have signed off a wire frame with them only to findout that they don’t like the layout, when they see a graphic design of the site. I think that it is good to do wireframes, but it’s not the whole answer to your client problems.
Ian 03182009

Great Post!

I often have the most trouble taking the first step in any web project. With so many requirements and considerations to take into account, who wants to waste their time with revisions? Wireframing seems to be the first baby step that initially won’t take too much time but will pay off the end. I’ll definitely throw this into my workflow the next project i get my hands on

thanks!
Kevin deLeon 03182009

I agree to some extent.

I think that designing using wireframes can be very helpful, but also depends on the project/client.

I find that doing a wireframe for some clients is like asking them to imagine some abstract concept when they have absolutely no imagination at all. They want to see a website, and NOT a bunch of gray representative boxes on a page. You would think it would be as easy as saying “think of these as placeholders for your content, we are focusing on content placement and information presentation” but sometimes people can’t get past themselves, and what they are seeing in front of them at that given moment. I know the gray boxes are supposed to alleviate that problem, but they themselves can also be part of the problem.

I more often find it beneficial for myself to do a wireframe layout on a grid for my own personal benefit (to visualize information presentation), and never end up actually showing it to a client, unless I feel confident it will be a benefit to us both. But once again, this is decided on a project-by-project basis.
Hugh Collier 03182009

Good article. Do you include blocks of lorem ipsum text in your wireframes or just block out text areas too? I think I should definitely try and start working in this way. At the moment I jump straight into photoshop which as you’ve pointed is less than ideal.
Nkrumah Farrar 03182009

Outstanding Post!

Since college I have always resisted the process of creating drafts, so it took me a long time to adopt wireframing as apart of my process. Having an accurate road map makes for a less stressful. Developing sites from low fidelity wireframe sketches eases the revision process for sure. Also having a good grip on site architecture will keep you from hitting roadblocks in creating an intuitive user experience.
Nkrumah Farrar 03182009

After thought… Wireframing has certainly proven successful for me working in teams of developers who can see past the Grey boxes, but clients and biz-dev executives don’t show the same vision. It really doesn’t come together for them until they see some degree of skinning.
mark vernon 03182009

iplotz.com is a new site for wireframing and mockups, available as both desktop application and as a web application. Please check it out!
Eugene Kuhns 03182009

Good article. Now if I could convince other people of the benefits of planning a website. Most of them think a website is just a brochure to be placed online.
Dennis Kramer 03182009

Wireframing is great. As well as many others, I had the bad habit of going straight to Photoshop and ignore the power of a good wireframe.

I agree with the fact that showing wireframes might not work on every client. However, I believe that there should be a good wireframe before starting up Photoshop. Not for the clients, but for the team, developers, designers themselfs.

(Good article. It might have some added value to add a good example of a wirefram tho)
SD 03182009

great and very informative article….and here you can find different Wireframing Tools
sergi bosch 03182009

using wireframes to predict user experience has been extremely helpful for me.
Nick 03182009

I recommend taking a look at Axure too…very powerful tool for this type of work.
Paul Anthony 03182009

Great article,

I’ve put together my own list of tools (some of which you’ve mentioned above) in a previous blog post. Might be of interest to some of you.

http://blog.webdistortion.com/2009/02/22/useful-online-tools-for-easier-website-planning-and-prototyping/

As you’ve mentioned one of the main benefits of wireframing is that it helps to avoid scope creep.
David Zachry 03192009

This is right on.

I’ve found this certainly helps avoid costly design time revisions as well.

It should become the practice for anyone involved in the web design / development process.

I use OmniGraffle for wireframes because it easier to created the shapes needed quickly and get them lined up as needed. Plus it allows for multiple pages with in one document. Finally, there are a ton of wireframe elements you can download and use in the application.
Adam Little 03192009

Thanks for all the comments everyone! Just like John Loudon and Kevin deLeon pointed out, wireframing doesn’t work for every client. In my opinion, it’s critical to the success of a large project, but smaller and less web savvy clients may not see the value in putting together a wireframe first.

That being said, we always start with some sort of wireframe regardless of whether or not we show it to the client. One thing that I didn’t mention in the post above, is that doing a wireframe also helps us communicate ideas and concepts internally before we even pitch anything to the client. Not to mention, it’s a great medium for me because I don’t have anywhere near the talent that Matt has when it comes to graphical design. This way I can get my ideas out and we can review them together before Matt takes over and makes things look pretty.

@Hugh Collier we use lorem ipsum text some of the time, but typically only in cases where there is no pre-existing content. If content does exist, we try to use portions of it in the wire to help the client connect more with the gray box model.
Matt Downey 03212009

Also along these lines, it looks like Nick Fink of Blue Flavor recently gave a presentation at SXSW about wireframes with Donna Spencer and Michael Angeles. Check out the slides from their presentation below, they are quite thorough and explain in further detail some of the topics discussed in this post and thread.
Ani López 03242009

NOt only a buen article, also a site I’ll visit often
Emily Lindgren 03252009

I think if web designers would stop being tied to the print layout tool of Photoshop and start using the web layout tool, Fireworks, there would be a lot less room for this wireframe discussion to continue.
Hugh Collier 03252009

@Emily Lindgren To be fair Photoshop isn’t strictly a layout tool at all, print or otherwise. I agree though that Fireworks is an awesome tool for web design, however I still find myself doing the majority of work on layouts in Photoshop and then importing the PSDs into Fireworks to work on finishing touches and to export a quick demo of the site. It’s something I’m trying to change slowly but I’m just so familiar with Photoshop that it’s going to take some time.

In relation to wireframing; I’ve taken it on board and tried it out on a site I’m working on at the moment. I must say I think it has actually saved me some time already. I’ve found it useful not only in relation to showing clients stuff but also to speed up my own design process too.
Hugh Collier 03252009

@Adam Little Thanks. That makes a lot of sense. To be honest I’ve always kind-of had my doubts about this whole wireframing thing but this article and trying it out for myself has convinced me of its value.
Frank 03272009

Good article. We always produce wireframes and always show these to client – we use them to get a sign off on functionality and IA. They are just as helpful internally as to the client.

A couple of comments above (from John and Ash) have mentioned clients not having the vision to see past wireframes – this can be dealt with with moodboards – you can show wireframes to illustrate IA and functionality and show moodboards to illustrate the visual language. Getting a client to buy into and get excited about a design is a job in itself and the responsibility or the creative director, art director or senior designer. (or whoever ‘owns’ the design part of the process) Showing a client a fully mocked up design without the client signing off a visual approach is a huge waste or resource.

ta

Frank
Peter Severin 04132009

Another tool in this area is WireframeSketcher. It’s an Eclipse plugin for creating screen mockups and UI prototypes.
Cristian Pascu 05272009

Coding is expensive. That’s a sure thing. Lots of money go in software projects every year and since a significant share of those projects fail for miscommunication reasons, one could easily tell the importance of wireframing and prototyping from a financial perspective.
More than that, wireframes are a form of communication, most of the time between persons in extremely different areas of specialization. Communication is difficult and it takes a lot of effort to do it well and efficiently.

Wireframes and, when the time comes, digital prototypes are a cheap but very effective way to put the client in front of something that mimics sufficiently well the real thing so she could speak up on what she likes or dislike, what’s right or not. And since graphic design can and does distract the user/client from important aspects, what can be more useful than a functional prototype that looks like an wireframe? :-)

FlairBuilder (http://www.flairbuilder.com) is such a tool that lets you create wireframes as interactive as coded prototypes: you can link pages together, type in text, browse tabs and more.
I hope you’ll find it useful!
John Arnold 0922009

I think most clients have a difficult time w/ the abstract concept of wireframes and visualizing how they relate to a full color design layout. I generally describe wireframes as “stick figures”.

What I’ve found to be very helpful is a simple screen shot of a wireframe template and the corresponding design comp. This way the client can visually see exactly how the major components from the wireframe are brought to live in the design comp. And isn’t that the point, to confirm we’ve captured all the primary elements in roughly the same location they’ll appear in the design comp.
Freelance Web Design Leeds 10312009

It work for some clients and not others?

You want a house building. Would you build the thing without an architecht producing blueprints of floor plan area / sizes etc?

Wireframes are no different in web design production. A client really needs to see a wireframe, as much as a client would need to see architecht plans for a house. You wouldn’t build a “makeshift” version of a house first would you?

Websites are a tool and architectural planning is most definately required before proceeding with a full layou concept. If the client does not get this, it’s because the process has not been clearly explained to them.

Just my thoughts on this! :-)

45royale Inc.

Our blog serves as an online file cabinet for articles, media and other noteworthy bits we find strewn about the internets. Some of it's good, some of it's awesome. Either way, it's all royale.