The need for mockups
Let's first talk a bit on the real need to do mockups. I would compare this to building a house: you don't go right away and dig the hole for the foundation and start pouring concrete, do you? Of course not. You start by planning what are the basic needs you have for your house: how many rooms you need, how many bathrooms, and so on. Then you start sketching floor plans, moving things around to find a way to organize things the way you like them, to be functional for your family.

To me, building an application is the same: requirements gathering (3 rooms, 2 bathrooms) and then I do a mock-up so the user sees what the application might look like. Over the years, I discovered that most users are visual people and if you don't have anything to show them, it's harder to get the message through.

Prototypes are good, but they might take a long time to create, even though there usually isn't much code in there. A low fidelity mock-up is pretty fast, very visual, and also helps in solving things the customer expressed that you might have misunderstood (2 bathrooms yeah, but one of them needs room for the washer and dryer!).

The perfect tool to build mockups
Creating mock ups has always been a manual thing for me. I have been using Corel Draw since version 1.2, so it was my tool of choice. Issues I had with that are that Corel is fat, not usually available at clients' sites or not allowed as it is not a standard tool, and so forth and so on.

Then, one day, reading a blog that I really love, I read about a nice little Adobe Air application called Balsamiq Mockups. I decided to have a look at it, as it seemed to create mock ups in a very nice "hand drawn" look as shown in Figure A, and it was running on Adobe Air, which is getting into more offices than Corel Draw.

FIGURE A


This is an existing homepage that I recreated using Balsamiq Mockups Roll over picture for a larger image.

A planning example
So I started playing with Balsamiq Mockups a bit, recreating forms and applications we already had at the office. It was pretty cool, but having to recreate something existing is different than doing mockups because you need to create prototypes in a real project, with real users.

In the past weeks, I had to create a bunch of mock ups for a big application that is being designed. We were doing the macro design a couple of weeks ago (defining things that will be valid for the whole application, not specific processes) and we had a few "subforms" or sections of the forms, which we wanted to be the same across the application.