Creating interface prototypes
If you're a developer who has to produce user interface mockups every so often, this useful prototyping tool could save you a lot of time.
22 June 2010
There's one non-core skill that many developers at some point have to take a bash at, it's designing a user interface. For someone who's used to cutting code, this can be a daunting experience - after all, it's the job of a designer; designers' minds work in a totally different way to those of developers.
While you might still need to use a developer to create graphics, help is at hand when quickly mocking up user interfaces.
The point of a mockup isn't to create a 100% finished design - it's to work out where everything goes. This allows the client to get an approximate idea of how an application or website might work, and enables the developer to understand how the user will interact with the application. It's a kind of 'rough sketch' - but we need a way of creating mockups that's better than scribbling on paper.
While there are quite a few applications that enable you to do this, one of the best we've come across is Balsamiq Mockups.
Mockups is interesting in a number of ways. It's an Adobe AIR application, so you need to install the AIR framework. This isn't much of a problem - it only takes a few minutes (and it's used by other applications, such as Tweetdeck, so you may already have it installed). The decision to create it as an AIR application was possibly driven by platform compatibility - since AIR runs on Windows, Mac OS and Linux, so does Mockups. Installation is quick and hassle-free.
But because it's an AIR application, it can also run over the Web. So, you can try it out for free, without installing anything, by going to the Balsamiq website and clicking 'try it now'.
Mockups doesn't try to create highly slick, sharp-line illustrations. Since you're creating a rough mockup, it deliberately creates rough sketch-like drawings - complete with wobbly lines. Although this seems a little odd, it does work well and has the distinct advantage that people clearly understand that your layout is a rough one - just by looking at it.
Although the interface seems a little cluttered at first, it's quick to learn and is surprisingly productive. So, to add an item to a mockup (such as a drop-down menu), you first click on the 'buttons' link, then choose 'ComboBox/PullDownMenu'. For those who want to get at things a little faster, there's a search box - just type in the first few characters of the item you want, and it will appear.
There's a comprehensive range of user interface elements available - menu bars, date fields, checkboxes, colour pickers… in fact, pretty much everything you can imagine. What's even better is that Basamiq maintains a user community, where people can upload and share new user interface elements. So, if you're looking for something a little less mainstream, such as a Facebook connection dialog, then someone may well have created one first that you can use.
And there's some smart thinking in play with Mockups too. Let's say you want to have a block of text - the usual thing would be to copy and paste some designers' Greek (you know, the 'lorem ipsum' stuff you've seen on layouts) into the text box. But, if you just type 'lorem' then the text block will automatically fill itself with Greek, saving you a lot of time. It's neat touches like this that make Mockups a real joy to use.
So, without exaggeration, you can create a viable user interface mockup in a few minutes. Better still, Mockups can export its files as XML - so you can e-mail that to a client, they paste it into the on-line version, and then they can play with the mockup themselves.
It's also a great tool to use when working directly with clients and project stakeholders - you can sit together and drag things around, adjust them and change them until you're all happy. As a collaborative design tool, it's hard to beat.
If you're an iPad user, you can obviously work with the Web-based version, but you need to be on line. Although there isn't an iPad version of Mockups, there is an app that works in a very similar way, called iMockups. The iPad comes into its own, as a couple of you sit together, dragging and dropping elements until you're happy. Then you can e-mail it to anyone as a PNG file.
These tools work equally well for designers and people who don't have the slightest design experience. Mockups in particular takes very little to learn (which is a bonus, since most developers may only need to produce user interface mockups every now and then) and soon becomes an essential part of your workflow.
