Sketch Early, Sketch Often

I absolutely hated creating an outline before writing an essay in grade school. Thinking through the overall structure of a piece just seemed hard, while letting my random thoughts spill out on the page was way easier... until I reread my "finished" work and realized it seemed like incoherent rambling.

But essay after essay, my English teacher forced me to use an outline to show my thinking, so it ended up becoming like second nature and is something I still do to this day. Fast forward 15 years later - it’s not a surprise that one of my goals is to get better about sketching before firing up my design software.

The argument

My team has always encouraged me to start my designs by sketching, but I was one of those people that argued that I just can’t draw. I argued that I’m too detail-oriented, so the low fidelity of sketching was too "big picture" for me. Each time I'd try to sketch, I'd start to draw some modules then something would look uneven, and I'd feel the need to start all over again. I worried that my sketching was too time-consuming and causing my work to take longer than needed.

The flaws in that argument

While it’s true that some people just have more of a knack for drawing than others, these excuses I had are just that - excuses.

“There are people who can consume mounds of ghost peppers and not die. There are people who grow werewolf-like hair all over their bodies. There are also people deathly allergic to peanuts. But there are not people born to be incapable of drawing.”

— Sunni Brown, author of The Doodle Revolution

It’s essential to first realize that there’s quite a difference between drawing and sketching. Sketches aren't meant to be perfect. A sketcher should cycle through idea after idea rapidly, quickly identifying tangles and unraveling on the next sheet of paper.

Sketching helps to generate ideas by transitioning abstract thoughts onto paper so that they take concrete form. It provides an outlet to stop, think and take a look at the big picture - which elements belong on each screen, the priority of those elements in relation to the purpose of the screen, and which elements overlap from screen-to-screen - in essence defining a skeleton of a site or application.

“Sketching provides a unique space that can help you think differently, generate a variety of ideas quickly, explore alternatives with less risk, and encourage constructive discussions with colleagues and clients.”

— Mike Rohde, Sketching: the Visual Thinking Power Tool

The benefits of sketching didn't become obvious to me until I had a project that took way longer than it should have. We conduct retrospective analyses at the end of each project, and looking back on what went wrong helped me realize the exact point where the project derailed. I started the project by wireframing screens one-by-one, element-by-element, top to bottom. Had I instead taken the time at the beginning of the project to put pen to paper, I would have been able to see the interconnectedness and dependencies between screens. I suspect sketching would have actually saved me time down the road. 

Now knowing that sketching is an essential step in the design process, the next question is how to go about it.

How to make sketching a priority

1. Always have something nearby to sketch on.

Erin prefers to use colorful Sharpies and the back-sides of old print-outs for sketching. Not only do I have a stack of colorful pens and a large pile of scratch paper near my desk, I also have attached these sticky dry erase sheets to the surface of my desk and the back of my clipboard. There’s just something fun about being able to sketch ON my desk. Plus, I can take the clipboard with me wherever I go.

Caption: I prefer using Expo ultra fine tip dry erase markers to keep the sketches crisp and the notes legible.

Caption: I prefer using Expo ultra fine tip dry erase markers to keep the sketches crisp and the notes legible.

Erin prefers to use Sharpies over pencils because it prevents her from trying to get too detailed too soon. Using the dry erase boards results in a similar low fidelity while still enabling the sketcher to quickly erase and fix things without having to completely start over.

2. Take at least 10-15 minutes to sketch before digitizing anything.

Remember, sketching is supposed to be quick and it doesn’t have to be pretty. It’s just to help get your creative juices flowing so that the ideas can come pouring out.

If you’re anything like me, this is where you’ll most likely get stuck. It helps to first think: what is the main thing that the user should be able to do here? What requirements are we certain of? Then go from there.

3. When you find yourself explaining something about your design in words, sketch it. It’s a surefire way to effectively get your point across.

As a remote team, we typically correspond internally through chat and Skype calls. Inevitably when discussing designs, we tend fall back to sketching to get across whatever point we’re trying to make.

We do this in various ways - sketching ideas on paper and snapping pics, streaming footage from document cameras like this one, or sketching via digital tools like InVision's Whiteboard or Google Drive.

InVision's Whiteboard feature allows us digitally sketch out and easily communicate design decisions.

InVision's Whiteboard feature allows us digitally sketch out and easily communicate design decisions.

The main lesson to take away is to sketch early and sketch often. Harness the inner artist that came so effortlessly as a child, and let your imagination run wild. 

If you’d like to learn more about sketching, check out these other valuable resources:

Design concepting and UI design are some of our specialties. Book a consultation if you need help with your product or website experience.