I promised earlier that I would take the Balsamiq Mockup tool for a ride and let you know how it went. I have, and here it is…
Installation
I decided to take some time I had waiting for a late plane one evening to install the application. Balsamiq uses Adobe Air 1.5 as an application platform – much like Java, you don’t need to worry about operating system anomalies when you’re coding, and Air is quickly on its way to becoming very popular. It took about five minutes to install both the Air 1.5 client and the Balsamiq code, using a Sprint mobile broadband connection on my MacBook. No sweat installation, other than a nagging “Are you sure you want to install” message – I have a pet peeve about those messages; just install the thing and make it easy for me to take it off later, thanks.
Anyway, in five minutes I was up and running, looking for all the world like a native OS X application. So far, so good…
Usage
After a gentle reminder to enter my registration code (thanks), I was off and running. For you programmers out there, the product basically works just like any visual IDE you’ve used, or like Microsoft Visio – you drag controls onto the page, and move them around by selecting and dragging. The edit keys work as you’d expect, and you can select multiple items and move as a group. I still can’t get over the “Calvin and Hobbes” look to the product, and it actually makes designing pages fun just because of that.
There’s a cool little gradient box that pops up after you drop a control. It’s context-specific to the control you’re using, and lets you change typical format things about the control, like font size, alignment, and the like. Because of this box, the actual menu for the application is deceptively small – I hope this is the way that these interfaces are going: put the tools you need in a floating object right next to where you’re working. I’ve burned a lot of mouse miles going to the top of the window to do stuff like that in my career – it’s a nice touch.
The page I’m designing has tabs on it, with four different tabs for different types of data entry. I dropped a tab control on the page and quickly renamed the tabs from the default. As I was resizing, I got a pixel dimension figure in the middle of the box – another nice touch; right where you can’t miss it. I was hoping to have it work like a real tab control, and change the view of the controls based on what tab is selected. Alas, there doesn’t appear to be an easy way to do that (or any way at all), so I’ll have to put together four mockups for each tab. Regrettable, but no big deal.
Output
A mockup is no real good unless you can share it, so the export facilities are very important. Fortunately, it takes only a few brain cells to get sharable outputs out of Balsamiq. I finished four pages of output – four tabs for my proposed page. It took a grand total of two mouse clicks – Mockup | Export All Snapshots to PNG (on the menu) – to produce four PNG files suitable for uploading to a wiki. Total time – five seconds. Sweet! You also have the option of saving to XML for more sharing opportunities in other tools, but I’m not doing that right now.
Conclusion
It took me about an hour in total time to install the product, draw up four pages, and export them to image files – which is at least twice as fast as I’ve done in the past. The operation of the program is a lot like working in a programming IDE, but you don’t have to worry about constructing a scaffold of code behind it just to see what the pages will look like, as many IDEs require you to do. The “drawing” quality of the output encourages casual conversation about design without getting wrapped up about specific look and feel, which is also an advantage to me – taking away unnecessary items is always good.
All told, I’d give Balsamiq two big thumbs up, two major snaps up, five stars – whatever your favorite rating system…It will be a major part of my future efforts, and I encourage you to consider making it part of yours, too!
