Designing Interfaces with Balsamiq

In the last seven months I have the need of sketching a bunch of interfaces, but I cannot find a valid tool. I was a Software Architect of a big huge project, busy also on other smaller projects as project manager.

I need a rapid way to sketch use cases, to pass them to a very young team.

Web interfaces are not easy to design, and we was in a very weird situation: the team was forced to use DAOs, with no O/R mapping tool. So I need also to map some interfaces to a database model, to help them building the model and the view classes

After some search, I ended up with MS Visio.

MS Visio is great, but too difficult to use, doing training is hard and so I must discourage its use. Worst, Visio costs a lot, and it is not included with the standard MS-Office Tools.

Visio offers only WinXP look&Feel, which is not the best for designing agnostic web interfaces.

Thank you to a friend of mine, I have the discovered the BalsamIQ Mockup project. Let's see why it is a so good solution.

Compared to MS Visio,  BalsamIQ Mock-up is a very ace for interface design. It is a small application written in Adobe AIR, which "feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting." (from site teaser). Installation is very fast, and overall application is only 2MB in size (on these days this is incredible, isn't it?).

The important thing about the tool is its overall simplicity. You can sketch your interfaces in a snap, rearrange controls, put comments and so on.

Here is an example:

[singlepic=10,320,240,,center]

Sometime the tool is a bit slow, at least on by WinXP box, but I think this is an Adobe Air limitation which will be fixed soon. Undo functionality are good, and a context-sensitive toolbox helps you aligning controls and so on.

The overall results are damn good. And the tool works on Linux and MacOSX too, while Visio can't.

Another important thing its the way the data are exported: you can easily obtain a clean XML structure. I expect should be easy to build a small xhtml structure template of the export, via a medium-complex XSLT transformation.

This is important, and it would be nice to have such feature in the next revision of the BalsamIQ Tool. So I suggest you to give a try to it, because interface design is crucial in today world.

Update-June2010: This small python tool can create clickable HTML imagemaps. It is not exactly a html wire frame, but it is a first step.

Comment by Percorso Formativo: Finance | Gioorgi.com on 2008-11-16 14:37:30

[...] sviluppare interfacce ponendo l’accento sulle interfacce? Dare un occhio a tool come Balsamiq, ma anche ad articoli di approfondimento sulle interfacce  come quello di Joel Splosky. Apple [...]

Comment by Che sia semplice! | Gioorgi.com on 2008-11-24 00:25:36

[...] Scrivere interfacce è quindi un compito non banale, che viene spesso sottovalutato. [...]