How wireframing makes your website designs better

Reading time: About 2 minutes

Wireframing in terms of website design means to create a basic “sketch” of your website’s user interface. While many web designers jump straight from client meeting to Adobe Photoshop, or even to creating CSS and HTML prototypes, they are missing important opportunities in the website design process. Wireframing addresses extremely important issues in strategic design, client adoption, and user-centered design.

The value of wireframing comes down to a simple idea: Wireframing forces you to think about your user interface design decisions in terms of user needs first, instead of in terms of what looks good.

Ideal website design deliverables from start to finish

Removing the wireframe from the website design process

Without wireframing your website designs, you’re vulnerable to these design pitfalls:

Lack of focus on strategic UI design. Taking a website design from conceptual design to UI means considering the strategic value of UI components, which doesn’t always happen when you’re considering 48 shades of red.

Client focuses on appearance rather than strategy. It’s easy to get caught up in how something looks, and everyone thinks they’re an expert on looks. Using wireframes helps keep everyone’s focus on strategic design decisions.

Unable to justify user interface design decisions to stakeholders. If you’ve carefully thought about the value of UI components before moving into skinning and prototyping, you’re armed with the power of reason against inevitable uninformed criticisms.

Changes to page structure are more difficult in later stages. If you’ve already tweaked everything to look beautiful in Photoshop, changes to structural issues can quickly turn into massive headaches. Moving things around in a wireframe is super simple.

How to start wireframing

Starting to wireframe websites can range from something as simple as sketching layout ideas on a napkin to using more advanced wireframing software, such as OmniGraffle for OS X users or MS Visio for Windows users. Other options include graphing paper, which helps make straight and measured lines, or web-based options such as Mockingbird or Balsamiq Mockups.

The important thing is to focus on the strategic why while you sketch things out, and not on what shade of blue you’ll use or what technology you’ll use. Usually website designs that have been “wireframed” turn out simpler to design and easier to use.

Conclusion

Taking time to wireframe your website can save time and headaches further along in the website design process for both you and your clients. On your next website, put a wireframe in front of your client and work together on strategic design decisions before jumping in front of Photoshop. You may be happy with the results.

500

36 comments skip to comment form

Jan said— 5 minutes later

Very interesting article, thanks for your thoughts about wireframing!

#1
Jon Myers said— 11 minutes later

Great insights and a great case for wireframing.

Wireframing can also help the designer think through the business case and how the user experience (end to end) supports that case. A step that can be critical to the success of a site.

#2
Daimon Caulk said— 13 minutes later

Brian this post is such a great resource. Wireframing is a necessary part of great site design. Without it the design is an exercise in vanity- not ease of use.

#3
Nick Yeoman said— 17 minutes later

Wire framing helps to get the whole team on the same page. Project manager, designer, programmer, client.

I’ve been wire framing for over 10 years, don’t know why it is only getting popular now.

#4
Tamara Olson said— 1 hour later

As a big proponent of wireframing, I couldn’t agree more. I chuckled aloud at the line “everyone thinks they’re an expert on looks.” How true. If I had a nickel for every time I heard, “Mmm, the structure … let’s talk about that later … but in the meantime, can we make it look more like Apple!?”

#5
Matt Redding said— 3 hours later

Nice post. Agree entirely that wireframing is critical to designing a great website. However, the next thing that designers need to make routine is doing usability testing of wireframes – don’t wait until a fully developed website is available to test. Testing at wireframe stage provides an excellent opportunity to tweak and adjust things before you get too far down the track.
We’ve been using a tool called Loop11 (www.Loop11.com) to test our wireframes. Highly recommend this approach and this tool.

#6
Konstantin Denerz said— 4 hours later

Inkscape is the best wireframing tool: http://inkscape.org/
You can design your components and reuse them in wireframes and prototypes.

#7
Blue Sail Creative said— 4 hours later

Absolutely great article….we firmly believe in wireframing and we wrote a similar article on our blog.

I use omnigraffle primarily and have an extensive set of stencils.

It is essential to do wireframing because it will end up saving you so much time in the long run. Changing elements with your client in the wireframing stage is a lot cheaper than doing it in the design stage.

#8
Brian Cray said— 4 hours later

Blue Sail: I’d love to get my hands on more stencils – got good links to any besides Konigi’s?

#9
Andrea said— 1 day later

Brian,
Great post on wireframing! As you and each comment mentioned, it’s a critical part of any website project. I also agree with conducting user testing with the prototypes – before the final site is built. You’ll save even more time.

