Jamie's Blog

Lessons from a life of startups, coding, countryside, and kids

Mocking-up a Website

I’m finally getting started on Shutter Scouts, a website for photographers to share and discover interesting locations.

Initially my principle tool was a blank pad of A4 paper and a biro for sketching out the data relationships, templates and pages.  After searching for a good cheap website template I decided to make my own — just enough layout and styling to make it work — and evolve it later as & when the site gains users.

But when it comes to working out some of the more complicated page layouts, biro and paper just wasn’t good enough.  I’m not a professional designer, I don’t use Photoshop and I’ve seen a few UI mockup tools but they are either too expensive or too Windows-UI focused. Earlier in the week I installed Pencil, a Firefox extension that sounded as if it would work but in practice was still too Windows-UI focused (which begs the question why it’s a Firefox extension at all).  And it was too polished — it felt like designing the UI, not sketching it out.

So it was fortuitous that I came across Balsamiq Mockups on Hacker News.  This is a little application which allows you to drag ‘n’ drop hand-drawn components on to the page.  The desktop version is an Adobe AIR application so it’s installed through your web browser but accessed from the desktop / start menu shortcut.  I’ve had some issues with AIR applications in the past (notably Adobe Digital Editions) automatically deleting themselves but Mockups seems to run really well.  It looks like a sketch pad, with a selection of common web components including Maps, Tabs, Titles and Videos, and some esoteric ones like Coverflow and Webcam.  Each component is styled in a hand-drawn style (reminiscent of Napkin L&F for Swing) but you can reposition and resize them.  So far, so good.  The hand-drawn style is more than just eye candy though.  It visually says “this is a sketch, nothing promised, nothing set in stone”.  It can be very useful to avoid getting too hung-up on the colour scheme, logo design or fonts.

Here’s the current sketch for one step of the process when creating a new location on Shutter Scouts:

If I’m honest, there are a few things that need polishing: Escape key doesn’t seem to cancel a drag; there’s no prebuilt file-upload component or Cancel/Submit buttons; and exporting an image doesn’t let you choose where or what filename.  If I was a professional and had purchased this, I might still be a little annoyed about the “Created by Balsamiq” tag at the bottom of exported images but I guess it’s no different to the software my Physio uses to print off exercises.  Also, there’s no printing support so you need to export the image and print, but these are hardly major flaws. But the developer has been responsive and helpful so I’m sure it won’t take long for these issues to get polished off.

Mockups is a really easy-to-use tool for quickly (the above sketch took 10mins) sketching out a page layout before sitting down to write the HTML.  I’ve printed out a few sketches now which hang above my desk to visually remind me of what I’m working on.

Balsamiq Mockups also comes integrated with Twiki, Confluence and JIRA which I guess makes it ideal for collaborating between designers/programmers and clients.  Is it worth $79 for the desktop version?  For me (a hobby web developer on a tight/non-existent budget), no probably not.  For a professional web designer?  Definitely: Buy it in a heartbeat!

Disclaimer: I offered to write an open and honest review of Balsamiq Mockups in exchange for a full licence key.

P.S. Incidently, I thought it was Balsa-miq as in Balsa wood, used in model-making, but apparently it’s not.  Just goes to show how different brains work.