If you can draw these three shapes, you can draw the Internet

James Buckhouse
Design Story

--

Learn to draw what you mean; here’s how.

A pencil takes just a moment to learn, but a lifetime to master*. Learning to draw well takes guts and unreasonable determination, but drawing to get your point across is something you’ve done your whole life, even if the last time you felt good about it was kindergarten.

It’s time to draw freely again. You’ll gain respect, work better together, ship faster and create better products if you can show what you mean and own the map while you rally your team.

Start with these three shapes.

With these three shapes, you can combine the forms to create almost any website or mobile app. For instance, here’s Pinterest.

Of course, there’s much more to designing Pinterest than just drawing boxes, but that’s precisely the point — it’s never really about being able to draw — it’s always about your idea, how something works, and what it means. But no one will ever get the chance to experience your great idea if they can’t grasp what you mean. Drawing it (even crudely) can get you there faster.

Drawing an iPhone? Try this: Rect, rect. circle, dot, line, rect rect. BOOOM. done. Easy-lemon-squeezy.

Apple watch? Basically a rectangle with soft corners.

Words get in the way.

Next, if you are trying to draw people, don’t panic. Start by forgetting that you are drawing a person. Eliminate language from your thought process. Instead, imagine the human form as a series of shapes that have been moved into a certain position — and appear from a certain angle — to create a second series of shapes that combine into a total form.

We get into trouble when we think “arm” instead of a long rectangle, set at an angle, going all the way down to that round looking shape.

As you improve, you’ll dig into anatomy and will know more about muscle insertion and skeletal mechanics than you’ll ever care to repeat at a polite dinner conversation, but if you’re just trying to draw a person in a pose, start with shapes.

Quick sketch of Indiana Jones from the Raiders era.
Raphael drawing Big Mike’s David from the rear in 1504 (and our crude shape drawing of his study)

Here’s Raphael drawing Michaleanglo’s David. The form is more complicated, but the same idea holds.

Start looking for shapes and assemble your figure bit by bit. No matter how complicated of a shape you’re drawing, there’s always a way to break it down into parts.

Robots by @erqiudao find her here: https://twitter.com/erqiudao

What about Sketch?

Here’s a super tutorial on how to use these same three shapes in Sketch to make almost any illustration.

Designer @erqiudao (aka yukigu1988 and awesomeyuki) uses a combination of simple shapes and keyboard shortcuts to draw robots faster than most of us tie our shoes.

She lists her step-by-step method for fast sketches and keyboard combos to snap your shapes together.

Read it here in English and here in Chinese.

Draw down to the bones

The first drawing book that really held my attention was Drawing Lessons From the Great Masters, by Robert Hale. It opens with a plea for you to order up a skeleton from your local medical school supplier or visit the morgue and learn to draw by examining human bones.

It is a marvelously ridiculous suggestion, but one that stuck with me. So much so that later on in life, when I was designing costumes, and I felt all my choices were “arbitrary” I went back and started my costume designs by drawing the skeleton, then adding muscles, and then finding choices about the seams based on insights that sprang from the anatomy.

When you are designing a digital experience, your grid is your skeleton. Hang from your grid the elements of the experience that best tell your story.

A typical grid ribcage for a news or content site.
More UI explorations, this time with circles and squares
From Sketch to Mocks (with the Design team at Twitter)
Early work for a discovery experience at Twitter

Conceptual Art

This approach to drawing works for app design, planning a painting, or describing a concept.

Recently, I had a chance to apply my Story Map process to enterprise sales for Sequoia. The final drawing looks complicated, but each shape can be broken down to a combo of primitives.

If you start a journey of learning how to draw because of this post, I want to hear about it! I promise to send encouraging remarks. So start with a pencil, and then find me here: twitter.com/buckhouse. Also, if you want to know more about human experience design +figure drawing… read all the way to the end of this post.

And if you’re an artist — even if you’ve been hiding as a designer or programmer or PM or middle manager — I believe in you — so never give up and together we’ll Pull the Dawn from the Night

Footnotes (and links)

  1. Golan Levin, 1997. In his MIT application essay, Golan discusses the Instantly Knowable, Infinitely Masterable aspects of pencils, pianos and software. I straight-up stole his pencil line and used it as my lede. Thx Golan!
  2. Hale, Robert. Drawing Lessons from the Great Masters, 1969
  3. Loomis, Andrew. Figure Drawing for All It’s Worth. 1934
  4. Bridgman, George B. Constructive Anatomy. 1920

--

--

James Buckhouse
Design Story

Design Partner at Sequoia, Founder of Sequoia Design Lab. Past: Twitter, Dreamworks. Guest lecturer at Stanford GSB/d.school & Harvard GSD jamesbuckhouse.com