As mentioned, there are many tools out there to wireframe and prototype; it is all about finding the one that best fits your needs and working with your clients. I would also like to point out ProtoShare, which is a web-based application that enables gray-box wireframing, but you can also take your wireframes to the next level of interactive prototyping if need-be. This way clients can understand some of the more advanced interactions and if they will work with their users or not.

Thank you for sharing your expertise.

Cheers,
Andrea
@ProtoShare

#10
Scott Radcliff said— 4 days later

Great post Brian. I definitely think the most valuable part of wireframing is defining goals and purpose. I too laughed at “everyone thinks they’re an expert on looks”. The phrase “make it pop” is almost as bad as Web 2.0.

In addition to what was mentioned, wireframes in collaboration is also a must. Especially if working remotely.

#11
Jami Gibbs said— 5 days later

When I read this I read, “well.. duh. Doesn’t every web designer wireframe before adding design?” But apparently not everyone does. Great article and advice that saves everyone a bunch of headaches and time down the road!

#12
Jesse Korzan said— 6 days later

This article suggests that you “skin” your wireframe to reach a final web design, if I am understanding correctly. Although convenient in some instances, it’s worth noting that this skips over a few steps in a design process.

Personally, I find it’s more helpful to focus our wires on non-visual issues, layout included.

#13
Ted Husted said— 2 weeks later

I wonder how many people are using the 960 Grid system with their wireframing tool, and how easy is it to apply to the various tools.

With Visio, it’s quite difficult. With Gliffy, it is very simple to set the page/grid size. Some other tools I’m trying today, like ProtoShare and Mockingbird, don’t seem to support setting pages and component sizes by pixels.

FlairBuilder does support setting page and component sizes, but I’d like a cloud-based package.

Any others?

#14
Brian Cray said— 2 weeks later

Jesse: Definitely agree that wireframes should address UI concepts and it doesn’t have to exactly represent the look of the final result. For example: you could have an area dedicated to “promotional area,” which leaves the rest to the ad team.

Ted: Not sure, because I like and stick with OmniGraffle. I hope that others provide similar means to build rhythmic/design grids.

#15
Andrea Fidel said— 2 weeks later

@Ted: I’m not sure about the other applications you mentioned, but I can help you with ProtoShare, since you said you were currently working in it.

While you cannot alter the grid size, it is simple to upload the 960 grid PNG to a project, insert it as an image into a template, drop the opacity down to 10 or 25% and save as a master template. Even better, you can create a state like 960grid, ON/OFF so that you can easily toggle the 960 grid on and off with just a couple clicks. ProtoShare actually makes it very easy to work with a grid in this manner.

If you don’t want to create a master template, just put the grid image into the Assets/Gallery folder and then you can drag it out from the palette onto any page you need. Where this gets really cool is if you need to have a sub grid on a page. Say you have a 960 grid template on the whole page, but you need to call out something by having a different grid to get a 2 against 3 kind of effect. You can drag out a different grid from the palette (which you have already uploaded to the Assets/Gallery) and place the image where you need the grid. It’s pretty flexible.

Hope this helps!
~Andrea

#16
webmasterdubai said— 1 month later

really nice article these are common problems we are facing in web designs you have mention with any wireframe, your article has given some good ideas and i want to share little bit from my side for wireframing sketching you can use firefox extention name pencil here is link for that

https://addons.mozilla.org/en-US/firefox/addon/8487

#17
TheRamblingOne said— 2 months later

Great, succinct summary on why every web site build of any scale needs to be wired out. Professionally, I’ve seen the work our group puts out increase in quality by leaps and bounds since we’ve instilled IA as a concrete part of the development process.

For those of you who have run into the “okay, but what happens when I click that button?” issue with clients, I’d recommend Axure (www.axure.com) as great tool that not only lets you create pixel-perfect wireframes, but also has the capability to simulate a fairly robust tool set of interactions for prototyping the user experience.

#18
Ian Wood said— 2 months later

Yeah you should wire frame – IN MARKUP…

The worst thing for all parties concerned is embarking on a journey of perception rather than reality. The advantage of prototyping (or grey box modelling as I have heard it called) over wire framing is simply that you produce something that is ACTUALLY achievable in the browser.

The time involved in translating wire frames to mark up, css and javascript can be eradicated by simply doing combining the wire framing and clientside build into one phase…

