Don’t mock me!

Now that I have a UI designer on board, one of the challenges I’ve been facing over the past few days is how to clearly communicate design ideas and keep multiple brains on the same wavelength.  Piotr (my account manager  at Merix) has of course used my prototype site to learn about the product, but the problem with the prototype is the prototype sucks!  The last thing I’d want them to do is use the prototype KitchenPC site as a baseline to understand my design goals and usability requirements.  I’ve also sent them an 18 page Word document that illustrates every page, every common control, and basic user scenarios.  This has the advantage of a feature spec, but as they say, a picture is worth 2^10 words.  Or something like that.

Traditionally, I’ve been mocking up UI prototypes using my favorite tool.  This would be pen and paper.  It’s fast, it’s flexible, and let’s me really visualize a concept and decide if I like it.  If not, I can crumple it up and play basketball with the trash bin.  However, now my desk is littered with dozens of sheets of notebook paper and Piotr would hate me if he had to work with any of my muddled nonsense.  It was actually he that recommended I check out Balsamiq Mockups.  I have to hand it to him, this software is awesome!

It’s an Adobe Air product that runs on Mac, Windows, or Linux and can also be run offline.  The main thing that impressed me about Balsamiq is it has a learning curve of about zero.  I watched a short video on the product which looked impressive, but I just figured that guy knew exactly what he was doing and probably wrote the thing.  However, the very first time I used the product, I mocked up a wireframe of the KitchenPC home page in about ten minutes; and it looked more impressive than anything I could have done with pen and paper.  The images it creates are actually intended to look like “sketches”, using a human handwriting style font, pen looking shading, and lots of rough angles and curves.  Best of all, I can make changes, erase stuff, and drag shapes around.  When I’m done, I can export the file as a PNG image and email it to Piotr.

The product has a seven day free trial, and runs for $79 bucks (though various discounts apply, especially if they consider you a “do-gooder”.)  I haven’t created too many wireframes, but I think this’ll be software I would get my money’s worth from.