Balsamiq Mockups 3 Application Overview

Balsamiq Mockups is a user interface design tool for creating wireframes (also called mockups or low-fidelity prototypes). You can use it to generate digital sketches of your product ideas to facilitate discussion and understanding before any code is written.

Each Balsamiq Mockups file (with a .bmpr file extension) represents one project and can contain many mockups and images, which are stored together in a single .bmpr file. Mockups for different projects should be created in separate Balsamiq Mockups files. To create a new project select Project > New Project from the menu.

Mockup actions (rename, etc.) and navigate between mockups (shown when left panel is hidden)

Go to next or previous mockup (shown when left panel is hidden)

The group of icons in the center of the toolbar is for commonly-performed canvas functions. These are actions that you are probably used to from text editors or other drawing tools, such as copy, paste, group, align and zoom. The last icon is for toggling markup (read about markup here).

The top of the toolbar shows the name of the project, which you can double-click to rename (or go to Project > Rename Project... in the menu).

The Quick Add Tool

The Quick Add tool is the fastest way to add UI controls to your mockup. To use quick add, click inside the quick add input box (or use the / or + keyboard shortcut to enter it). Type a few letters from the name of a UI control or icon and Quick Add will show you a list of suggestions. Use your mouse or arrow keys to scroll down the list and click or press Enter to add the control or icon on the mockup canvas. You can also use Shift + Enter to place the control where your mouse cursor is on the canvas.

For example, typing "bu" shows a list containing "Button", "Button Bar", "Help Button", "Radio Button" and "Round Button". Typing "hel", on the other hand, only returns "Help Button". Pressing the ESCape key makes the list disappear, as one would expect.

Try out Quick Add now! As you become familiar with it, you could even hide the UI Library and simply use Quick Add to add UI elements to your mockup. This maximizes both your mockup canvas area and your speed!

The UI Library

The UI Library, or UI controls Library, is the long strip of UI controls just below the toolbar. It lists all of the UI control types that come with Mockups as well as Assets, Icons, and Symbols. The main goal of the UI Library is to let you add UI controls to the mockup canvas, but you can also use it to see what's possible and to get inspiration for your UI mockup.

To add a new UI control to the canvas, select the control type you wish to add then either drag it to the mockup canvas below or simply double-click and Balsamiq Mockups will place it on the mockup canvas for you.

The UI Library can be toggled on and off in several ways: clicking the icon to the right of the Quick Add box, using the keyboard shortcut CTRL/CMD+L, or by selecting View > UI Library from the application menu.

The Mockup Canvas

This is the main working area of Balsamiq Mockups, where your UI mockup comes to life. Once you add UI controls to it, you can move them, resize them and tweak them to your heart's content until your UI mockup is ready. See Working with UI Controls to learn more.

The mockup canvas grows and shrinks with your application window, so you can make room for bigger mockups if you need to.

The maximum size for each wireframe canvas in Balsamiq Mockups 3 is 4056x4056 pixels. If your wireframe bumps against the maximum canvas size, you could try using a breakline to indicate continuation. This is something that designers often do in wireframe specs. Mockups supports breaklines in the Browser, Rectangle, Geometric Shape and Horizontal Rule controls.

The Navigator Panel

The navigator panel on the left shows the list of mockups, assets or Symbols in your project. The currently selected object is highlighted. You can select multiple objects in the navigator panel by holding down the Control or Shift key and clicking on them. Mockups and assets can be viewed as a text-only list or as thumbnail previews.

You can hide the navigator panel by clicking the navigator toggle icon above the panel (keyboard shortcut: CTRL/CMD + J). Hiding it will show additional icons in the toolbar (shown above) for navigating between mockups or assets (depending on which one is selected). The panel can be resized by placing your mouse cursor over the line separating the navigator panel from the canvas and dragging left or right. You can double-click on the separator line to reset it to the default width.

You can move between mockups or assets using your keyboard via CTRL+Tab or by clicking on one in the navigator and using the up and down arrow keys.

Mockups can be reordered by dragging them up and down in the navigator panel. This can be useful when exporting to PDF, for example. The order of your mockups will be remembered when you close and reopen your project, even if opened on a different computer.

Using Mockup Hierarchy

To use it, select the mockup you wish to be the child and press the Tab key. The child mockup will be placed in a tree hierarchy below the mockup above it.

You can then use the arrows to the left of the parent mockup to show and hide the mockups under it.

To restore it to the top level, use Shift+Tab. The video below shows nesting mockups in action.

Context Menu Actions

A context menu is also available for the objects that are open in the navigator panel. You can either right-click on the selected object or click the small arrow that appears when you hover over it to open the menu.

The contents of this menu vary depending on which type of object is selected (mockup, asset, symbol, or trash) but it generally contains options such as rename, move to trash, and duplicate. In the Mockups view it also contains actions for working with alternates.

Renaming Mockups

Renaming mockups can be done via the context menu or by double-clicking on the name of the mockup in the navigator panel. Mockups with links will automatically be updated when a linked mockup name changes.

The Properties Panel

The panel on the right side of the application (when shown) displays properties for the selected control or object. Depending on which icon is selected it shows either the Property Inspector or Project Info Panel. It can be hidden by de-selecting both panel icons in the toolbar or unchecking Inspector and Project Information in the View menu.

Thumbnail Grid View

Clicking the icon to the right of the navigator panel toggle will switch to thumbnail grid view, shown here.

This view shows thumbnails of all of your mockups and is useful for getting an overview of your project. It allows you to see more of your mockups at once and is a good view to use for reordering and tidying up (e.g., renaming and moving to the trash). You can trash multiple mockups at once by selecting them (using CTRL/Shift + click) and bringing up the context menu.

Thumbnail grid view is available when viewing mockups and assets, and is the only view available for trash.

Trash

Balsamiq Mockups 3 has a trash for mockups, assets, and Symbols you have deleted. This makes it easy to keep your project tidy as you make progress but still allows you to browse or recover earlier concepts.

To recover a trashed object from the Trash panel click the context menu arrow and select "Restore." You also have the option to delete permanently.

Working on Small Screens

When working on a small laptop screen, you might want to maximize the amount of Canvas you see.

These panels are highlighted below along with the icons that can be used to toggle them on or off.

The keyboard shortcuts for toggling them are listed here:

UI Library: CTRL+L

Navigator: CTRL+J

Properties Panel: CTRL+;

Project Info Panel: CTRL+,

Hiding all of the panels results in a user interface that looks like this:

The associated toolbar icons turn from blue to white when the panels are not shown.

Note that you can still add controls to the canvas when the UI Library is hidden using Quick Add. And you can navigate between your mockups using the additional toolbar icons that appear when the Navigator Panel is hidden.