DISCLAIMER
In exchange for a free copy of Balsamiq, I have agreed to do a review of the product. This is not a sponsored ad of the product but rather my honest opinion of what works well and what doesn’t.
As a developer, I often have to do UI mockups at various stages of development because it help crystallize the user experience and implementation. Plus it helps others who want to understand my application to see what the UI might look like and give feedback.
There are a variety of tools to help with the mockup process. On the low end, there’s pencil and paper, it’s cheap and quick but cumbersome to change and share online. On the high end, there are tools like Photoshop (proprietary and expensive) and GIMP (open source and free). While great, these high end tools have a steep learning curve and hence not ideal for me.
There are also a number of in-between tools available online on the web but somehow I never bothered to try them out, just seems like too much trouble. Balsamiq came to me as a good tool for mockups via recommendations from several other entrepreneurs and developers, so I decided to try it out.
Balsamiq is an Adobe AIR app, so it works cross platform, that’s a definite plus but if you have used AIR apps before, you also know that Adobe AIR platform is a memory hog, I hear there ‘s a 2.0 version coming out in early 2010 that claims less memory consumption but we’ll see. I have seen Balsamiq use anywhere between 50MB to 100MB on my Windows XP. That’s not too shabby because other AIR apps use considerably more memory.
The installation process is trivial though you have to install Adobe AIR if you don’t already have it on your system. To learn about the product, online help is available here. To be honest, I tried to read through the help but it was dry and taking too long, so I simply jumped in after getting a basic understanding of the app layout (picture borrowed from the site).
Application Bar
Allows you to do operations on selected UI controls like cut, paste, copy, group etc, frankly I don’t use it much though it’s handy if you can’t remember the keyboard shortcuts.
UI Library
This is where I started to create a mockup. It contains a list of all the UI controls that are available to drag and drop on the mockup canvas. By default, all the UI controls are listed but you can restrict to one category by clicking on the category like Buttons, Layout, Media, Text, etc. I can also quickly find a UI control by searching the “Quick Add” area though that is not useful initially because I don’t know what UI controls are available and certainly don’t remember the names. It will be handy later after I used the product more.
Mockup Canvas
Self-explanatory, it’s where the actual mockup is done. For me doing web mockups, I started with the “Browser Window” control and dragged it to the canvas. For anyone familiar with Windows UI control, the basic operations using the mouse and keyboard apply in selecting and resizing a control. When a control is selected, there is an additional dialog box that gives me additional operations on the control, it’s faded in the background until I mouse over it. For the most part, inline editing (double click) is supported for controls that allows data entry. That’s sufficient for me to get started. Once I start experimenting more, I consult the online help page for further details. I should note that the app is designed to mimic pencil and paper mockups, it’s not meant for final or pretty UI design but for the purpose of creating mockups and getting feedback, it does a great job at it.
Parting Thoughts
Overall, I recommend the product if you can afford the $79. While that’s not cheap, it’s a good investment if you plan to use it for all your mockups. I should mention that sharing the mockups for feedback is kind of a pain. I would need to export the mockups as PNG files, upload them on some service like flickr, and send out emails or IMs to the URLs. Perhaps this is a service that the Balsamiq team can provide in the future. Also, this is a good tool for anyone (even non-techies) who wishes to do mockups because the learning curve is fairly easy.
