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.
———
Note: this essay was first published on Vue on 4/24/2013.
Photo credit: Nathan Bashaw
Special thanks to Nate Kontny, Jesse Lamb, and Cat Smith for providing feedback and edits on this post.