Design, build, test and what ever else in the medium you will deliver in and you will save time, money, heartache and a bunch of other stuff…

#19
KJ said— 2 months later

Cacoo (www.cacoo.com) is a great online wireframing tool that helps u share your wireframe as well in case u r working with someone in far distance.

#20
Steve said— 2 months later

I have to admit I’m rather surprised to not see Fireworks mentioned. It was specifically created for wireframing and web graphics, and is really a Web Designer’s best friend.

Also, Ian is dead on with regard to building in the browser from the get go, but this depends on the designer. Personally I find it easier to have a visual representation of something before I code it.

#21
Catherine Azzarello said— 2 months later

Even though I primarily work on small, albeit custom sites, I’ve become quite the proponent of wireframing. By working out the whats/hows/wheres before Photoshop, the entire process runs more smoothly. It also helps me really focus on the visuals when it’s time, using the wireframe as guide.

I’ve used the following wireframe apps:
JumpChart: an online app that’s great for working out written content, client collaboration, and navigation. Uses Textile and outputs to HTML.
Balsamiq Mockups: also online app. I’ve invested in the desktop version because it’s graphic–but ‘sketchy’ (great to remove any visual confusion for client) and has all the UI elements handy for drag/drop.

@Ted: Balsamiq has plug-ins, including a 960 grid graphic overlay. I’ve used this and can then move to PSD, with solid grid layout ready to go.

#22
Maria Porto said— 2 months later

man, you became my hero! I keep saying the same all the time…. asking people to ignore those who “jumps to the end”…. good to know that real designers still live!

#23
Matt Dolibog said— 2 months later

thanks for this article. mockingbird rocks!
you just saved me a lot of time.

#24
praveen vijayan said— 2 months later

Nice article
I prefer pencil. I’m using its standalone version. I love its install new collection and template feature. iplotz is also cool but need $

#25
Ted Husted said— 2 months later

After looking at about a dozen products , we settled on http://www.mockflow.com for wireframing. Both clients and colleagues have been able to jump in and start collaborating on MockFlow wireframes. Over a series of stakeholder meetings last week, we were even able to update wireframes between meetings with different groups, so everyone saw the “latest and greatest”. Highly recommended. (I’m not affiliated with MockFlow in any way other than as a regular customer.) – Ted.

#26
Tim Read said— 2 months later

Hmm. I’m using Joomla. (Aaargh no …. you all say). Well, yes. But the wireframing concept is still valid for new CMS sites. In fact I think especially so, because its easy to be seduced by the pretty online demos, and forget all about what it is your trying to do with the site. My problem is, how to visualise the basics first, without getting distracted by the multifarious ways of putting the modules together.

#27
Politics said— 2 months later

ya the wire framing make your site good looks and butter for searching joomla and drupal no any type mistaking in your web site very good effects for your site.

#28
Guido Jansen said— 2 months later

Nice article, thanks for sharing!

#29
Damian Herrington said— 2 months later

Great article. Never really saw the point of wireframing but after reading the article and thinking about a previous client’s website in particular on how annoying moving a particular element was once the design was finished, may have been different if I had a wireframe first.

#30
@stuartflatt said— 3 months later

I have always used the old paper and pencil technique in the past but I want to start including it in proposals etc….

Omni is out of the equation as it means kicking my missus of the mac, so what online / PC based ones are best? Visio I think is to un-friendly and equally I don’t want to pay lots of coin….

Thanks

#31
Brian Cray said— 3 months later

Stuart: I think balsamiq and mockingbird are toss-ups on which is better, but I think they are both excellent online apps. I linked to them in the article.

#32
Wolf said— 3 months later

Collaboration is what we had in mind when developing our own little app. Why another one? Because none of the existing matched our expectations. So to complement this wireframe list I’m adding HotGloo *The Online Wireframe Application* , launched on Feb. 14th, to the pool. Feel free to stop by and say hi!

#33
Cristian Pascu said— 3 months later

Hey,

A desktop tool that you can also use is FlairBuilder. It runs on Mac, Win and Linux, and comes with a lot of pre-built widgets and interactions. It just added support of iPhone prototyping.

Cheers,
Cristian

#34
Carla said— 6 months later

The best when you finish a wireframe? Make a realistic prototype (I use http://www.justinmind.com) and let the users play with it!

#35
pooja said— 6 months later

it was gud, but stilllllllllll there are questionssssssssssss

#36
Respond to this post—

Your name

E-mail address will not be published