Review: Balsamiq Mockups

Building great software is a tricky business.  Not only has the idea got to be good, the implementation of that idea must also deliver.  People are no longer satisfied with ordinary, basic-looking websites and applications; they’ve come to expect more – a bit of magic, if you will – and the company whose product fails to deliver some magic to those users is likely to have a much harder job succeeding.

That’s not all, though: not only are people expecting more, they’re also far less willing to put up with anything which doesn’t quite measure up, anything which requires too much effort to use.  The sheer vastness of choice out there on t’interweb, combined with the increasing competition for limited attention means that the modern software designer must really make his software stand out in a good way.  As Seth Godin puts it, it must be remarkable.

So, more than ever before, there is considerable pressure to ensure that designs are right from the off.  No longer can we, as software people, get away with poor usability or inconsistent functionality.  If we try, our customers will move on to our competitors’ offerings, and we will fail.

In recent times there has been an explosion of powerful and relatively affordable tools and utilities to help us get our designs right before launch.  Balsamiq Mockups is one such tool.

Balsamiq wants to stake its claim on the part of design which would traditionally be performed using paper wireframes or sketches.  It doesn’t aim to facilitate rich prototypes, and indeed takes a bold choice to avoid offering simulations of the ‘look and feel’ of modern operating systems or browsers.

Balsamiq Mockups - something I created in less than 3 minutes

I’ve written before about the dangers of creating high-fidelity, rich prototypes with close approximations to ‘real life’ – that is, the dangers inherent in getting caught up in a vicious cycle of nit-picking over element positioning, colour schemes and specific behaviours.  It’s not that these things don’t have a place, it’s just that it’s often difficult to educate our business stakeholders and users as to what is and isn’t important.  After all, if you commissioned an architect to design your dream home, she would give you a funny look if you started obsessing over the texture of the wallpaper before you’d decided on the number of rooms.  And so it is, and must be with software design.  Sketch the outlines early, get them right, and add the specific details – the eyebrows if you will – until later.

Balsamiq is a drag and drop-based tool which is available for PC, Mac and Linux machines running the Adobe AIR system.  This means that it is a truly cross-platform application, albeit swaddled in the AIR plug-in.  This raises one small stumbling block for anyone running in a large corporate environment – you know the type, where each machine is locked down tighter than Fort Knox.  In such environments, it’s common that Flash is unavailable or restricted to an archaic version, and AIR support is extremely unlikely unless you’re the system administrator and willing to install it in secret…

There really isn’t much to say about the use of Balsamiq that can’t be figured out in a matter of a few minutes of trying things out.  A panel contains a selection of screen elements, rendered in a sketch-like style, which can be dragged onto a larger pane which represents the prototype or mockup.  These elements can be resized or customised to suit, and once you’re happy with your arrangement, multiple elements can be ‘grouped’, or locked in place relative to each other.

You can easily annotate your mockups

Of course, as mentioned above, the point of Balsamiq is to allow the user to create low-fidelity wireframe mockups very quickly, so as to sketch out basic layouts and conceptual designs so that they can be discussed, improved or rejected.  One notable feature which I particularly liked was the presenter view, which allows a mockup to be viewed full screen, complete with a rather nifty pointer which makes it a breeze to highlight particular bits of the design when discussing it.  It’s also great fun to use, and that’s always a plus point!

Rather than try to explain the process, I thought a very quick (and not very exciting, I admit) screencast might be worthwhile:

At this point, I have to add that in modern software development, teams are often co-located in different places and this is one place where Balsamiq shows great promise but also could go further: collaborative design.  I’d like to see a version which perhaps incorporates cloud hosting, version control and perhaps rudimentary task management (so as to have a number of people collaborating on a variety of mockups).  This would certainly suit larger projects, in which a number of different parts of a system are to be prototyped.  From experience, without some structure to organise who is doing what and at what stage, it can quickly descend into a kind of chaotic mess.  So, that’s one area where Balsamiq could find a niche into the enterprise.  Update: a cloud-based version, Balsamiq Mockups Online, is planned for release this summer – get the low-down here.

For the smaller project Balsamiq is ideal for helping structure ideas into something a little less scrappy and a bit more useful.  Depending on the nature of the project, Balsamiq can be used to create the initial design which (if required) can then be ported into a more fully-featured interactive prototyping tool such as Axure RP Pro, or simply used as the blueprint for the development phase to work from.

I would say that Balsamiq is a real success because it doesn’t attempt to let you model interaction or use-cases.  By limiting the feature set to wireframe design, it allows the user to focus on the broader-stroke design issues without getting bogged down in details.  If I can be a little bit critical, it’s almost too spartan in its feature-set; it would be great if Balsamiq offered some kind of hierarchy support, so as to allow the user to build a mock site which could show paths through a larger system.  Sometimes this is necessary to really ‘get inside’ a conceptual design and work it through, but as things currently stand, there isn’t support for this beyond rudimentary hyperlinking.  It would also have been nice to be able to create my own library of element groupings, but it could be argued that that would open the door to creating ‘richer’ templates which in turn starts to distract the user with thoughts of aesthetics.  This feature is, however, in the pipeline.

Balsamiq is available as a trial version, but the full version is inexpensive and I strongly believe that, used appropriately, one can easily recover its purchase price quickly in terms of development cost savings and increased sales (when your design blows away your competitors’ offerings)!

About John Clark

My name is John Clark and I previously ran a software house called Reynard Thomson, from which this blog originally grew. In the meantime, we launched a video-based user testing service (Kupima) which didn't really take off, and I have since moved into a new field specialising on software-based research & development consultancy. I'm active on LinkedIn, and would love to connect to anyone who has an interest in software prototyping or R&D:
This entry was posted in Prototyping, Software Review and tagged , , , , , , , . Bookmark the permalink.

One Response to Review: Balsamiq Mockups

  1. Dhawal says:

    A brilliant tool I use often that also allows for collaborative design (multiple users can edit the mockups) is Mockingbird ( It is as simple and intuitive as Balsamiq, and best of all, it’s already online and in the cloud – requires no installation of any kind and runs as well as a desktop application. Signup process is completely unobtrusive and the simplest I’ve ever seen! I am not playing down what Balsamiq has done – a company I’ve followed since their first blogpost appeared on Hacker News and have the highest respect for but I can see Mockingbird challenging them with their head start in the online space.

    Great review btw!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>