How to use Balsamiq Mockups

Balsamiq Mockups is an application that allows to arrange pre-built widgets using a drag-and-drop WYSIWYG editor. It is used to create drafts for the discussion of preliminary solutions in the user-centered development. We introduce the tool and give some advices for best practice.

Introduction

One of the most important aspects in user-centered development is the iterative discussion of preliminary solutions and the refinement of UI proposals. Often such a layout, mock-up or wireframe is created with graphic tools that suffer from some limitations like lack of flexibility or shareability.

Balsamiq Mockups is a tool to support rapid designing. On a scale between drawings with paper and pencil and a fully working prototype Balsamiq’s position is clearly on the simple side, bringing powerful predefined widgets and an easy-to-use interface.

Installation

The program is available for Windows, Mac OS X, and Linux (32/64bit debian packages, or via AUR repository for Arch based distributions). Since it’s based on Adobe Integrated Runtime (AIR) framework it can be run as plug-in for Google Drive, Atlassian Confluence and Jira. Prices are affordable, and there is a 7 days fully functional trial available, as well as a demo with the most relevant features.

Usage

The program is really simple to use: just drag ’n drop items from the upper panel (UI library) to the content, and set a caption if needed. The UI library is organized in tabs that either show ‚All‘ available controls, or just a limited set, like ‚Big‘ elements. While the content of the tabs is sometimes a little surprising, the ‚Quick Add‘ helps out. Just enter the first letters of the name of the control, like ‚la‘ for label, and select the right one from the drop-down.

Balsamiq Mockups

Figure 1: Balsamiq Mockups

You have a couple of options to align controls. Select the placed controls you want to align (mark them with the left mouse button and use ctrl for multi-selection), and use one of the offered alignment options (ctrl+alt 1..6 work as short-cuts).

Items have a z-order. That means those you place later are in front of others. You can change the z-order with the ‚layering‘ feature.

A full undo/redo function is implemented. Press ctrl+z to undo the last operation and ctrl+y to redo it.

Interactions are not on the main focus of Balsamiq Mockups. So even a drop-down does not open on click. If you need to fake this interaction you have to create two pages, one with the closed and one with the open drop-down, and assign links to the respective pages. Still then users will not be able to select a certain option in the drop-down. This is about the limit interaction with Balsamiq Mockups goes.

Unfortunately you cannot create multiple mockups with the demo version.

Best practice

Often the layout contains several controls, and if you want to add another panel, or change the alignment, grouping is advisable. Select all items that belong together, and click group in the editing area (or ctrl+G).

Bulk actions, for instance changing a font, are possible if you select controls of a similar type. For example, label and text inputs have the option to change the text but not an icon. So if you carefully select all of the controls you want to change you may adjust settings at once.

Sometimes you need the best of two worlds, like alternating item color from lists and a tree navigation. Here comes the transparency features into the play. Place one control above the other, e.g. the treeview over the list, and change it’s transparency to zero. This feature is, for instance, useful to create a light-/darkbox to hide  controls in the background that are not accessible due to an active modal dialog.

Tree view with list in background containing alternating row color, and a shape in foreground, both with transparency set.

Figure 2: Tree view with list containing alternating row color in background, and a shape in foreground, both with transparency set.

Tips and tricks

Balsamiq Mockups is a tool for rapid prototyping. It does not release you from balancing between sketchiness, i.e. reduction to the most important facts of your design, and meticulousness, i.e. being close to the final design. You need a minimum on realism to involve others to your idea, but with too much details the discussion often goes in a wrong way.

Consider to share your mockups, not only the exported graphic. The demo offers an export/import from clipboard (ctrl+E or menu). The content is the same as in the stored files with bmml extension. A good advice is to make those mockups that are intended for sharing as simple as possible. If you heavily group controls you result in a draft that is hard to change – especially for people that don’t know where to start with deconstruction.

Exported Balsamiq Mockups XML.

Figure 3: Exported Balsamiq Mockups XML.

Alternatives

The big advantage of Balsamiq Mockups is the perfect balance between ease of use and presentation options. And its free for open source projects! If you want to use an open source tool, you should take Pencil into consideration. If you have to care about interaction our preferred tool is Axure. For collaborative tasks Pidoco can be a good solution.

Interested in learning more?

We will try to find answers to your questions. For instance, we held recently a training in Balsamiq Mockups for our customer Swisslab.