Stop Using Wireframe Tools


I love Omnigraffle. This wonderful tool enables me to create high-fidelity wireframes with its smart alignment capabilities, snap-to functionality, and vast assortment of stencils.

And there lies the problem.

Most of the time, wireframes aren’t supposed to be high-fidelity. They’re intended to get you from conception to code as quickly as possible.

Instead, they influence us to build pixel perfect representations of what we think it should look like, slowing down the process, inhibiting our ability to make drastic changes along the way.

Pen and Paper is Faster

You can sketch wires using good ol’ fashion pen and paper or a whiteboard much faster than you can with traditional wireframe software. Yes, if you make a mistake it’s harder to fix and no, it’s not reusable, but the goal is to jot down and iterate on ideas quickly. Your first wire shouldn’t be the best one so, sketch 10, 20, or even 30 concepts rapidly to get to the one that sticks.

Sunk Costs are Sunk

It’s harder to throw away something that you’ve invested a lot of time doing and in turn resulted in “pixel perfection”. Sketches don’t take long and are often messy. Again, the first wire will not be right so be prepared to kill a few of your babies along the way.

Wireframe Tools Discourage Crazy

Stencils and predefined templates can help speed up aspects of the wire framing process and help conform our design to established paradigms but this comes at the cost of our creativity. These tools can inhibit our creativity, restricting the creation of new, unfamiliar UI elements that don’t conform to the tool’s presets. When things are more difficult to do, we avoid doing them. On the other hand (no pun intended), a pencil and blank sheet of paper affords complete freedom.

Wireframe Tools Have Their Place

My dig against wireframe tools is not gospel – there are certainly a number of situations where the use of these tools make logical sense. Some engineering organizations operate best with high-fidelity wireframes while others can implement rough sketches straight to code – design patterns and reusable widgets help with this. Wireframe tools can more accurately depict content affordance, spacing, and interface limitations than less imprecise sketches.

My point is to try and help you recognize when wireframe tools are enabling and when they are prohibiting. Know when to use the tool and when to use the chalk.

- – - – - – - -

*Photo credit: Nathan Bashaw
*Featured photo credit: Shawn Campbell

Special thanks to Nate KontnyJesse Lamb, and Cat Smith for providing feedback and edits on this post.*


About the Author 

meRyan Hoover is the Director of Product at PlayHaven.  He is passionate about startups, product, and personal growth.  Visit his blog  to read more on these topics and follow him on Twitter.Get Ryan’s essays in your inbox by subscribing to his private email list  and receive a FREE copy of Hooked (due 2013), a book written by habit researcher and blogger Nir Eyal in collaboration with Ryan.