30 Seconds, 1 Minute, 5 Minutes

In college, I took a life drawing class and learned a helpful sketching exercise I still like doing today. While drawing last night, I realized that I use the philosophy behind this exercise in my web design process and day-to-day life.

The exercise I learned helps you quickly draw accurate life drawings by leveraging three rounds of sketching with increasing time and attention to detail.

To get started, you need to find something to draw and grab a timer. (I usually use the one on my phone.) Find a pencil and a piece of paper, and divide the paper into three boxes. You’ll be doing a series of 3 separate timed sketches. (If you’d like, you can follow along at home!)

The first round is short! You have only 30 seconds to draw your scene. This isn’t nearly enough time, but that’s why it works!

The short duration forces you to get started quickly. There’s no time to hem or haw and get stuck in a creative block. You’ve only got 30 seconds. You’d better get started.

You’re going to make mistakes, but that’s good! There’s no way your 30-second drawing will be a masterpiece, so it’s okay if you get the scale wrong, mess up the shape of an object, or end up going off the paper. This is important: by making these mistakes early, you learn what not to do in your final drawing.

It also helps you to get a sense of your scene’s overall shape and composition. What needs to be big? What’s too small? What’s going to take a lot of time?

This phase doesn’t end with a beautiful drawing, but that’s okay: you’re learning important lessons about how to draw your object. Take a breather and review your sketch. What went well? What went wrong? What will you do differently in the next sketch?

You only have a minute for your next sketch. That’s still really short, but it’s also twice as long as 30 seconds. And you’ve got a superpower: you’ve already done this drawing. Sure, you only spent 30 seconds doing it, and the drawing wasn’t great, but you learned about the general shape of your scene and what not to do.

The second sketching session is an opportunity to refine what you’ve learned. It’s still not enough time to do a good drawing (for me, at least), so moving fast and making mistakes is still okay. While the first sketch was a mad rush to get anything drawn, the second sketch allows you to spend a little more time planning your final drawing.

During this sketch I get a better sense of the overall composition and figure out which parts of the drawing will be the most challenging. I’m still not aiming to create a great drawing; I’m trying to gain a better understanding of my scene and how I’ll draw it.

You’ve got 5 minutes for the final sketch (though I’ll often cheat and go longer if I’m having fun.) This still isn’t a ton of time, but at this point, you’ve already drawn your scene twice! You’ve got this.

This is the first point in the process where I start to focus on making a quality drawing. I’ve made a ton of mistakes in the first two drawings, so I know what not to do. I’ve also gotten a good sense of my scene’s composition and what parts will require the most time.

By the end of the 5 minutes (or longer if I cheat), I usually have a sketch that I’m pretty happy with!

The secret behind this exercise is that you don’t do your best work on the first try. If I skip the quick sketches and jump right into the final sketch, I spend more time making a worse drawing.

I still make all the same mistakes: I make something too big, my drawing goes off the page, or I do a lousy job. But instead of doing a lousy job in 30 seconds, I do a lousy job over 10 minutes or half an hour.

My web design process is longer and more circuitous, but I find myself relying on the same underlying concepts, and I often find myself working through three distinct phases of increasing duration and quality:

1. Sketching and Brainstorming: Once I’ve got a good sense of the problem I’m trying to solve, a series of quick sketches helps me explore solutions quickly. This is a great time to make mistakes, try bad ideas, and hit dead ends (quickly!) By the end of this phase, I usually have a couple of ideas that I think could work well.
2. Prototyping: I’m still not in a good spot to build the finished product. Which of my ideas is best? How will they actually feel in a browser? What problems am I not thinking about? Prototyping my best ideas helps me to answer these questions, get feedback from my team, and plan out my final design. (I’ll prototype using code so my colleagues and I can try the prototypes in our browsers on real devices and see how they feel.)
3. Development: By the end of prototyping, I usually have a good design solution, but it’s often a mess under the hood. Although my prototype code is written for the web, it’s not ready for production. It’s got accessibility and performance issues, bugs, unhandled edge cases, and messy, unmaintainable code. In the final step, I take everything I learned from the first two steps and use it to build a polished experience that I’m proud of.

This process is different from the sketching exercise: I often switch back and forth between these phases as new questions are discovered, and it takes a whole lot longer than six and a half minutes.

But the underlying philosophy is the same: take your time, do quick explorations that allow you to make mistakes, and learn about the problem you’re solving. Don’t jump into the finished product until you’ve made a couple of bad versions of it. Your first try usually isn’t your best.