The WorkerThread Blog

we know stuff so you don't have to

Archive for March, 2009

Clever UI Mock-Ups with Balsamiq Mockups

Posted by workerthread on March 31, 2009

Often I get called upon to produce some kind of user interface mock-ups as part of the initial design phase of a project.  I definitely believe that a showing your customer a mocked-up version of what the finished user interface will look like as early as possible is a good thing.  No matter how much detail you go into with words and flowcharts, a picture of what the user is going to see on screen helps a lot.

Now I certainly don’t claim to be a graphic artist.  In the past I’ve prepared this sort of thing for users in a variety of ways.  Visio has some UI template components “out of the box”, and there are add-ons out there which extend it’s capabilities.  I’ve even roughed things out using lines and boxes in MS Word and PowerPoint before now. 

I’d heard good reports about Balsamiq Mockups, a tool developed using Adobe Air and available as a desktop or web-based product.  Balsamiq deliberately use hand drawn user interface components – the idea being that when you present your design you can focus on the functionality, and not, as they say “that pretty colour gradient”.  As they also say, you aren’t giving the impression of a polished UI with code behind that’s already to use.

For my first attempt, I thought I would put together a mocked-up page for an online books/CDs/DVDs/whatever store (you may have already seen some of this functionality elsewhere 🙂 ) –

Demo web page Mockup

I was pretty impressed with how little time this took me to put together – in total, including downloading and  installing the trial, less than half an hour.  I really liked the way you can do stuff like add images to the mock-up, then quickly get Balsamiq to turn these into sketches.  Again, this gives the user a good representation of what’s going on without too much distraction.  The UI components they make available are pretty comprehensive, and extensible as well I believe.  Also I notice they’ve already added iPhone UI components, as you can see below:

Click for a full-size image

So far I have to say I like Balsamiq Mockups a lot.  It’s very refreshing to work with a tool that lets you be very productive very quickly.  And at $79 per desktop licence it seems to be a bargain.  I’m planning to spend more time with it over the coming months and will report back on how it works out.

Update 5 April – I changed the example mockup image -  for some reason the original wasn’t always rendering in my WordPress theme.

Technorati tags: , , ,

Posted in Web Design, web development | 1 Comment »