Prototyping – Graphite Over Graphics

Your website is in dire need for an update. It doesn’t look great, uses outdated technology, and doesn’t do what it needs to for various aspects of your business. At some point, every successful website will need to undergo a redesign if it lasts long enough and is important enough to a business’s success. It might seem daunting, but it doesn’t have to be.

The Paper Prototype is the first thing you should do. What is a paper prototype? Exactly what it sounds like. It’s a pencil-to-paper rendition of the intended design. It might seem simplistic, but you don’t need fancy software to create a decent mockup for your new site. I was skeptical at first. As a new developer, the idea of using something not on the computer struck me as kind of out-of-sync. I had just begun a new project and had to double as designer (not my usual role, but in a smaller firm you wear many hats; that’s part of the appeal.) My PM insisted I was making the process too complicated for that stage of the project. She was right, of course. The prototyping phase isn’t supposed to be focused on the bells and whistles yet. It’s supposed to focus on how the site should work/flow, what elements should be used / where they should be placed, and the logic of the back-end. Ideally, pictures, colors, and other graphical elements shouldn’t be even there as they just distract from the important bits.

Realizing this, a computer assisted program might be a little over-doing it.  It’s cheap and easy to create and make changes to paper prototypes. And the prototyping phase is the best place to make these changes as usability guru Jakob Nielson explains. Paper prototyping is indispensable to cheap, rapid web development. It encourages note taking, margin jotting, and improvisational thinking because the method invites creativity by its very medium.

paper prototype for web development
Paper prototypes don’t have to be, and probably shouldn’t be, pretty.

But, something does bother me about paper prototyping. It’s very much my own hang-up, but something seems so…unprofessional about it. So I used one of the many web-based mockup builders from around the Internet. My weapon of choice was flash-based http://lumzy.com/app/ Lumzy. It was my first mockup that I’d put in front of actual clients and wanted it to look like I took time in making it vs. some sketches on printer paper. Ironically, but not surprising, is that most of the computer-based approaches mimic then pencil-to-paper style. This is because paper and pencil strip down a design to its barest, black and white elements which are hallmarks of good prototype design.

Ultimately, good prototyping is about the function of the website, not the form. Pencil mockups are very simpatico with this concept. And if you’re afraid your forays into pen and paper design will end up looking a little…elementary, there are resources out there that can help you out with pre-designed elements like Lumzy or higher end software like Balsamiq. So, when you’re about to design or redesign a site, break out the old No. 2  pencil and start committing the usability and function of your site to paper.