Balsamiq Mockups

A few days ago, I drafted a blog entry where I imagined a GUI sketching and mockup tool. I was not aware of any such tool, so I came up with a handful of requirements:

• Be incredibly easy to use
• Allow rapid 2D GUI sketching
• Support “storyboarding” to show transitions and behavior as you move from screen-to-screen

Realism Sucks

Most tools I’ve seen are not geared towards “sketching”. Instead, they let you layout GUI components that look like real GUI components. For example, check out the Pencil screen shots. Other than showing nonsense text, these layouts look too much like real GUI layouts. This is troublesome because extremely realistic mockups don’t leave enough “holes” for the imagination to fill in. (see my mention of Bill Buxton’s podcast near the end of this article)

By showing people something that looks finished, you are not inviting feedback and creative suggestions. Instead you send the message that you’ve already worked out the details and this is what you plan to deliver.

Napkin LAF

The Napkin Look and Feel is a Java Look and Feel that makes your GUIs look like hand-drawn sketches:

While Napkin gives you the right look, it is not a sketching tool. While you certainly can use something like NetBeans to create GUI mockups, I feel that is too technical and limiting for many people, particularly in very early stages of design. IDE GUI builders are designed for programmers to create GUIs, not for super fast brainstorming.

Enter Balsamiq Mockups

Before I posted my blog entry, I wrote some thoughts on Twitter, and quickly received this intriguing response:

@burke_eric Hey maybe you’d be interested in my little lo-fi wireframing app? http://www.balsamiq.com/products/mockups

I checked it out, and Balsamiq Mockups is almost exactly like the tool I had imagined. Here is one of their sample mockups:

First Impressions

I tried out Balsamiq Mockups and found that it is indeed very easy to use. I created this mockup in a few minutes:

Everything works via drag-and-drop, and you can easily resize and edit components in place. Mockups saves its data in a simple XML format, making it easy to share drawings with other programmers. You can also export to PNG as shown above, and it is easy to copy/paste from one drawing to another.

I could rattle off the features, but you’d be better off just checking out the feature tour on their site. This is a very straightforward tool that works exactly as advertised.

• A single user license is $79
• Written in Flash, so is portable to a variety of platforms
• Available as a desktop version (Adobe Air), or as a plugin for Confluence, Twiki, JIRA

My Suggestions

The main thing I did not see was the ability to draw simple lines and arbitrary shapes. Balsamiq gives you an extensive palette of standard GUI components, but I found myself wanting to add arbitrary lines, rectangles, and other simple shapes to my mockups. Mockups does give you horizontal and vertical lines; it is too bad they don’t offer an arbitrary line that I can drag around to any angle and location.

The other feature I found lacking was a storyboarding feature. This was one of the things I originally imagined before I knew about Balsamiq Mockups, and I only have a vague idea of what it would look like. I got the idea after listening to a podcast by Bill Buxton called “Sketching and Experience Design“, on iTunes University. That podcast was also where I learned about using sketches to leave “holes” for the imagination to fill in, as I mentioned earlier.

I’m not exactly sure how this would look and feel, but I do have this general feeling that discrete, static screen mockups are not enough to convey information. I think it is important to capture and show behavior in addition to the static screen layouts.

The story board has to be drop dead simple, allowing artists the ability to drag and drop, annotate with arrows lines and callouts, and rearrange at will.

Paper Prototyping

In many respects, pencil and paper (or a whiteboard) are superior to Balsamiq Mockups. See the Wikipedia Paper Prototyping article for some ideas. In particular, during the very early brainstorming phase, paper and pencil are probably the fastest way to crank out new ideas.

Continuing the Design Process

I think Balsamiq Mockups fits in nicely as “step 2″ in the design process. The screens created in Balsamiq Mockups are easy to share with remote team members, but are not so realistic that they stifle the imagination.

After going through a series of mockups, then perhaps you can move on to more detailed prototypes using a GUI builder like NetBeans along with the Napkin Look and Feel. Again, refer to the Buxton podcast to see how design evolves from sketches to increasingly detailed drawings.

Closing Thoughts

Balsamiq Mockups is a great tool, allowing you to rapidly create GUI mockups that do not look overly realistic. It is basically a domain-specific drawing tool, and it does the job very well. Balsamiq Mockups makes it very easy to collaborate with other developers by utilizing a simple XML file format.

Although I proposed a few ideas (simple lines and polygons, plus storyboarding), tools like Balsamiq Mockups are powerful because they are so simple. I am not actually convinced that adding full storyboarding is necessary; perhaps this is best left to another similarly simple tool.

Posted on Saturday, July 26th, 2008 at 9:58 am in Reviews, Software Development.