cool stuff.

Sketching

Evolve faster — with markers

Regardless of the tools involved, your ability to translate ideas from thought into shape is a communication superpower.

Updated August 01, 2019

When it comes to communication, fewer things are harder to grasp for other people than the ideas that are brewing inside of your head. While we try to explain ourselves, words are often woefully underequipped to do the work that a straightforward drawing can accomplish.

Whether at a whiteboard or on a scrap piece of paper, the ability to sketch ideas into reality is one of the best communication tools you can possess.

Sketching also allows you to rapidly adjust and morph these concepts while they are still malleable. By quickly exploring the options around our ideas, we dramatically increase the likelihood that we’ll generate something useful.

The popularity around Sketching is easy to understand. It’s a lightweight exercise that requires little investment of time to generate potential solutions. The low cost/high reward nature of the method is critical to your success. As we invest more effort into our concepts, we become significantly less likely to consider other options fully.

In short, product design without Sketching is a huge mistake.

Nearly every tech company you will encounter employs some usage of Sketching, with whiteboarding being a common practice among teams. Whiteboarding also shows up during many job interviews.

Sketching is typically tricky to kickoff because the mind often goes blank as it migrates from one use of data to the next. Much like the struggle to create your first persona, the first sketch will often feel like it is being pulled out of quicksand — fighting to stay trapped inside your head. However, once you extract your first attempt, the subsequent iterations become easier to sketch out.

More than just pen and paper

Two things are likely to come to mind when the term ‘sketching’ is brought up.

Our mind is first drawn to a simplification of tools, specifically pen and paper. It is important to remember that Sketching is a technique, not a specific tool. While your sketches could be on paper, they could also occupy space on a whiteboard or applied to a screenshot. Don’t wait for a particular tool to present itself to get started.

The second direction we often leap to is art. Painters and illustrators have carried sketchbooks for centuries, so naturally, we associate sketching with creating masterpieces of art. That’s unfortunate because the inclusion of art often instills fear into those who do not consider themselves to be ‘artists.’

Oddly enough, the simple sketch serves the same essential purpose for both artists and designers — to quickly extract what we are thinking into a form that exists in the real world. How the two groups utilize sketching is where they diverge. For artists, Sketching is often an internal exercise that allows for study and consideration. For designers, Sketching is an external exercise meant to facilitate communication and exploration.

Sketching alone won’t likely be a useful product design method for you without employing a few restraints engineered to extract maximum value. The following guidelines are suggested to get the most out of your sketching sessions.

Against the clock

Without guidelines for a sketching session, most of us would likely noodle on the same item forever in our quest for perfection.

The beauty of Sketching is that you aren’t reaching for perfection; you’re merely trying to convey an idea to others. To develop a feel for the amount of time needed to create a sketch, you should first set an alarm. A timer limits you from ever having enough time to get too detailed with any particular sketch.

The time you allot for a sketch is directly proportional to the number of sketches you are trying to create. If you’re producing a page of thumbnails, set the alarm to ring every 30 seconds. Are you creating interface sketches with a bit more detail? Have the bell ring every 3 minutes.

What you’ll find is that after about 20 minutes, you’ll exhaust your immediate supply of ideas around the assigned task. Either take a few minutes to recharge or move to another task and begin sketching again.

Detail impossible

When you’re trying to communicate a concept, it’s the idea that matters — not the details. Sketching is about the concept, so the more detail you add to your work, the less effective the sketch is.

Relying on time to limit detail is troublesome because we all tend to ask for more time. Five more seconds is all it takes to ruin the effectiveness of a sketch. Because we often ignore time, you need another tool to make it virtually impossible to add too much detail.

You need a big fat marker.

When you try to add detail with a marker, it merely makes a blob on the drawing surface. So you naturally begin to adjust the fidelity of your sketches lower and lower until you reach a point that conveys your idea with enough detail for the people around you to understand. You spend less time on each sketch, which speeds up the pace of your idea generation.

