Principles of Product Design
03

Pencils before pixels

Think divergently

Listen to Chapter

The work of the modern designer lives in the abstract world of the computer, where every move we make is precise and effortless. Precision has its place, but not in the early stages of the creative process, when our ideas are still nebulous. There’s danger when creative exploration starts with perfection.

Perfection can create the illusion of certainty, something architect Frank Gehry avoids as he begins a project. It’s discovery he craves. Craig Webb, Design Partner at Gehry Partners, has heard Gehry say many times, “If I knew where I was going, I wouldn’t go there.” To Gehry, peak creativity lies in the unknown.

His process begins with rough concepts. He and his team sketch, make models, then reflect. If the outcome isn’t right, they throw it out to begin again. Crude outputs early on make the work less precious and completely malleable.

The hundreds of models and sketches that cover the walls and surfaces of Frank Gehry’s studio are the artifacts of a creative process that starts wide, where there’s space for discovery of the best ideas before committing to a single direction.

Though Gehry’s work is unique, his process is not. Many creative thinkers start wide and narrow down. Unfortunately, many software design teams take a different approach—they start narrow and refine too soon.

Steve Jobs once famously likened the computer to a bicycle for the human mind. Computers help us make short work of complicated tasks and connect us to vast amounts of data—superpowers indeed, but when misapplied they can hinder the creative process.

Computers let us jump straight to pixels—a space of precision where everything aligns to a grid, vividly colored and fully formed. Precise outputs are precious and hard to abandon. This narrows creative exploration to just a few ideas well rendered.

To find the best design solutions, we should follow Frank Gehry’s lead: crudely render many ideas to find the solution worthy of a more precise investigation.

We can make more space in our creative process for critical thinking and better design by putting pencils before pixels.

The power of a pencil

The pencil is a humble tool that’s sparked millions of great ideas. It’s the inverse of a computer; it’s simple and limited in functionality, but its limitations make it effective.

Pencils are important to the creative process because:

  1. Pencils are inclusive. They’re not just for designers—anyone can use a pencil to express their ideas clearly. The pencil is the great equalizer.
  2. Pencils are low-fi. Quick sketches give no impression of a complete thought, signaling to all that it’s okay to offer feedback.
  3. Pencils aren’t fiddly. Instead of getting lost in software settings or style, you’ll focus on your ideas.
  4. Pencils are fast. You can explore vastly different solutions to the same problem in minutes, and you won’t feel bad throwing your sketches out because you invested so little time.

There’s a magic that happens when we put our ideas on paper. Dave Gray, Founder of XPLANE and co-author of Gamestorming, describes sketching as “a conversation with yourself.” Gabriela Goldschmidt, professor emeritus at Technion Israel Institute of Technology, made similar observations in a study of the sketching practices of architects published in the Creativity Research Journal. She discovered that although sketches start from ideas already within the mind, they can mutate into the unexpected—forming new ideas. Sketching is a thinking activity!

Many product designers already know this intuitively. Stanley Wood, Design Director at Spotify, told us, “Many of our designers sketch, but just so they can think through various ideas. Most of the time they don’t show them to anyone.”

And sketching, of course, is also a powerful communication device. The design team at Slack shares sketches with colleagues to invite conversation about concepts without getting distracted by style.

The MailChimp design team discovered that sketching is an important bridge to engineering colleagues. Todd Dominey, MailChimp’s Director of Design, noticed that “Pixels freak people out!” When engineers see a high fidelity design comp, they get the impression that the important decisions have been made without them, and now they’re expected to simply execute the design. But when a sketch is presented, it’s clear that the creative process is still wide open for their participation.

No art degree required

Depending on your background, the term “sketch” might conjure images of an artist in a Parisian cafe, leisurely capturing a scene with loose lines and precise shading. But you don’t need a beret or an art degree to sketch a quick UI or communicate an idea for a product (a cappuccino won’t hurt, though). If you can scribble some text and draw boxes, you’ve got all the skills you need to sketch.

Sketching is something anyone can do—it’s not the sacred territory of designers. Inviting others to participate in the design process will help you produce a more diverse set of design solutions. Engineers, product managers, executives, lawyers—anyone with a stake in your product—can help you turn abstract ideas into concrete solutions by sketching.

Sketching ideas together

A simple activity with tight constraints can be the catalyst you need to get your team comfortable. Todd Zaki Warfel, Senior Director of Design at Workday, created a team sketching activity called 6-8-5: you and your colleagues will generate 6 to 8 design solutions per person in just 5 minutes. No one will have enough time to get lost in fancy renderings, and that’s important. After all, the idea is to focus on ideas and ditch misgivings that “I can’t draw!” In this exercise, everyone’s sketches will be messy!

