Balsamiq mockups: draw detailed GUI mockups in minutes

! Warning: this post hasn't been updated in over three years and so may contain out of date information.

Since the launch of AIR, Adobe have had a product marketplace for applications written using AIR. In amongst the dozens of twitter clients that clog up its pages, one can occasionally find a real gem of a product. One such application is Balsamiq Mockups.

If like me, you hate creating mock-ups with pen and paper, then normally you are limited to two choices:

  1. Use some sort of overly-complex CAD or structured drawing package like Visio
  2. Use a paint program like MS Paint or Paint Shop Pro.

Both solutions are far from ideal, and it will often take far longer to create (and modify) the resultant mock-up than it would take to draw it with pen and paper.

Balsamiq Mockups addresses this issue really nicely. I offers an interface that is is simple to use, is geared specifically toward drawing mock-ups, and – as an added bonus – the skins applied to the components makes then look like they were drawn with pen and paper. It only costs $79 a license too.

As an experiment, I downloaded the trial version, ran it and attempted to create a mock-up myself. It is of a AIR-based Google chart generator that I started working on months ago (but haven’t got anywhere with due to other commitments, so don’t hold your breath for it if you think it would be useful).

The total time taken, including installation, learning to navigate around the tool, drawing the mock-up and taking a screen grab of it took about 20 minutes. With a bit of experience, I could easily have created this in just a couple of minutes, far faster than using pen and paper. Yet the resultant drawing is fully editable, unlike a pen and paper version. It really is an easy tool to use and I’ve become an instant fan of it 🙂