Mockups Using Balsamiq

Our Senior Developer, Seth Verrinder, introduces us to a tool for creating simple and effective mockups. – Bob

Like most developers I’ve had to mock up user interfaces for a lot of projects.

In the past I’ve used two approaches for this: a) Get everyone in the same room and share a whiteboard or a piece of paper or b) use Real Studio to create an interface that doesn’t have any code behind it. I’ve even scanned hand drawn mockups and sent those in an email.

I hate using Real Studio (or any other IDE, it’s nothing against Real) to mock up interfaces. The problem is that the end result looks like it’s a real program, so if I don’t make it look nice then it looks like a program that sucks instead of a mockup of a nice program. The whole point of mockups is that nobody is sure exactly what should be on a window or how different parts of a program should fit together so polishing the UI is a waste of time.

Another problem is that a mockup that looks like a finished program is easy to mistake for a finished program by a non-programmer. This is a point I first heard made by Joel Spolsky over at Joel on Software. Unless the goal is to actually design the final interface for a program I would stay away from this approach.

The advantage of the whiteboard and paper approach is that nobody looks at a freehand drawing and thinks that the end program is going to consist of blue lines that aren’t quite straight. But the end result is usually kind of disorganized and it’s hard to store much less revise it in the future.

Enter Balsamiq Mockups. This is a very slick program written by Peldi Guilizzoni (originally written during nights and weekends while he worked at Adobe). It’s basically a wireframe drawing tool with a bunch of standard UI components like buttons, windows, scrollbars, and many more that look like they’re hand drawn. You can drag things around and change labels pretty much like a designer in an IDE except without any real limitations on where things can go since it’s all just a drawing.

The end result is a surprisingly attractive design that could never be mistaken for a working program or an actual UI. Mockups is developed using Adobe AIR and as a developer of native apps for Mac and Windows, I wasn’t sure it would feel quite like a native app and it doesn’t, but it also turns out that it’s been so well designed that it’s actually fun to use and there’s not really any learning curve to speak of. Overall, I highly recommend mockups to anyone who develops software for a living.