Building things quickly with Mockups

I wanted to mock up a new NS2 promotional website today. I started doing it on paper first but soon found myself scribbling things out whenever I wanted to resize or change text. Small edits are OK to erase and re-draw, but this becomes tedious when taking feedback or trying a few different approaches.

I downloaded Balsamic Mockups because I read about it on someone’s blog. This software is very simple – it lets you quickly make user interfaces that look like they have been sketched out with a marker. You can resize, edit, copy, group, etc. components very quickly. Within 10 minutes I had my basic UI on screen and I was able to tweak it. Here’s a shot of it (sorry about the blurred out stuff, you’ll know more about this soon enough):

You can put in all the standard Windows controls, as well as web controls and fields and even iPhone-style controls if you’re mocking up an iPhone app. It’s all very quick and works exactly as advertised. I think the real genius behind this software is that because it looks hand-written and informal, it encourages change, iteration and feedback.

I showed what I was working on to Cory and Max, and 15 minutes later had their suggestions taken into account, and as far as I’m concerned, we have a good enough prototype we can start implementing in HTML. It will still change some, but we were able to iterate a lot faster than even paper. I wish the performance was better (it became sluggish to edit my UIs rather quickly) and that you could click a button in full-screen/demo mode and have it switch to another screen, but those are small shortcomings.

I’d like to try to mock up in-game interfaces like the player UI and Commander UI as well. I’ve already done these in Photoshop, but this might be the way to go if we want to see what change might look like.

Comments are closed.