LeeDumond.com

A true balsamic vinegar – the traditional, top-shelf, aged for 12 years stuff – is highly prized by foodies all over the world. Balsamiq Mockups, while it doesn’t taste nearly as good on salad, is quickly becoming just as invaluable to developers, designers, PMs, and anyone else involved in the creation of software. Here’s why.

---

Balsamiq Mockups is the flagship product from startup ISV Balsamiq Studios. The desktop version (which I’m reviewing here) runs on any platform supported by Adobe Air, including Windows, Mac, and Linux (yes, finally, an Adobe Air application that’s not a Twitter client – go figure). There are also plug-in versions available that integrate with popular wiki and bug-tracking tools such as Confluence, JIRA, XWiki, and FogBugz. A online, subscription-based version is reportedly in the works as well.

What’s the Problem?

This is the point where most reviewers would drag out the elaborate dog-and-pony show, but I’d prefer not to waste time better spent abusing evaluating the demo on your own. Rather than delve too deeply into all the little tricks Balsamiq can do, let’s consider for a moment the problem it is intended to solve.

Pretend if you will you’re a software developer (if you’re reading this, that shouldn’t be too much of a stretch, right?) and you’re meeting with a few client reps to toss around some early prototype ideas for an application. You (or someone from your design team) have labored long and hard to put together a few slick-looking layouts, hoping to impress.

You hook your laptop to the conference room projector, fire it up, hit F12, and…

Sound familiar?

As far as you’re concerned, the UI is just another piece of the software construction puzzle. But oftentimes, to the people who are signing the checks, the UI is the software. It is the piece of that puzzle they have the firmest grasp on, and thus is the aspect of the project over which they will want to exercise the most control. And because so much of the client’s focus is on the UI, a finished-looking front-end can easily give the impression that your mockup has actual code behind it, and is “practically done.”

The beauty of Balsamiq Mockups is that it’s a “wireframing” tool that intentionally uses hand-drawn UI elements. It’s quick-and-dirty, rough, and definitely lo-fi, and with good reason.

 

These mockups make it abundantly clear at which point you are in the development process. Nobody gets too hung up on pretty (or not so pretty) colors, shapes, or sizes, which lets stakeholders focus on functionality rather than looks. And the first-draft, “we just threw this together quickly” vibe encourages feedback – people will feel freer to offer criticism at this point, where they might be more reluctant to do so with something that looks like someone slaved over it for days. What’s more, you haven’t written a single line of code, or wasted a single minute of developer productivity creating fancy prototypes that will eventually find themselves consigned to the dustbin.

On many past projects, I’ve tried to create the same effect with pencil and paper. Unfortunately, I happen to be so artistically challenged that drawing even straight lines is tough for me, which means I end up going through a lot more erasers than pencils. Using Balsamiq feels like drawing. Balsamiq is just as fast as drawing (for me, it’s actually much faster). But since it’s digital, you can tweak, rearrange, and erase to your heart’s content.

While Balsamiq Mockups is a great tool for getting a lot of ideas down on “paper” quickly and cheaply, it really shines as a collaborative tool. Because the program is so responsive and simple to use, you can work on designs right in front of the client in real time. Can you make that button bigger? Done. Move that column? Done. How would the menu look on the left side instead of the top? There you go. It’s child’s-play-easy to iterate over a design in the course of a meeting, where PMs, designers, developers – and yes, even clients – can all throw in their two cents. Mockups can be exported as PNG images and shared or emailed, or coupled with online file-sharing tools for remote collaboration scenarios.

Besides the 75 ready-to-use controls that come with the application…

…you can create and add your own images – everything from custom controls specific to your project, to image-based backgrounds, entire layouts, and even screenshots of existing applications.

A Nit Or Two

You may be asking “can I export mockups to HTML, MXML, XAML, Ruby, etc.?” The answer is no… and yes. The program doesn’t offer native export capabilities to any other format than PNG. However, it cleverly leverages an open, well-documented file format (a variant of XML they’ve dubbed BMML) that lets third-parties (or even you, if you’re feeling froggy) provide such features. One such example is Napkee, which lets you turn your wireframes into fully-functioning HTML/CSS or Adobe Flex prototypes. Obviously, these third parties have employees who like to eat and have become accustomed to sleeping indoors, so these extensions will cost you a bit of extra scratch if you need them.

For the time being at least, users cannot add elements directly to the UI library, although the image import feature will suffice in most cases. Balsamiq includes a “sketch-ize” command that can wireframe imported images, imparting on them the same look and feel as the rest of the application.

Also, there’s no “Mockups Viewer” application which would allow the sharing of sets of linked prototypes with stakeholders who don’t have Mockups installed. This does inhibit collaboration to some degree; though once Balsamiq get the Mockups web version up and running, this should become a non-issue. No pricing for the web version has yet been announced, though I’ve heard rumors that peg it in the $12-or-so per month range (again, just rumors – please don’t hold them to it just because I said so).

One more thing – as you might have been able to tell from the screenshots above, Balsamiq makes heavy use of the Comic Sans font on Windows and Linux (Mercifully, Mac users get the Chalkboard font on OSX). I probably don’t have to tell you how much some people hate Comic Sans. Fortunately, the desktop version lets you swap out Comic Sans MS for any font on your system. If you do this, you’ll want to check out some hand-drawn alternatives, as not to lose Balsamiq’s low-fidelity GUI goodness.

Summary

If you’re still reading this, I have to ask: why? Check out the quick 3 minute introduction video, try the interactive Flash demo, download and install the demo version, or dispense with the formalities and just buy the damn thing for only $79 – that’s coffee money compared to what we spend on other tools that aren’t nearly as useful as this one. And while you’re at it, check out MockupsToGo, a user-contributed collection of UI components from which you can download additional controls or share those you’ve created.

I don’t review or endorse very many tools on this blog, but Balsamiq Mockups has become a must-have application in my development process, and one I feel confident in recommending. It’s a fantastic product from a great little company, that addresses a significant issue that almost all development and design teams have, and solves it beautifully. When it comes to developer tools, you can’t ask for much more than that.

Subscribe to this blog for more cool content like this!

Bookmark / Share