Why I wireframe in pencil

wireframe /ˈwʌɪəfreɪm/ n. An image or set of images which displays the functional elements of a website or page, typically used for planning a site’s structure and functionality.

“Oooh, pretty drawings!” says Ed, ScraperWiki’s other product guy, as he leans over to look at the smattering of papers on my desk. And he’s sort of right, they are pretty drawings. But that’s not the point.

I’m a designer. I think in pictures. And unlike a growing contingent of designers these days who protest they can’t draw,¹ I sketch everything before I even touch a computer.² There are sheets of “pretty drawings” all over the ScraperWiki office with arrows and squiggly ‘greek’ text, documenting what is, what might be, and what didn’t make the cut.

Some people do this sort of work on a computer. Axure and Microsoft Visio are probably the kings of this particular jungle, although I’ve seen designers use everything from web-based tools like Balsamiq and Mockflow, to desktop apps like Illustrator, Sketch, Fireworks, Photoshop and—weirdly—InDesign.

Computer wireframing tools have their benefits: you can line stuff up easily, duplicate elements onto multiple pages, undo changes with the press of a button, and, often, produce interactive demos for users (or salespeople) to click though.

To me, however, these very strengths are the reason I never use software for wireframing. You spend so long thinking about how to set up a master template, or how to finely replicate the UX of the finished product, that, by the time it’s all done, you’ve completely lost track of the wireframe’s core value: to quickly represent the main functions of a page, like an imperfect, 10-foot overview, so you can quickly rule out bad ideas and discover good ones to iterate over again.

Why pencil?

Pencil lets you get as rough or as detailed as you want.³ Drawing a web page’s header is as simple as four lines in a rectangle. The site logo and name; another little rectange and a squiggle. Need to de-emphasise something? Tilt your pencil and scribble over the place with a wide, light grey daub. Need to make something stand out? Press harder.

You have a direct, one-to-one mapping with what you’re drawing. You find yourself, midway through drawing a line, suddenly re-appraising a whole feature of the design. You’re inches away from the marks on the paper. You can see the rubbings out where you’re not sure what to do – almost always the parts that need more research. And you can see the messy, wobbly bits where your design’s too complicated. Sometimes the marks on the paper seemingly tell you what to do next, in a way that pixels on a screen never do.

Another advantage, especially when showing your work to someone else (a client, or a user) is that pencil wireframes immediately imply imperfection. There can be no doubt that this stuff isn’t finished yet. When I was a freelance designer, hand-drawn wireframes always ilicited more feedback from clients than Photoshopped ones. And as a bonus, I’d get this moment when the client would say “couldn’t this work like that”, and I’d turn the page over and just draw it. It pulls them right into the design process, and they get to see first hand what works and what doesn’t. Priceless.

Speaking of which, pencil wireframes also make it easier to charge when you’re a freelance designer-developer. They make it dead clear where the design process finishes and the programming starts. And unlike detailed mockups, you don’t get that awkward situation where the client thinks you’ve already made the damn thing and wonders why you need another X days to “code” what has clearly (to their eyes) already been finished!

What about all the other cool toys?

You don’t have to go all-in! If you’re comfortable in Illustrator, Balsamiq or Axure, stick with them.

I personally use a combination of pencil for initial wireframes, then Photoshop for occasional high-fidelity mockups, or more often these days, I’ll design right in the browser using HTML and CSS.

Designing in the browser gives you the dual advantages of, again, not getting caught up in the details, and additionally, having a working prototype right from the get-go. With a combination of pencil wireframes and HTML prototypes, I can’t see why anyone would ever want to use something like Axure.⁴

The combination of SVG and Javascript is also pretty alluring. Making a mockup in Illustrator, then animating it interactively with something like D3 is a great way of prototyping immersive, highly-customised phone and tablet interfaces in particular.⁵ I’d love to get a chance to try it out at some point this year.

In the meantime, good old pencil and paper fits the bill pretty well. With the added benefit that it puts me back in touch with my “designer” side, in a company full of programmers!