Balsamiq Mockups: Pencil and Paper 2.0

A new tool, Mockups, models graphical user interfaces and Web applications. Here’s a hands-on review.

Other Thoughtful Features

Like other drawing applications, you can also group objects, layer objects, and lock objects into place. There are no operations for alignment; however, the Mockups canvas automatically draws a vertical or horizontal guideline whenever one object aligns with another, which helps maintain a pleasing grid.

There are other thoughtful features, too. Every element can be resized using one of eight handles and the interface reveals the size of an element in pixels whenever you click on a handle. If you are trying to adhere to a specific grid, such as the one defined by YUI Grids or Blueprint, the precision is useful.

Oddly, the (x, y) location of the object isn’t shown when you drag the object. However, both the current size and position is shown in the object attribute palette whenever you release the mouse. Each template has its own kind of palette; for instance, here is the palette for the Table/Grid template.

The attributes palette for a Table/Grid.
The attributes palette for a Table/Grid.

If you look to the right of the layering controls, you should see the size and position of the table within the canvas (assuming the top left corner is the origin).

Of course, you can also link one mockup to another. Buttons and other clickable elements can be customized to link from the current mockup to a mockup in another file. Links become active in full-screen presentation mode, but links are the only element that are live during preview. You cannot enter data in a form or scroll up and down with a scrollbar.

Finally, many of the templates provided can be customized with text content and/or an icon. If a template supports an icon, Mockups provides a large palette of meaningful icons to choose from. You can also set the icon size. For instance, Mockups provides an Icon and Text Label template. To customize it, you choose an icon and set the text label.

The attributes palette for a Icon and Text Label element.
The attributes palette for a Icon and Text Label element.

If you click Icon Search, the catalog of icons appears.

The icon palette.
The icon palette.

But Not All Perfect

Mockups does have its detractors. While you can have more than one mockup open at a time (a prerequisite to link mockups together), the application lacks true independent layers within a single mockup to organize work. For instance, I could imagine establishing one layer for each column of a three-column layout and perhaps a separate layer for the header and footer, too.

The graph paper intended to serve as a grid for the canvas can be hidden, but cannot be resized for more or less granularity. And oddly, the palette of available templates is a long horizontal scrolling list, which makes it somewhat laborious to find the element you want. Again, the templates can be browsed by category, which narrows the search, but is unlike most modern drawing applications where the palette is configurable and detachable. I suspect the application was designed in a monolithic window so it can run unmodified as a Flash application in the browser.

A Thumbs Up

All in all, Mockups is a welcome addition to the toolbox. Development teams are likely to find it useful for prototyping and for communicating expectations and requirements. Designers should find its streamlined interface refreshing. Its singular purpose is a welcome change from the omnipotent Adobe applications. Developers should also find utility in Mockups. A little bit of drawing is faster than coding and much easier to revise.

Mockups for the Desktop costs $79. For comparison, OmniGraffle Professional is $199. You can try Mockups for free online. Give it a whirl. And happy tinkering.

Fatal error: Call to undefined function aa_author_bios() in /opt/apache/dms/b2b/ on line 62