Dressing for your wireframes
I was at the Future of Web Apps Dublin conference on Friday and a one of the speakers (I think it was Des from contrast.ie) showed a screen from a wireframing tool called Balsamiq. Here are my thoughts after using it for a little while…
At its heart, Balsamiq is a vector drawing tool with a library of built in ’smart’ shapes like OmniGraffle or Visio. The key difference is that instead of having realistic-looking controls to place on the page, the controls are drawn in a cartoony style. A typical page looks like this:
The fact that the design is not pixel-perfect is actually a huge time saver. I’ve often started in OmniGraffle with the intent of just sketching out how the page should be laid out or how the user should interact with it, and then ended up many hours later tweaking colours and fonts and alignment because I can’t ignore the fact that they’re ‘wrong’. Well, in Balsamiq, the effect is much more like using a whiteboard – when’s the last time you rubbed out what you just wrote on a whiteboard because the font was wrong??
The timesaving in the design of a page also carries over to group review of the page. The fact that it’s ‘just a wireframe’ forces people to evaluate the design at that level.
In terms of negatives, the only gripe I have is that the interface is written using Adobe AIR which means that it definitely has a non-native feel to it. Nothing fatal, just a bit jarring in places.
Updates: Someone also recommended trying Konigi stencils, found here: http://konigi.com/tools/omnigraffle-wireframe-stencils
