demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Why Paper Is Still Your Best Design Tool

design / process

Estimated reading time: 4 minutes

Sketch for Coastal Capital web designEvery year brings a new version of “The Ultimate Design Tool”, new software that promises to seamlessly integrate the latest design techniques, prototype effortlessly, read your mind and make your coffee. Inevitably, each and every one of them fails.

The Digital Trap

I believe the reason that digital prototyping tools are so often ill-suited to the design process is the fact that, despite the billions of bytes at our fingertips, we regard work on a screen as precious. When we draw a box with a cursor, we tend to iterate that element – squeezing it into a column, filling it with color, adding a filter – rather than questioning its original purpose. At a different scale, the same happens with mockups: we go through multiple versions of a file, but they all start from a particular set of assumptions, group of elements, or initial conditions. Our instinct is to shape what’s present on the screen, rather than starting fresh.

Illustration of CSS3 ExclusionPerhaps more importantly, the work you produce is limited to the tools available in the application. If prototyping software doesn’t allow text to curve around elements, it’s unlikely that you’ll make that choice in your design, even though it’s entirely possible to wrap text to a curved shape on a web page. In other words, digital prototyping tools limit the imagination of the designer to what the tool allows. Creative ideas tend to quickly funnel into a set of previous solutions.

That approach is dangerous: it means that we’re more likely to fall in love with a work built within superficial confines, and less likely to question our original intentions.

The Freedom of Disposability

Digital work is constructivist: we build prototypes up from discrete elements, forging jewel-like creations. That’s the very opposite of what a good early design process should be: the exploration of a problem set, the questioning of fundamentals, the freedom to experiment and the ability to destroy.

For that reason, I would argue that the best early design tool is one invented by the Chinese two millennia ago: paper. Common, disposable, cheap, and limited only by sheet size, paper is an “idea crucible”, a space in which initial concepts all have equal weight and validity. It’s only through hours, days and weeks of variation, redrawing and experimentation that the evolutionary process of design forges a creation on the final pages, and it is only then that we should start to render those elements on screen.

Drawing For The Pusillanimous

I think a big part of the reason that first-time designers tend to avoid designing with paper (or on a whiteboard, if the space is large enough) is a sense of vestigial shame: many believe they can’t draw. Digital tools are somehow easier to take up than a pencil, with a sense that screens are somehow more democratic and less subject to judgment.

The reality is that you don’t have to be a draughtsman: there’s no requirement to draw perfectly straight lines, and no need for shame. If you prefer, you can keep your sketches entirely to yourself: what you’ll show the client is the eventual digital prototype, mockup or styletiles, not your work on paper. If you need more guidelines, there are entire libraries of gridded paper, free for the taking.

University of Alabama mobile sketchI find that sketching is particularly important in the era of responsive sites: designers working at 200% zoom in PhotoShop or Illustrator constantly overestimate the amount of text and content they can cram onto a mobile screen, and have a very hard time showing how elements will change across devices. Mobile prototyping on paper – physically drawing icons at a practical size – creates an immediate understanding of the real, tactile demands of smaller screen sizes in a way that a 27 inch desktop LCD display cannot.

Conclusion

Of late there has been an increasing cry to “design in the browser”, skipping over mockup tools entirely. It’s a movement I have a great deal of sympathy for, but there is still an initial process, a gelling of ideas, forms and content that remains crucial. That means paper, and lots of it: a Moleskine, A4 sheets from a printer, rolls on the floor, the corner of a napkin. It remains a truism that the longer you spend in this explorative state, considering all possibilities, the easier and more fluidly the rest of the development process becomes.

I’d encourage every designer and developer to pick up pen and paper and start doodling. If you do so, and keep with the practice, you’ll quickly find that sketching frees your imagination to court the muses, while any digital prototyping tool will increasingly feel like a shotgun wedding.

Illustrations by Mike Rohde, used under Creative Commons.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.