Balsamiq Mockups – A quick demo

Five years ago I had taken a graduate level course in UI and human interface design. At that time there were almost no tools that could be used to create mock-ups of UIs (at least nothing to write about). About 2 years back I came across a powerpoint template that had a bunch of images that looked like commonly used UI controls that you could drag and drop onto the slide surface. It was a step up, but it wasnt exactly a mockup design tool and the hardest part to using it was how hard it was to customize the controls to show the information that is important to you. (Check out a newer version of the same idea -http://www.slideshare.net/graiz/wireframe-powerpoint-parts)

Recently, Balsamiq popped up onto my radar. I was intrigued, as the screen shots and screen-casts that I had seen, made the tool look exactly the way I thought a mock up tool should work – easy to use, and the mockups created should not expose any implementation specific details.

In order to test it out, I requested that Balsamiq provide me with a license so that I could take the application for a spin. Balsamiq was kind enough to indulge me and they provided me a license free of cost. (This is my disclaimer statement too).

First step: Balsamiq runs on the Adobe AIR platform. So before I could install Balsamiq I had to go out and install Adobe AIR (which worked without a problem on my Windows 7 machine).
Next: Balsamiq’s installation began and was quickly done. I was able to start it up and use it without a problem on my Windows 7 machine.

Here are my first impressions:

Balsamiq’s mockups almost have a “drawn on a paper napkin” feel. I think that this is its biggest selling point, as it makes developers step back from the implementation details that surround UI implementations and instead concentrate on the user experience.

The interface uses a Microsoft Ribbon like interface which has different tabs, each containing different UI controls that you can drag onto the design surface. Once a control is dragged on to the surface, you can resize it using the sizing handles. Some controls allow you to double click them and add content (like text areas). In addition all controls have a properties window, which you can use to change font size, etc.

Thats pretty much all that the interface is. Having a pre-defined set of controls makes it pretty quick to create simple UI mockups.

Here is a very simple mock up of my blog page that I created in under 5 minutes. (Almost immediately after setting up Balsamiq on my computer).

I plan on using Balsamiq on an upcoming project and will keep posting my thoughts on this tool.

Balsamiq is a very cheap tool ($80) and just for the features described above, it is worth having at least one copy of this tool amongst a group of developers.

The issues I need to work out:

1. Not sure how one would go about creating new controls that arent already a part of the Balsamiq control list. This might be an important feature if your group tends to routinely create new UI controls
2. In a text based control, if you type Lorem, Balsamiq will automatically fill in the “lorem ipsum….” text. For the Post Title, I wanted to insert only the text “Lorem Ipsum Dolor”. But Balsamiq insisted on inserting the complete Lorem Impsum…. text. It would be nice if like MS word, Balsamiq would revert back to the original text if we hit UNDO after some text was auto-inserted.
3. I need to find out what other special commands they have. From a quick glance, there seemed to be ways to underline, display text as hyperlinks, etc.
4. Images automatically get saved to a folder under documents called Balsamiq. I am not sure if there is a way to specify the folder to output the images to.

As of now – its a thumbs up for Balsamiq.