Skip to main content

Easy, collaborative web UI mockups with Balsamiq

Every now and again you come across a tool that is so easy to understand, so fast to use and so effective at conveying it's ideas that you just have to tell people about it. One such tool is Mockups by Balsamic.

It's a web page mockup drawing tool written using Adobe Air which provides a palette of HTML widgets with which to 'draw' your screens. It has a querky 'freehand' style which lends itself to conveying the components and ideas that a web page should have without forcing the designer to code it up in HTML (or for the customer to think that because the HTML is done, the app must nearly be ready...).

Here is a very simple web page for search and listing users which I 'mocked up' in less than 10 minutes:
As you can see it's got a number of standard HTML widgets on it as well as a very useful 'post it' note allowing you to add distinctive notes and comments to the mockups themselves. So this in itself is enough to warrant using it to create all the screenshots that you might need which trying to show a customer what their site might look like, but...

The best feature about this tool is that it's so easy to understand and control that people are happy to start adding and editing stuff within five minutes of seeing the tool:
I used it recently during a teleconference to try and show a couple of remote attendees what my ideas were about our new project. We were each sat at our desks (in different offices) with headsets on (talking to each other) and other two people 'remote desktop'ed (via VNC) to my machine. I was then able to show them my ideas and also start to perform live edits to the mockups as the meeting progressed.

After about five minutes one attendee said "here, let me try..." and that was it, for the rest of the hour-long meeting all three of us were taking it in turns to control the mouse and keyboard and refine the mockups.
It was one of the most collaborative remote sessions I have ever done - because Balsamiq Mockups is so intuitive to use it was a doddle to get people to start to use it. Also because you can directly export the mockups to images it's easy to include them in just about any type of document or system that you have.

This is an excellent tool, and cheap as well!

Oh, and if the standard widgets contained in Balsamiq Mockups aren't enough, there is an ever-growing collection of user-contributed widgets over on the Mockups To Go site, a great example packed with widgets is Various Web Page Widgets.

Technorati Tags: , , , , ,