Review: Balsamiq Mockups

24 03 2009

Balsamiq Logo

Overview

Balsamiq Mockups is a cross-platform (Windows, OS X, Linux) application that is great at creating quick and dirty, back of the napkin style (in a very good way) user interface wireframes.


Example Mock-Up

The mockups created by the application are essentially electronic sketches composed of both pre-built and user constructed user interface components.

Installation

The application is capable of running as a browser based application or a standalone desktop application.

The desktop application requires the Adobe Air runtime. Since I already had installed the Air runtime on the two platforms that I tested Balsamiq Mockups (Windows XP and Mac OS X), installation simply consisted of downloading the “MockupsForDesktop.air” file and double-clicking on the downloaded file (in my case version 1.5.33) to start the installation.

Features

Before running the application for the first time I quickly perused the available online help. The online help does a good job of covering the features and functions of the tool and because it is presented in a single web page it is easy to search and print if necessary .

Within 10 minutes of using Balsamiq I felt like I’d gotten the hang of the application and had produced my first complete mockup.

If you’ve used almost any kind of a drawing tool the features of Balsalmiq will be familiar and work as expected (e.g. guides, snap to grid, grouping elements, auto-alignment options, locking regions and layering).

The pre-installed library of UI components covers a range of common scenarios. Also there are more components that the Balsamiq community has developed available for download at www.mockupstogo.net. One suggestion I have for anyone trying the application is to use the “Quick Add” feature, once discovered, I found that I used is almost exclusively to locate the components that I wanted to add to my mockup.

One interesting and positive characteristic of the mockup files themselves is that they are straightforward XML files. This opens up the oppportunity to translate the mockups into other formats.

Example Mockup XML:

<mockup version="1.0" skin="sketch" measuredW="631" measuredH="585">
  <controls>
    <control controlID="0" controlTypeID="com.balsamiq.mockups::BrowserWindow" x="43" y="18" w="588" h="567" measuredW="450" measuredH="400" zOrder="0" locked="false" isInGroup="-1">
      <controlProperties>
        <text>A%20Web%20Page%0Ahttp%3A//</text>
      </controlProperties>
    </control>
    <control controlID="1" controlTypeID="com.balsamiq.mockups::TabBar" x="66" y="105" w="550" h="392" measuredW="256" measuredH="100" zOrder="1" locked="false" isInGroup="-1">
      <controlProperties>
        <text>One%2C%20Two%2C%20Three%2C%20Four</text>
      </controlProperties>
    </control>
    <control controlID="2" controlTypeID="com.balsamiq.mockups::VideoPlayer" x="119" y="172" w="458" h="204" measuredW="300" measuredH="200" zOrder="2" locked="false" isInGroup="-1"/>
  </controls>
</mockup>

Mockups can also be exported into nice looking PNG files for inclusion into the document of your choice.

One item that would be a good addition to the product would be to add the concept of a master template where a master template would include all of the design elements that are repeated between screens (or pages). An ability to define a master template for a mockup would greatly simplify changes across a related set of mockups. Another welcome addition would be some way to organize a set related mockups together. Perhaps this could be accomplished by defining a set of container elements in the mockup XML files.

The application also has support for functioning as a Jira plugin. At work we are moving to Jira so perhaps I’ll have the opportunity to test that aspect of the product next.

Conclusion

The application is an easy to learn and easy to use tool to create user interface “sketches” that convey the essential aspects of a design without the inclusion of unnecessary detail. This is a tool that is effective for hashing out the form and function of an interface without obsessing about the look and feel.

For large scale user interface prototyping the lack of a master template is potentially limiting. Because of the usefulness this kind of a feature I wouldn’t be surprised to find out that this feature is on the radar for a future release.

The bottom line is that I’m looking forward to using this tool on future projects.








Follow

Get every new post delivered to your Inbox.