The Lost Art of Napkin Sketching
And why pen and paper should be in your toolkit
Recently, I was asked by a client to make some simple additions to a website’s homepage design. She sent me some image files to add to the homepage along with a Photoshop comp.I spent some time reviewing the site to get a feel for its design, since this was a new project.
My initial instinct was to jump right in and start drawing, adding images and text, moving things around, and see what it looked like in Photoshop*. But, it was late and Monday Night Football was on, so I closed my laptop and decided to attack it the next day.
*NOTE: I use Photoshop here as an example because I use the Adobe Creative Suite as many designers do, but these ideas are valid for most graphics software, including Visio and Powerpoint. See Link below for some free software alternatives.
Over coffee and breakfast, some ideas bubbled up. Pre-caffeine, I wasn’t quite ready to plunge into productivity mode, but I didn’t want to lose the creative spark. I found a pen, grabbed a dinner napkin and started sketching layout options.
Later, when I opened Photoshop and started to get into the weeds, I used the napkin sketches as a roadmap. I worked through a number of color and design details on one option, then was able to use the other sketch to start fresh with a different layout.
Now, I don’t want to act like I’ve discovered some brilliant new secret. Writers, designers, artists and hipsters carry trendy Moleskine notebooks and sketchbooks to capture their ideas. Visit the App Store, there are hundreds of apps devoted to sketching and capturing notes electronically.
Too often, though, we consider our sketches to be for our eyes only or just a quick and dirty way to capture fleeting ideas. As a graphic or web design professional, we believe our clients need more than a napkin sketch -- they expect to see (and we need to create) a full-fledged storyboard or Photoshop Comp and wireframes.
Well, Yes. And No.
If, like mine, your client has asked for specific work and it’s pretty straightforward, then keep your napkin sketches to yourself and give them a decent mockup or wireframe.
BUT, if you’re just starting out in the Conceptual phase of building or redesigning a website, or they aren’t clear on what they want, then consider hand-drawn comps. If you’re struggling with a direction, sketch out a few options.
You may be thinking, but I’m not a great artist. Or, not everyone is a visual thinker - they won’t get it. But, your napkin sketch -- or your whiteboard diagram (yes, I am that person that gets up in the middle of meetings and asks for a Dry-Erase Marker (or a whole set if that’s an option!)) can serve as a catalyst for getting ideas flowing —or gaining understanding — or guiding direction.
You don’t have to win any Napkin Sketch contests in order for your sketches to serve as a communication tool with your clients. Sketches can help define the site’s main purpose and give the client an idea of what basic layouts might work (or not!). You can lay out the building blocks and define where main “chunks” of content (photographs, text) might fit.
In his book, The Back of the Napkin, Dan Roam suggests that drawing pictures can help solve the most complex business problems.
And me? Sharing that simple napkin in that grand university hall was my watershed moment in understanding the power of pictures. I thought about all the problems that that simple napkin sketch had helped solve. First, simply by drawing it, I had clarified in my own mind a previously vague idea. Second, I was able to create the picture almost instantly, without the need to rely on any technology other than paper and pen. Third, I was able to share the picture with my audiences in an open way that invited comments and inspired discussion. Finally, speaking directly from the picture meant I could focus on any topic without having to rely on notes, bullet points, or a written script.
As a designer, you understand the power of pictures and visual metaphors. You may think that a gorgeous, full-color Photoshop design with fabulous photographs and brilliant graphics will WOW your client. Yes, I hope that it will. But it is not the place to start.
If you’re not a designer —if you’re a manager, life coach, salesperson — you may dismiss the notion out of hand. Roam argues, and I concur, that sketching out the problem visually and working through solutions through drawings can help unlock entrenched problems.
Starting with pen and paper is more efficient and a better feedback tool for a few reasons:
- Ideas flow more quickly and freely. You don’t get hung up by or limited by the tools available in the software (i.e., not everything fits in a square or round shape or is bound by the conventional grid).
- Sketches allow you to get an idea down on paper while it is fresh. This is the classic Mad Men cocktail napkin “over drinks” scenario. There’s a reason it’s cliche’.
- Sketches are easy to change on the fly. A concept drawing can be a great tool to get clarity and feedback with clients and colleagues on ideas in the early stages. It’s easy to add a box here or redraw a layout without a big investment.
- Using black and white sketches allows you (and the clients) to focus on the BONES or building blocks of the site without getting distracted by color or specific graphics or photographs. (We have all been in THAT meeting)
- Or distracted by details. When I work in Photoshop, my OCD takes over and I get hung up wanting to align boxes or make sure fonts match.
Not all your ideas will be fabulous. Sometimes, you’ll ball up the napkin and throw it in the circular file. Sometimes the client just won’t like a design. Now, doesn’t that feel better than having spent an hour or two in Photoshop getting it “just right” only to realize the concept was wrong?
Sketching it out helps nail down the main ideas and focus on the core requirements. It is the foundation of Keep it Simple design. If you can’t sketch it out on a napkin, how do you explain your idea(s) to a client? Moreover, how do you build it? Where do you start?
Start somewhere. With paper and a pencil.