My musings about .NET and what not

Balsamiq – It’s Not Just For Salad Anymore

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…

Developer (you): Here’s an initial idea of what we thought should be included on the home page…

Client1: Oooh – what shade of green is that? I don’t like that green background at all. Who said we were going with green?

Developer: We don’t have to go with green. Keep in mind, this is just a sample. The important thing is to focus on the elements in general at this point.

Client2: Our old site had small, boring-looking buttons. I like that you’re using image buttons, but those are still much too small.

Developer: Bigger image buttons. Got it.

Client2: Can we see what a larger image button would look like there at the bottom?

Developer: Well, not right this minute. We don’t have any larger images prepared, but I’ll make a note of that for the next meeting.

Client1: What color are the image buttons going to be? They can’t be red, especially with that green background.

Developer: As I said before, the colors aren’t really that important for the time being. We’re just trying to get an idea of…

Client3: Speaking for myself, I’d say this is right on the mark. Looks pretty much finished to me. Maybe a couple of small tweaks here and there. Do you think we can go live with this by the end of the week?

Developer: No no no, this isn’t even close to being done. I know it may look complete, but…

Client1: Sorry. I’m trying to focus here, but I just can’t get past that green background. Can we tone it down a bit? Maybe a drab olive would be nice.

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.


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!

kick it on

shout it on

vote it on

Bookmark / Share

    » Similar Posts

    1. Open Source or Die – The *Real* Future of Graffiti?
    2. It’s a Self, Self, Self Serve World
    3. Presenter, Tape Thyself

    » Trackbacks & Pingbacks

    1. Thank you for submitting this cool story - Trackback from DotNetShoutout

      Balsamiq – It’s Not Just For Salad Anymore — September 4, 2009 4:32 PM
    2. Pingback from Balsamiq ????lg??nl?????? | Bulutlararas??

      Balsamiq ????lg??nl?????? | Bulutlararas?? — September 8, 2009 6:21 PM
    3. DotNetBurner - burning hot .net content

      Balsamiq – It’s Not Just For Salad Anymore — September 24, 2009 5:44 PM
    Trackback link for this post:

    » Comments

    1. Anthony avatar

      Hi Lee,

      How would you compare this with SketchFlow that comes with Expression? Reason I ask is because I'm not sure if that tool is relevant outside of SilverLight?

      Anthony :-)

      Anthony — September 4, 2009 4:40 PM
    2. Lee Dumond avatar

      Anthony -- I have Blend 3 and have tried SketchFlow. It's great, but it's limited to WPF/Silverlight applications. However, being XAML-based makes it much more powerful (and of course more complex) in terms of working with those kinds of apps -- you can map flow and navigation, track UI state, add behaviors, bind to real data, etc. For WPF/Silverlight I'd be much more inclined to go with SF, but I work on web apps mostly, and Balsamiq is really nice for that.

      Lee Dumond — September 4, 2009 4:57 PM
    3. Anthony avatar

      Thanks for the feedback Lee, gonna try this out today :-)

      +1 on DotNetKicks!

      Anthony — September 6, 2009 11:27 AM
    4. Efraim avatar

      Wow, great post!

      I love the role-play... sooo true!

      I'm a fanatic Balsamiq user, but when it comes to meeting with clients I have them use a GuiBoard(.com) and MockupMagnets(.com) first. It's a fun way to 'force' them into sketch-mode before we show our Balsamiq Mockups.

      There's something about whiteboards and sketching that just no software can replace ;-)


      Efraim — September 8, 2009 7:16 AM
    5. Cbrcoder avatar

      I tried working with it. But didn't like it mainly because, I need to create new files for each mockup! How can I create a mockup for whole application and connect different views together ? This is almost non-useful for me, if I have to create new files for each page and then instruct user to open "x" file or "y" file for a particular page.

      I agree with Efraim, Pen/Pencil is a way to go, but only problem is sharing it remotely :(

      Cbrcoder — November 27, 2009 1:06 AM
    6. Matt Ranlett avatar

      Cbrcoder must not have looked at the easy to use Link functionality which as ben available in the last several Balsamiq desktop versions. Basically this lets you create hyperlinks in your mockup which when viewed in presentation mode (full screen) let you click on buttons. I've been able to quickly and easily construct dynamic website models this way using over a dozen cross-linked mockups. Super easy!

      Matt Ranlett — December 9, 2009 12:38 PM

    » Leave a Comment