Introduction

Developers and designers often need to create simple layouts of their projects when in the planning phase. This helps to visualize the way the end result may appear, and how related pieces interact. A common way to do this is with paper and pencil. Others may prefer to use computer software instead.

There exist numerous software packages that provide the ability to create wireframes or mockups during a design process. Many of these do not seem like the right tool, as they are complicated and get in the way of what should be a simple process. For initial designs, applications like Photoshop, Illustrator, or Visio turn what should be a simple matter into a complex one. Enter Balsamiq Mockups.

Digging In

Balsamiq is a cross-platform application that runs on Adobe AIR. It was first released over a year ago, and has gained much approval since. The company website is kept current, and has an active blog, which regularly publishes news of updates and new versions.

The beauty of Balsamiq is in its simplicity: it provides a no-nonsense medium to create designs that are quite clearly initial versions, by virtue of the “sketchy” appearance. Items are added to the canvas via drag-and-drop, and can be resized and edited via properties. The software is versatile enough that it can be used for handling websites, applications, and general design. It is intuitive enough that anyone can use it, even non-designers or non-programmers.

Snapping elements into position

Despite the application’s simplistic appearance, it is actually intelligent. For instance, if you already have some items on your canvas, and start dragging one around, Balsamiq will snap the dragged element to horizontal or vertical lines formed by other elements on the canvas. When one element is dragged close to another one, the tool will also offer to position elements with constant spacing in between. This is useful to create layouts with elements that are consistently spaced out and aligned.

Editing element text

Most elements have text content that may be edited; simply double-click the element to focus on the text, then click off the element when done, or press Enter.

Edit element properties

Additional properties of an element may be edited by single-clicking the element, then clicking on the hovering property panel that appears. Clicking off the element hides the panel again.

Initial element library, categoriesInitial element library, categories

Out of the box, Balsamiq comes with a sizeable library of common UI elements, including buttons, frames, scrollbars, dropdown lists, and calendars. They are grouped into categories of various types, such as Buttons, Containers, Layout, and Text. There is also an All category that, predictably, lists all available elements. A sampling of such elements is shown below.

Sample of initial library itemsSample of initial library items

The initial library is good to start with, but additional elements can be downloaded from the Balsamiq community site.

Mockups are saved in files with a .bmml extension. The file is actually a custom XML format, and hence can be edited with a text editor if needed. On top of that, it is source control-friendly. Mockups may also be exported as .png images, which is useful for presenting concept designs to others.

Right now, honestly I can’t bring up any cons to using Balsamiq. Admittedly, I’ve only gotten basic use out of it so far, but I haven’t had any issues with it. Maybe that will change, but right now I’m happy.

Probably the most important value the application provides is that the output has a very sketchy appearance. No one would confuse an image output from Balsamiq with a final design. Closely behind in value is that the person creating the mockup knows it is just that – a mockup. The user does not need to worry themselves with unnecessary details, just the overall layout and content. Finally, because the application is simple, mockups and wireframes can be produced in short order.

Below you can see an exported image of a mockup I was working on recently, for a to-do list application. Despite any apparent complexity, it took me hardly any time to put it together. I’ve done the initial design, so now I can focus on refining it and then building it. There are numerous other sample mockups available for viewing on the website.

Mockup of a to-do application conceptTo-do application mockup

A desktop license goes for $79 – quite a good deal for the functionality the application provides. The desktop version is fully functional; the online version does not allow loading or saving files, although you can export a .png image of your creation.

Conclusion

I’ve provided an overview of the Balsamiq software, a useful tool for quickly creating webpage and application mockups. I showed various features of the application, how to use it, and even showed a mockup I produced.

The software is very useful and enables quick mocking up of screens and applications, producing output that is obviously mockup-quality and still helps to establish concepts and ideas.

To summarize, Balsamiq is an excellent tool for multiple reasons: it’s quick, it’s easy, it’s extensible, and it’s effective.

I am pleased with the functionality of this tool, and expect to get much use out of it.

Disclosure

I will say that I was provided a free license for the software so that I could review it. This has not coloured my review in any way; I believe this software fills a niche, and achieves a useful purpose in increasing productivity in the early stages of a project. In my opinion, Balsamiq is well worth the licensing fee, and will pay for itself in short order.