Why Mockups Matter

I’m not a web designer. I’ll admit that. I do, however, appreciate how a good design can aid the development process. When I’m slicing a site, I’m often working with Photoshop files of the home page and a sample inner page, assuming the two layouts are different. The problem comes when there’s special functionality that needs to be implemented on the site. What if the client wants a quick quote form? What if there’s a one page order form? What if we need a custom search page? All of these pages will exist only as text in a project specification document. I could certainly throw something together in code and build it out as I go, but the odds are pretty great that what I build will not be what was expected. This is where mockups come in.

I was put on to Balsamiq by a co-worker. Balsamiq is an Adobe AIR desktop application for creating web mockups. It’s full of tons of common elements used on web pages: headings, text paragraphs and lists, input forms, layout elements. You name it, it’s probably in there. One of the nice additional items is an iPhone layout. I don’t care so much about phone apps, but this makes it really easy to do some layouts for mobile web applications. I’ve been using this functionality to lay out a simple mobile beer rating web application I’m working on. Below are a couple of the mockups I’m working from. On the left, the brewer page lists all beers for a given brewer. On the right, the beer page lets you rate the beer (in case your memory is… impaired).

There are some pieces of functionality that are left to be implemented like user account management and wish lists, but the nice thing about Balsamiq is that the output files are XML and, therefore, can be versioned (I’m now using Git). As I make updates, I can save new versions and still look back to see the progress of my mockups as the site specifications expand.