Wednesday, December 10, 2008

Balsamiq Mockups - excellent UI mockup design tool

I was recently presented with a mockup UI design at my current project. The design was clearly a sketch, but there was no doubt at all what the purpose of the mockup was.

UI mockups are an excellent tool for communication between the users and developers of a system. If the drawing of the mockup is to take place during discussions, the process needs to be very swift. Enter Balsamiq Mockups.

Balsamiq is an Adobe AIR application allowing very quick UI design. Being an AIR application, it runs on Windows, Mac OS X and Linux.

[caption id="attachment_25" align="alignnone" width="292" caption="Simple Balsamiq mockup"]Simple Balsamiq mockup[/caption]

The tool uses a notebook metaphor, and all UI components look "sketchy" (which just underlines the fact that it is a mockup). The tool has a whole palette of the typical UI components for thin (browser based) and rich applications you might need for a UI design.

One of my favourite details about Balsamiq is that is very keyboard centric, which greatly supports a discussion based process, provided, of course, that you are a keyboard shortcut enthusiast. It is very easy to add components, move them around, edit the contents etc. If you prefer using a mouse, that is of course also very easy.

Mockups can be exported as PNG or as XML. Balsamiq claims that the XML format is human readable. I wouldn't exactly say that (unless you really like XML), but there is no question that the format is open and could possibly be manipulated by other tools (such as an XSLT) - it might even be possible to generate code directly from the mockup...

Balsamiq is the best tool for UI mockup creation I have seen so far. With a price tag at §79, even the price is right. Take a look at and try their demo.