Balsamiq Mockups: Pencil and Paper 2.0

There is something visceral and exhilarating about putting a pencil to paper. Questions rush to mind at the first scribble; grand experiments spring from simple gestures; and decisions are made with each doodle. Sketching on paper is especially productive, too, because unlike other mediums, prototyping on paper is cheap. Just crumple up any failure and toss.

Little is more rewarding than drafting. Via trial and error, rumination and insight, a notion becomes tangible. Indeed, the expression of an idea is far more important than the idea itself. Imagine if Da Vinci merely scribbled “Paint portrait of Lisa Gherardini” on his canvas.

Pencil and paper is effective for software development, too. You can capture an object hierarchy in a Unified Modeling Language (UML) diagram; you can picture a database schema in an Entity Relationship Diagram (ERD); and you can imagine everything from a Web page, to a graphical user interface (GUI) with a wireframe. Armed with even a rudimentary sketch, you can debate pros and cons and ask “What if?” A mockup can also guide your choice of technology, and if you work with others, a replica can communicate your vision, engage your coworkers’ imaginations, and provide a roadmap for collaboration.

You Can’t Diff Crayon

However, there are limits to physical media. Revision isn’t particularly pleasant, differences from one iteration to the next aren’t easy to track, and, in the case of software, moving from graphite on tree pulp to working prototype quickly and easily is difficult. Hence, developers and designers turn to software packages, both formal and ad hoc, to mockup ideas.

Adobe Photoshop is the tool of choice for many designers. Its image editing tools are unequaled, and in recent releases, Photoshop has added features to automatically convert drawing layers to HTML and image assets, which speeds the creation of Web pages. Adobe Dreamweaver is another preferred tool; it’s specifically designed for Web pages and its recent incarnations sport support for PHP, JavaScript, and other computer languages commonly embedded within Web page markup.

Developers turn to any number of tools. On Windows, Visio provides tools to create and export ERD and UML diagrams. On the Mac, the Omni Group’s OmniGraffle is a superior— and my longtime favorite—tool for drawing all sorts of diagrams. First- and third-party add-on palettes extend OmniGraffle to include information architecture symbols, Web form fields, and Cocoa, Windows, and iPhone interface elements.

Typically, I reach for OmniGraffle to rough out architecture diagrams and user interfaces. OmniGraffle wasn’t designed specifically for those purposes, but because the software is so easy to use and because it produces stellar results, I find it a capable surrogate.

Recently, though, I’ve been putting another tool through its paces. Aptly named Mockups and distributed as an Adobe AIR application for Windows, Mac, and Linux by Balsamiq, the software’s sole purpose is to prototype desktop and Web applications. Overall, I am very impressed with Mockups. It performs well, is clever in many ways, and produces great results.

Mockups: GUI Goodness

The sketch below, which resembles Apple’s iTunes, was created entirely in Mockups. The hand-drawn look is intentional, based upon the templates included with the software.

A mockup of iTunes made in Mockups.

At its core, Mockups is a drawing application. Each Mockups drawing, or mockup, begins as a blank canvas. To draw, you select a template interface object from the application’s diverse palette, drag-and-drop the template into position on the canvas, and then customize its attributes.

Some attributes are obvious, such as the color and typeface of an element. Other attributes are unique to interface elements. For example, you can enable the scrollbar in a list element or set the title of a window. You need not position a decoration separately, as you might do if you were working in Photoshop. Instead, just enter the attribute value you want and Mockups redraws the element accordingly.

Moreover, some attributes are interpreted, which allows you to achieve complex layouts with little effort. For example, if you drag-and-drop a Button Bar onto the canvas, the default template renders three buttons labeled One, Two, and Three, respectively. To change the button bar to show four buttons with labels A, B, C, and D, double-click on the button bar and change the content attribute from the string One,Two,Three to string A,B,C,D, as shown.

Three buttons in a bar.

Four buttons in a bar.

This “dynamic” interpretation makes revisions easy. You need not copy-and-paste a shape to add a new button or repeatedly edit a layer of text to change a group of labels. This powerful feature may seem overkill for a small set of buttons, but is invaluable in a complex interface element, such as a tree view.

If you drag and drop a Tree Pane onto the canvas, double-click to access its content, and paste the text…

f Documents
f Music
F Movies
 f Family
 F The Marx Brothers
  - Night at the Opera
  - Coconuts
  - The Big Store
 f Batman

… you get this mockup:

The contents of the tree pane are generated for you.

The Tree Pane interprets a small set of characters and replaces each character with an icon (including white space to achieve the hierarchical layout). Coding what you want to see is so much easier than manually drawing the equivalent tree view.

Tons of Templates

In total, Mockups provides nearly seventy stock templates organized into ten groups, such as Text, Layout, and Buttons. Like the Tree Pane, many of the elements interpret content and render a corresponding result. For example, you can construct a complex menu also using codes.

Code for a complex menu.

Here, two menus are pictured; the one at right is expanded to reveal the text code required to produce the menu at left.

Virtually every desktop and Web interface object you can think of is included: a tag cloud with editable tags and simulated relevance; a table/grid capable of display real data; a street map; and a formatting toolbar. The product also includes templates for charts, although you cannot customize the data points. Mockups also includes a number of elements specific to Apple’s iPhone, if you are developing for that platform.

In addition to the templates included in the shipping product, the website http://www.mockupstogo.net/ offers additional elements. For instance, you can download a set of elements based on Twitter and a collection of elements to mockup pagination options. The latter set is pictured.

Extra elements for pagination.

A template set, such as the one shown, is distributed as a BMML file, or a Balsamiq Mockups Markup Language file. BMML facilitates sharing. If you create an interface and want to distribute it, simply choose Mockup > Export Mockup… and save the BMML to a file. You can also import a BMML, which allows you to reuse something you’ve designed over and over again in other mockups.

Mockups also exports its canvas as a PNG image, so you can include it in specifications or post it online.