Here’s how it works

    1. Get your team together—designers, engineers, product managers, and experts with important domain knowledge. Limit the group to 8 or less to keep the discussion productive.
    2. Give each person a sheet of A5 or 8.5” x 11” paper. The paper will be folded 3 times to create 6 boxes (for 6 sketches). If you want to generate more ideas, fold the paper into quarters and give everyone 2 sheets.
  1. Frame the problem for everyone, and clearly state the desired outcomes of this project. “We want to help customers become active in this app more quickly. How might we achieve that?”
  2. Set a timer for 5 minutes, and instruct everyone to sketch solutions individually (and silently, to help everyone focus).
  3. When the timer goes off, it’s time for each team member to present his or her ideas. Conversation about each idea is important here. Critical feedback will help you see what ideas are best. Every team member should be given the opportunity to share sketches.

If time permits, you can do additional rounds to go deeper into each idea. Working together to solve problems gives everyone shared ownership in the product vision and generates great results because so many diverse perspectives are present.

You might be wondering why everyone’s sketching separately in this exercise instead of together on a whiteboard. According to repeated studies on group brainstorming work, we produce fewer ideas and of lesser quality when we work in groups. Keith Sawyer, a psychologist at Washington University, has summarized the science: “Decades of research have consistently shown that brainstorming groups think of far fewer ideas than the same number of people who work alone and later pool their ideas.”

Remember, early in the creative process we’re best served by covering as much territory as we can instead of going deep on 1 or 2 ideas.

The right tools at the right time

The tools you use to sketch can influence how fast and far your creative explorations proceed. With fine line pens and mechanical pencils, you’ll be prone to create detailed sketches, which are slower. To avoid slipping into detail early on, Jason Fried, co-founder of Basecamp, uses fat markers for sketching on large format graph paper. With fat markers, it’s pretty hard to draw a detailed UI. Instead, you have to focus on the workflow and how people will use your product.

Dave Gray, founder of XPLANE, speaks with Jason Fried of Basecamp about how he explores ideas through sketching.

As ideas are refined, a medium Sharpie or—my favorite—a Staedtler Triplus Fineliner can help you explore your ideas with more precision. Loose paper works best for sketches, as they can be shared, posted on the walls, or mercifully recycled rather than lingering for posterity in your sketchbook. Designers who sketch UI concepts in detail find Copic gray markers add depth and clarity to sketches.

Sketching with remote teams

Team sketching is an important part of the creative process at Lullabot, a creative agency that serves clients like SpaceX, The Grammys, GE, and Martha Stewart. Each new project they take on starts with a sketching session, but not of the sort described above—this design team is entirely remote.

Creative Director Jared Ponchot has devised a simple and inexpensive way to sketch as a team despite the distance that separates them. He bought each designer a simple USB document camera, the IPEVO. At just $60 each, Jared even buys the cameras for engineers, clients, and other key collaborators in the company so they can participate in early sketching sessions.

Like many remote teams, Lullabot runs their meetings via Google Hangouts. In their meetings, they share sketches by simply switching the camera source to the IPEVO. Each team member can walk others through their ideas, or sketch live to explain a new concept.

Ponchot’s solution is simple and effective. It keeps his team focused on a breadth of design solutions early in a project instead of jumping straight to pixels, where they would get lost in execution.

Related: Freehand–a fast, flexible new way to collaborate in real time

Ideas before execution

Sketching before we jump to the computer has many benefits, the greatest of which is that sketching keeps us laser-focused on ideas instead of the charms of design execution. Design is often described as the act of solving problems for others. We cannot live up to that mandate if polish eclipses exploration in our creative process.

Putting pencils before pixels can help you bring others into the design process and win you allies. Gaining the broad perspectives of your colleagues early on will also help your team produce better design solutions.

Here’s your to-do list to put pencils before pixels into practice

  • Generate dozens of ideas on paper before designing on the computer; sketching is a thought process that will help you discover the unexpected.
  • Get engineers, product managers, and other key stakeholders to sketch with your team in the early phases of a project. This will clarify the project for all, and create a sense of shared ownership.
  • If your team or clients are remote, use USB cams to share sketches and ideate as a team.
  • Constraints like fat markers or time limits on sketching can help you avoid getting lost in detail too soon.

About the Authors

Aarron Walter
VP Design Education, InVision

As the VP of Design Education at InVision, Aarron Walter draws upon 15 years of experience running product teams and teaching design to help companies enact design best practices. Aarron founded the UX practice at MailChimp and helped grow the product from a few thousand users to more than 10 million. His design guidance has helped the White House, the US Department of State, and dozens of major corporations, startups and venture capitalist firms.

He is the author of the best selling book Designing for Emotion from A Book Apart. You’ll find @aarron on Twitter sharing thoughts on design. Learn more at http://aarronwalter.com.