Monday, January 12th, 2009
Balsamiq Mockups for Desktop
I recently had a need for a tool that would allow me to rapidly prototype a significant number of conceptual ui designs for a ASP.NET MVC project I am working on. My first thought was to use Visio since it has a stencil for nearly everything under the sun. So I fired up Visio and being looking in earnest for stencils with web-style widgets. After about five minutes of prodding, I gave up and decided I needed a better tool for the job.
A few months ago, I recall reading somewhere about a startup that released a product that was purpose-built for creating user-interface mockups. A quick exercise of Google-Fu brought me to the Balsamiq website where I found what I was looking for Balsamiq Mockups for Desktop. This looked promising.
Mockups for Desktop is a bit different from the traditional download and install model that most of us are familiar with. Instead Balsamiq takes a different tack and bills itself as a plugin for multiple Web Office platforms. Supported platforms include Confluence, JIRA and XWiki. The desktop version is the version I used which runs as a standalone app on Windows. Mockups for Desktop underlying technology to bring web applications to the desktop and is available for Windows, Mac and Linux. The only requirement is that you need to install the Adobe AIR runtime which is free from Adobe. In the case of Linux, Adobe AIR is still in beta at the time of this writing, but fear not, Balsamiq has instructions to get you up and running on no time. (As a side note, Balsamiq’s founder was a Senior Software Engineering Lead at Adobe and was responsible for Adobe ConnectNow, a free web conferencing tool.)
After installing and launching Mockups for Desktop, you are presented with an interface similar to this.
Notice that there are three main “frames” of the ui; Application Bar, UI Library and Mockup Canvas. The Application Bar contains the menus of the app, the UI Library contains all of the widgets available for use. Also notice the primitive look and feel of the elements in the UI Library. This is intentional and is what I think really sets this tool apart from other similar tools. The point of rapid prototyping is that one has the freedom to make changes. Realize that you are only creating a high-level look-and-feel, not a formal document that must be rendered at pixel-level exactness. I was immediately comfortable with the idiom and found myself creating several concepts within the first 15 minutes of using the tool and without reading a single word of the extraordinarily well documented online help.
The main functionality of the app is found within the Mockup menu item. The desktop version contains a few extra items since this version enables one to work offline, without being connected to the host platform as the other versions require.
The export format options are especially interesting as they allow one to exchange mockups with others. Something that would be nice here is an option for version control integration or maybe some team-level collaboration. Since the other versions of Mockups for Desktop utilize collaborative platforms already, I imagine that teams using Mockups for this purpose would already have the tools required. Still, primitive integration is better that no integration.
Looking at the Application Bar, notice the search box labeled Quick Add. This is one of the coolest features and allows one to quickly add items from the UI Library to the Mockup.
Simply type a couple of letters in the box for the control you want to add and it’s added to your mockup. For example, typing “bu” will produce a dropdown containing the controls that begin with those letters. I found this to be a feature that I began to depend on once I learned most of the UI control mnemonics.
The UI Library, or UI Controls Library, is the long strip of UI Controls just below the Application Bar. It contains all of the different UI control types that Mockups supports, in alphabetic order. A horizontal slider is provided for convenient and quick access to the controls. I counted 66 available controls. Plenty for nearly any UI I would need to prototype. A sample list of available controls:
To add a new UI control to the canvas, simply select the control type you wish to add, then you can either “drag and drop” it to the mockup canvas below or simply double-click and Balsamiq Mockups will place it on the mockup canvas for you.
The mockup canvas is the main working area and it allows you to move, resize, adjust, tweak…you get the idea. The full list of actions is typical of a graphics program and includes:
- Adding, Selecting, Moving, Resizing, Layering, Deleting and Grouping
To give you an idea of the variety of things that can be done, here’s a couple of screen shots I grabbed from their website.
Mockups for Desktop also has the ability to add over 60 hand-drawn icons to embellish your mockup.
All in all, I found the tool very intuitive to use without help and was quickly able to render several conceptual ideas electronically, print and save them for later. I would estimate that I was able to reduce the cycle time from beginning to end from 8 hours to about 2. That, my friends, is a saving of 75%. Considering the value of my time, $79 is a small price to pay for Mockups for Desktop.
My final thoughts are that I say enough good things about Mockups for Desktop and I feel it fills a much needed void in the world of UI development. If you are looking for a quick way to rapidly prototype UI concepts, do yourself a favor and give Balsamiq Mockups for Desktop a try and I think you’ll be as big a fan as I am.
Take a look at their website. They have some pretty neat ideas and are socially conscious in their pursuits. Balsamiq have published a brief video tour of Mockups for Desktop here. You can also read about the features on their website here.
