Quick, grab a pencil and paper!
If I had a nickel for every time someone has asked me, “what is your favorite tool for responsive web design,” I would have enough nickels to buy a cup of coffee… in 1941. I’ve realized, collecting nickels is a terrible way to get rich, so I’ll give you the answer for free. My favorite tool for any design project is: pencil and paper.
Now, you might be saying to yourself, “that’s idiotic,” or “who is this person,” or “why am I in a bathtub of ice cubes?” By the way, if you’re in a bathtub of ice cubes, I recommend calling 9-1-1. It’s possible a crazed medical student has removed your kidneys. See if there’s a note.
Leave a Mark
I use pencils, pens, and markers as the core of my design process. My best work is probably all in a sketchbook or recently erased from a whiteboard. Any work I do in pencil helps define the ideas that solve design problems. And I’ll be the first to testify: I cannot draw. Let me clarify. I cannot draw well. I can draw adequately. And drawing adequately is better than not drawing at all.
Drawing first is important, because it’s easy for me to sketch to show how an idea could be executed. Drawing lends itself to any sized canvas, even small “viewports.” Hashtag R-W-D, you guys. My drawings might be scrawls and scribbles, but they are ideas that translate easily to page designs. In short, sketches are cheap, quick, and easy. More so than wrestling to yank ideas from my head onto a blank Photoshop canvas.
If the first step in your design process is to open Photoshop, you’re not defining your ideas before you start executing solutions. Simply put, pencil and paper is the planning stage of design. Photoshop is the execution of your plan. If you’re jumping right into Photoshop, you’re probably just messing around hoping for genius to strike you like a lightning bolt from the sky.
Assuming you’ve got a minimal level of skill, sitting in front of Photoshop is going to give you adequate results. If you’re really good at Photoshop, maybe you’ll achieve better than adequate results. Whoah, adequate plus!
By skipping sketching, you won’t see the smart thinking that precedes a solution. The best you can hope for is a repeated loop of trial and error until you finally find a happy accident. You may work on tight deadlines, and fussing with shapes and pixels in Photoshop is a surefire way to waste valuable time. I’ve found, you really need to sketch first before you get on the computer.
We work on teams in both Austin and Philadelphia. The one tool we always fall back on is sketching. Sketching might mean working in a group around some big Post-it notes or sharing a whiteboard over Skype video. Sketching is quick, easy, and flexible. You can put something down on paper and discuss if it works. If it doesn’t, you can open the printer drawer, grab a new sheet of paper, and start again. Because of this casual and informal approach to iteration and discussion, sketching becomes a really powerful and flexible tool that supports collaboration.
For our approach to projects, where everyone on the team from designers to developers is working together at the same time, communication is crucial to keep everyone moving in the same direction. When it comes to communicating ideas about design, sketching is critical for us.
When you need a tool that is flexible enough to communicate ideas from wireframes to graphic design, instead of looking for a silver-bullet application to solve your problems, try picking up a pencil and sketching first. Put your ideas down on paper. Have you used sketching in your design process? Share your process, and send us a photo!
Originally published: 4/4/2013