I was recently asked:
What’s the best tool for wireframing?
I’ve used quite a few, including Balsamiq, Photoshop, omnigraffle, and even MS Word. I’ve come to a pretty strong opinion on the best tools for the job:
Balsamiq is great for the simple reason that it doesn’t look great. The drag and drog search menus, drop downs, maps, and so forth all look like a hand drawn sketch.
For whatever psychological reason, this means that the customer can look at the sketch without bothering to comment on the shading, the colors, how round the corners are, etc. They focus purely on the functionality and the information architecture.
- Can they find the button they are looking for?
- Can they understand the information being conveyed?
As a bonus, you can link several mockups together to have a crude but clickable prototype.
2) A piece of paper
Yep…a piece of paper.
With all the advantages of Balsamiq plus a clear price differential, a piece of paper is the clear winner. It’s easy to modify (if you have a pencil and an eraser), easy to share (take a photo if you want to share it on-line), and zero load time or dependancies.
You’re doing a wireframe. It shouldn’t be complicated. You could have drawn three in the time it took to read this blog post.
Even a terrible 2 minute sketch like my original one for startupSQUARE can convey the basics and give you a good starting point for discussion.
1) A piece of paper with multi-colored sticky notes on top
A distinct improvement on the vanilla piece of paper, sticky notes allow you to move the buttons and widgets around more easily, and if you use a big enough marker (a fine point sharpie) then you won’t draw too much detail.
That simple restriction will force you to think about the most important aspects instead of letting your sketch move quickly into a discussion of rounded corners.
Honorable Mention: Photoshop
Photoshop gets an honorable mention for being good when you need to go to a full mockup. Clever use of folders and layers will allow you to mockup what happens when you click certain buttons easily. You can even do a screencast this way and fake a whole product demo for great customer feedback and fast iteration.
P.S.: Think you’ve got a better tool than a piece of paper? Let me know.