Tools of the Trade: Prototyping

When I first started designing websites, I eschewed prototyping in favor of straight coding, dismissing it as a waste of time. When your only client is yourself, this isn’t a problem. However, for freelancers and professional web developers, prototyping is an essential part of the design process that shouldn’t be ignored, and it’s something that I’ve come to love. Whether your prototyping method is digital or analog, the tools you use can make the process either enjoyable or wholly frustrating. Keep reading to find out what tools I consider essential for fun, fast and on-the-go prototyping.

A Tale of Two Prototype…Types
Picking a prototyping method is extremely subjective. Some people lean toward the analog; they really love office supplies. Others are digital; they breathe vector graphics and exhale flowcharts. This preference carries through to prototyping, and I’ve found that the two methods are opposed to one another.

Analog prototyping can be done anywhere and allows for greater client interaction. There’s no learning curve with pen and paper. You can pass a legal pad around the table and get input from everyone involved whether it’s just you and your client or a team of information architects, web developers, and usability experts. Paper scales.

But for most of us–especially for those of us whose drawings are, well, assy–paper has a limited level of detail. Translating everyone’s scribbles into a website that pleases everyone that contributed to the prototype can be difficult. Digital prototyping doesn’t have that problem.

Photoshop mock-ups can be–and often are–extremely detailed, which leads to fewer revisions in the long-run, as the prototype presents a clearer picture of what everyone wants. Digital prototyping requires a computer, though, and complex programs like Photoshop, OmniGraffle, and Microsoft Visio keep clients at arms length.

So, what should you use? Whatever you want. I, however, tend to use a mix of both to cover the most ground possible.

Digital Prototyping Tools
For mouse-and-keyboard-style prototyping, my weapon of choice is OmniGraffle, but I keep Photoshop in an ankle holster. OmniGraffle is the Mac equivalent of Microsoft’s Visio. Both are excellent vector graphics apps that make mocking up pages a breeze.

The type of prototyping done with these apps is referred to as wireframing. The level of detail in a wireframe is smack-dab between a paper prototype and a Photoshop mock-up. The resulting diagram presents a layout without any creative elements–artwork, graphics, written copy–so that the ultimate structure of the page’s information is apparent. Wireframing is one of the many things information architects spend their time doing.

For professional development (read: my regular job), I go straight to Photoshop to create full-blown mock-ups. My boss has the time and the money to cover the expense of creating a detailed diagram. But for freelance projects, I prefer to start with wireframing. After all, time is more than money to a freelancer. And while Photoshop mock-ups look pretty and impress clients, they can take forever to build. Wireframes give clients a lot of detail without much effort. If they decide to bail early in the project, I will have minimized the damage to my bottom line by only producing a wireframe.

Analog Prototyping Tools
As I said, though, I like to mix things up. My personal clients and my professional colleagues all feel comfortable approaching a pad of paper; it’s common ground that we’re all familiar with, and that familiarity breaks down barriers to creativity.

Since my office isn’t willing to spring for classy supplies, I rely on the basics at work: a Pilot G2 pen and a legal pad. Outside of work is a different story, though. I carry a squared Moleskine notebook along with a couple of nice drafting pens (I’m currently using a Staedtler 0.05mm pigment liner, which I’m pretty happy with). These are, in my opinion, high quality tools that make the process more enjoyable. I find that I put more effort into my sketches when I’m using equipment that I really appreciate. Plus, I just have a thing for productivity pr0n.

In recent weeks, I’ve started toying with an ultra-portable design kit that consists of a matte black Fisher Space Pen and a Field Notes Brand notebook. It fits in a back pocket, comes complete with squared paper, and looks swanky as hell. But most of all, it’s functional. And that’s the key, here. Use what works for you.

Good luck, and happy drawing.