Prototyping with Balsamiq

One of the things that I've heard good designers like Tricky and Bill Buxton emphasising again and again is the importance of wire-frame prototyping. Occasionally, I've tended to do this using pen and paper (but I can't draw!) or Visio in the past, but this is slow, and somewhat tedious and is usually just a first step before hacking together a 'prototype' I can show the client in HTML/CSS or Photoshop, which is incredibly time-consuming and error-prone

Microsoft are promising us Sketchflow in version 3 of their Expression Blend software, but despite all the buzz around it (finally, a reason to move to Blend rather than use the much better, longer-established rival offerings!) the preview release made available by Microsoft last month didn't include it, which says to me it's a long way off. There isn't even a public beta one can ask to be enrolled in, so I don't think it's something that can be realistically considered at this stage.

Fortunately, a product called Balsamiq has come to my rescue. Rarely does a piece of software make such a big initial impression, and become so indispensable so fast. The big advantage of this software is it allows prototypes to be mocked up VERY quickly, and then sent to the client for comment.

The look and feel of the Balsamiq mock-up make it clear this is not the final design, and the software is a God-send for people like me who just can't draw! More importantly, it's a real time-saver. Where I used to waste far too many hours hacking CSS and HTML, or making over-elaborate, glossy Photoshop mock-ups which only convey completely the wrong impression to the customer - that the product is already developed and ready to go, and which they invariably wanted to change anyway - I now use Balsamiq all the time.

The software has great drag-and-drop design features, a very complete set of UI widgets and icons (not just for the web, but also for iPhone development), and can be trialled in a browser for free from the Balsamiq web site. You'll have your first mock-ups finished in minutes!

For USD79 you can download a desktop version, and from that you can produce either XML output that customers can import into their version of the software (and easily modify, before sending back to you) or .png snapshots like that shown above. I really can't stress enough that at under USD80 it's a complete steal!

The sketch above is the result of my playing with possible designs for a new site ShinyDiscs.tv that will be developed in Silverlight. I was able to knock up the prototype in minutes, but perhaps more importantly it helped clarify my thinking on UX design, the required functionality, and help get me started on estimating the time needed for development. Highly recommended!