Is There a “Right Way to Wireframe”?

Apr 06 2010

No. Not really.  As long as you include wireframing in your process, you’re “doing it right,” no matter the tools you choose or the process you use.

Well, that’s not very satisfying is it?  What if you’re new to wireframing and need some help and inspiration for getting started?  Luckily there are a lot of wireframe pros out there who are willing to share their process and some examples of their work.  The important thing is to not obsess over the details of how the pros do it: which tool they use (Balsamiq, OmniGraffle, Fireworks, HTML) or what the deliverables are (flat wireframes, clickable wireframes/prototypes, paper prototypes, STOP-MOTION paper prototypes, protocasts).

Trying to figure out which is the best way or the “right way” to wireframe before you even start is like obsessing over finding the best ergonomic pen and the moleskine notebook with the perfect paper weight and texture before you start writing your novel.  You just gotta start with what you have, and figure out what works best for you as you go.

That point was illustrated very well during a workshop I attended at SXSW called (wait for it) “The Right Way to Wireframe”.  Presented by Russ Unger, Todd Zaki Warfel, Will Evans and Fred Beecher, the workshop covered four different approaches to creating wireframes and designs for the same website redesign project: Lend4Health (read the backstory of this idea here, and about the process of choosing Lend4Health here).

Each of the presenters (and their partners/teams) developed the wireframes and designs individually and isolated from the other three, so that they wouldn’t be influenced by what the others were doing.  So we get a pretty good idea of each person’s/team’s typical workflow. Plus,they decided that each would use a different tool to create their wireframes, so that we could see four different tools in action — and also see that they all get the job done pretty well.  They presented four different workflows, with four different wireframing tools, none of which are the “Right Way to Wireframe”, but simply “ways to wireframe”.

Here are the four videos presented in “The Right Way to Wireframe,” for your viewing pleasure:

Russ Unger | Tool: Balsamiq

Todd Zaki Warfel | Tool: Fireworks

Will Evans | Tool: OmniGraffle

Fred Beecher | Tool: Axure

You’ll notice that even though they use different tools and have different deliverables, they all follow a similar process: research and requirements gathering, creating personas, creating a sitemap, sketching, wireframing/prototyping and finally, designing the visual look and feel. So if there is a “right way” to be found in the act of wireframing, it is in the process leading up to it: research first, sketching ideas next (lots and lots of sketching) and THEN wireframing. But the act of wireframing itself can be approached from many different angles with many different tools. The way you do it is up to you based on personal preference, the requirements of the project, and what will allow you to communicate ideas best to the individual client or project owner.

Posted by Jill at 11:54 AM

Published in Design, Development, Process on Tuesday, April 6th, 2010

Tags: , ,

Comments are closed.