This approach works great on a whiteboard, fine with Sharpies (careful not to bleed through the paper), and can work on tablet devices that are correctly adjusted.

The essential tools

When you are operating with a low level of detail, it helps to adopt a simple visual language to communicate your ideas. The shapes you employ when creating sketches translate the type of information your design will eventually hold.

basic-tools Source: newpragmatic.com

Boxes are used to depict intended visual elements. A box with an X inside of it means a photo, icon, or illustration is intended for use there. You should only use this when you have an idea of what the image or icon would possibly be. One of the quickest ways to ruin the feasibility of a sketch is to include a visual element where no viable options are available. A box holding a triangle typically indicates the placement of a video.

Boxes also appear just for organizational purposes as the internet is just a series of boxes, which is the magic of boxes. You can make forms, calendars, calculators, and a billion other things by grouping boxes together in different ways. In short, you’re going to draw lots of boxes.

Type does play a role, but your usage should be limited to the most substantial typographical elements of your design. Generally, you will use large type with a series of lines underneath to indicate associated text.

Shaded boxes are common to use for boundaries and buttons. You can use type inside of these elements but do so sparingly to maintain your pace.

Linework might not show up in the final design, but they make it easy to indicate a division of space. As you layer on more visual design elements, your reliance on linework should fade, but that isn’t logical when you are making simple sketches.

Annotation around the edges of the sketch is thoroughly encouraged! While they should not impact the legibility of the work, liberally adding notes to indicate what is happening is a good thing. However, you should only annotate your sketches after you have completed a sketching session so that you’re able to maintain momentum.

Volume of ideas

While time and tool play a role in determining how you will sketch, so does the amount of space that you allow yourself to work. Whether standing at a board or sitting at a desk, how you opt to use the space available will play a significant role in the number of ideas that you can generate.

Thumbnails are the smallest useful size for sketching out concepts, but they are often too small for usage in product design. I’d limit the usage of thumbnails to mobile and watch interfaces or more creative pursuits like logo design.

4-up are created by taking a single sheet of paper and dividing it into four rectangles. In doing so, you have effectively reduced the amount of space to an ideal size for sketching interfaces with just enough detail to be useful. You can use any sheet of paper to get started, but I suggest simply using the standard letter size (8.5x11”). Your goal is to fold the paper so that it creates four rectangles for use. There are also templates that you can download and print to produce the same boundaries, without creasing your drawing surface.

Seeking feedback

As stated above, Sketching is meant to be a communication exercise in the world of design. Your work isn’t complete until you’ve discussed it with other people.

I’m not suggesting you stop to seek out feedback after every sketch that you make — but you should discuss the work before moving forward. Once you begin refining these sketches, you have officially begun investing more time which makes you less likely to consider other possibilities.

The simple act of inviting others into our thought process forces us to acknowledge the shortfalls of our initial concepts. Your initial sketches should be of low enough fidelity that they will likely require some discussion for your peers to understand them. Listen to yourself as you describe the work, and to the questions you receive. In the banter, you’ll find the holes in your work that the mind was happy to gloss over.

Exercise

In this chapter, we covered the basics of sketching for idea creation. Regardless of what you are trying to communicate, mastering the art of lo-fidelity iteration will save you time and effort.

For this exercise, you’ll utilize the Priority Guides and Microcopy you created to inform the sketches you create. Using the 4-up exercise template, you will create four different approaches for the desktop version of the project homepage. While your sketches will be lo-fidelity, you should make use of all content present in your Priority Guides.

While you will have slightly less information to guide your product pages, this is a great time to sketch out some approaches for that as well. Using the 4-up exercise template, create different concepts for the product page.

Upon completion, update your Program Journal with links to any assets produced in this exercise. Post your journal in the Feedback-Loop channel for review.

///

Up next Wireframing

New Pragmatic’s Intro to Product Design and UX Design courses are now open for enrollment — but don't wait! Space is limited.

Sign Up Now