The Power Of Pen And Paper Sketching

Need to design something? It can be tempting to start with a computer-based tool, e.g. wireframing software like Balsamiq, or design tools like Photoshop or Figma. These have their place, but I would recommend stepping back and starting with the humble pen and paper.

Sketching by hand can feel unfamiliar and uncomfortable to those who don’t feel artistically inclined, but the flexibility of hand-sketches combined with our imagination means we can work through more ideas and form a better design direction faster than we could than if we started with a more concrete, computer-based solution.

Admittedly, I struggle with it myself at times; while I spent my childhood with a sketchbook perpetually in my hand and graduated university with an Arts degree, the paper sketchbook was briefly forgotten when I started my web design career. It took years of muddling through uninspiring concepts and feeling like I wasn’t pushing my limits before I realized how powerful idea generation via quick physical sketches could be.

This process is recommended even if we aren’t designing something big or in the capacity of a designer. Everyone needs to be a “designer” from time to time; from creating a quick personal homepage, a landing page for a new open-source project, or creating nice-looking slides for their next presentation.

Grab a piece of paper and a pen, and let’s get started!

Why To Start With Paper #

As we’re always on a computer (and I think most of us are, nowadays), sometimes it doesn’t even occur to us to step away and try designing something off-screen.

Paper sketching can feel like something solely associated with visual art or graphic design (for instance, the legendary logo designer Saul Bass is well known for his advocacy of drawing), but even the earliest ideas for computer interfaces started with paper. Susan Kare, the designer of the icons for the Macintosh’s graphical user interface, used graph paper to design her initial ideas for the iconic early pixel art.

The power in paper sketching is the sketch’s ephemerality and how they feel less “real” than anything we create quickly on a computer. Start moving words and buttons around on a computer screen, and it’s tempting to fall into a certain direction and never explore alternate paths. Paper sketches force our imagination to fill in the gaps — far more quickly than if we added those details to a computer mockup.

We want to try a lot of different ideas when working on a new design. While the first few ideas may feel good enough, our fifth, seventh, or tenth idea might be even better. Working fast and loose helps us to get through many ideas quickly. Ideas flow faster, and we might surprise ourselves with what appears on the page when we work without restrictions.

If you’re not already familiar with design tools like Photoshop, Sketch or Figma, it can be overwhelming just getting started and learning your way around a tool. Rather than working through many ideas, we end up spending our time figuring out which button does what.

And wireframing tools like Balsamiq? They produce ideas that look like sketches — squiggly lines, imperfect boxes — but they still point us in the direction of working on one single idea and messing with it until it’s perfect rather than trying out many different ideas first. It’s quicker to start with pen and paper. Wireframing tools can be the next step in the process (rather than the first.)

“Sketchy” mockups also do a better job at expressing the kind of feedback we’re looking for when presenting to reviewers. A mockup that is too pixel-perfect will often prompt nit-picking about irrelevant details, but a rough sketch will result in higher-level conversations about layout.