Have you tried communicating your designs to your colleagues and stakeholders , only to realize later they’ve misunderstood what you meant? Have you found yourself stuck in a design, unable to see alternative approaches? Are you sure you’re working on the most optimal solution, or are you working with the only available design? One humble tool — sketching — can help you address these issues! Let’s see how.
Sketching is a distinctive form of drawing which designers use to propose, explore, refine and communicate ideas. As a UX designer, you too can use sketching as your first line of attack to crack a design problem.
“… there are techniques and processes whereby we can put experience front and centre in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching.”
— Bill Buxton, HCI pioneer and partner researcher, Microsoft Research
In the digital age where it's easier than ever to create flawless graphics, flowcharts and interfaces, sketching holds its own.
In this video, ace designer and illustrator Mike Rohde highlights why nothing can replace the power of paper.
Show
Hide
video transcript
00:00:00 --> 00:00:32
Let's talk a little bit about the *benefits of sketchnoting*. There's this ability to *retain information that you learn*; so, that's a real benefit. And then, of course, it allows you to *use your whole self for note-taking*. Instead of just writing text or typing, you're using your whole body, you're using your visualization and your thinking and analytical skills, and your listening skills, most importantly, to capture information
00:00:32 --> 00:01:02
about what you're learning and what you're understanding. So, one of the things that I want to touch on a little bit is the reason why we talk a little bit about paper before pixels. I'm a big believer in this concept. And the reason I say that is because I think paper and pen is really *cheap* – like you can burn through lots of paper and pen, and then you can recycle the paper. And it's a really quick way to get ideas down without spending a lot of time investing in Photoshop or XD or Sketch or whatever tool you happen to be using.
00:01:02 --> 00:01:30
I think the other thing that I feel like is software tools limit you to what they can do and not *what you can imagine*. So, when you start using software tools, you can sort of fall into a pattern of things you've done before, things you've seen before, and then you're sort of locked into what the software allows you to do. Where I think paper and pen allows you to be a little more *free-form* and explore ideas. Two other things I like about paper before pixels is I think *rough sketches*,
00:01:30 --> 00:02:00
when you share them with a group, *invite people into the discussion*. When you provide a finished, beautiful mock-up that maybe is even interactive, sometimes people can feel like, 'I didn't have any part of this. This is already done.' And that leads to the other part – people don't feel like they can give you feedback about your idea when it's so finished that it looks like it could be real. There's sort of a hesitation like, 'I'm going to ruin Mike's work! He did all this work. I can't tell him feedback because he'll have to tear it apart and do it over again!'
00:02:00 --> 00:02:18
When you use sketches, this isn't even on the table. We're all just exploring ideas. So, I think this is really important to think about, when you think about *ideation especially*, is to consider doing paper before you do the pixels, or, in the case of if you have an iPad Pro and a pencil, maybe using pixels in a unique way.
Sketches are easy, fast, and cheap to create, iterate, and if needed, even discard without much effort. Unlike written or verbal communication, sketches sidestep rules of grammar and help clearly communicate ideas, all but eliminating misunderstandings. And the best part, they are a joy to create and document!
Sketches vs. Prototypes Some designers may assume the role of sketches in the design process is the same as that traditionally associated with low-fidelity prototyping, but that is not the case.
Sketches and prototypes have distinctive roles in the development of a design concept and its refinement. You should use them at different stages. Draw sketches first in the exploratory stages of a design to propose, refine, communicate and critique your ideas in a “tangible” format. Later, use low-fidelity prototypes to test broad concepts and specific features.
The role of sketches and prototypes is complementary , but not interchangeable. Because prototypes demand a larger investment, we can’t and shouldn’t produce as many prototypes as sketches.
Sketches and prototypes have different uses in the design process.
© Interaction Design Foundation, CC BY-SA 3.0 The design funnel below illustrates the iterative and exploratory nature of sketches during the ideation stage of the design process. As the right design comes clearer into focus (the narrowing shaded trapezium), the costs of the product development cycle (arrow) increase. Increased costs prevent you from fundamentally altering your design choices. Use sketches during the initial, ideation phases. Towards the later stages of the design process, apply usability engineering on more refined and costly prototypes that can simulate the expected functionality .
The design funnel illustrates the use of sketching to identify the right design, and the application of usability methods to refine the design. As investment increases (arrow), you lose the ability to make major changes to the design selected.
© Interaction Design Foundation, CC BY-SA 3.0 Getting the Right Design Use sketching in the early stages of the design funnel to explore multiple design directions at low cost. Refrain from developing low- or high-fidelity prototypes at this stage. Discard promising leads that, upon closer inspection, are unable to meet your problem requirements.
In the early stages of the design process, you should explore multiple design ideas simultaneously to identify the right design. Sketching out alternatives is the fastest and cheapest way to explore ideas.
© Interaction Design Foundation, CC BY-SA 3.0 If you focus on a single design idea prematurely, you narrow your opportunities. While it’s possible that you may identify a good design from the development of a single idea, you cannot confirm whether other ideas (that you never explored) may have provided a better solution to your problem.
Moreover, if you present only one design to users, they will provide a biased input. They will try to be polite and not offend you, even falsely praising your solution, instead of comparing different ideas and sharing genuine feedback.
Getting the Design Right Once you have identified the right design, you should continue revising and reviewing your chosen design through additional sketching to ensure it’s an optimal design solution to your problem.
At this stage, you should apply usability engineering iteratively to build, test and evaluate your selected design. Every usability cycle would thus ensure the design converges on the optimal solution without major changes.
Refine the right design through an iterative usability approach.
© Interaction Design Foundation, CC BY-SA 3.0 Design and usability processes are complementary but not the same. Design explores a space of possibilities to identify the right design or solution to a problem from competing alternatives. Usability engineering sharpens the selected design, ensuring it satisfies all relevant usability criteria (i.e., getting the design right
Ideas, Not Art — The Five Elements of Drawing You can convey meaning and ideas through the simplest of shapes: squares, triangles, circles, lines and dots.
© Interaction Design Foundation, CC BY-SA 3.0 Sketches help you propose, explore, refine and communicate your design ideas . Not all drawings are sketches. As Mike Rohde emphasizes in the next video, your goal is to communicate ideas, not create art.
Sketches are:
Quick: Don’t invest a long period producing them.
Timely: Produce them when and as the need arises.
Disposable: Rely on their usefulness to explore a concept and not on their production costs.
Plentiful: Produce sketches as a collection that explores different aspects of interaction over time.
Minimalist: Use sketches to clarify one concept at a time.
Grab a pen and paper and get started with sketching along with Mike Rohde:
Show
Hide
video transcript
00:00:00 --> 00:00:30
So, the way we get into drawing simply is by using what I call the *five basic elements of drawing*. And I think these are really important, especially if you are coming to this course and you feel like "I can't draw"* – remember the asterisk – "as well as I would like." So, the important thing about this is this changes an approach
00:00:30 --> 00:01:00
to your drawing; it moves it away from art and to ideas. So, my mantra is "Ideas, not art." And I think this is a foundational part of what I believe in. Not that there's anything wrong with art; it's just that art has *baggage* with it. You can draw like a little suitcase here. Art has baggage. It has baggage from junior high school when someone drew better than you or you felt like your drawing skills were not as good as you wished they were.
00:01:00 --> 00:01:32
And that's very natural. So, we're here to help you through that. So, what are the five basic elements of drawing? Well, the first one is a *square*; second, *triangle*; third is a *circle*; fourth is a *line*; fifth is a *dot*. So, the square of course can be a rectangle or something like that. A triangle can be all kinds of shapes.
00:01:32 --> 00:02:00
A circle can of course be stretched into an oval. Lines don't have to be straight – they can be squiggly. And if we really wanted to talk about it, the dot is really the foundation of all these. These are all dots that are lined up in a certain order. But it's much easier to remember five elements. And there's also a reason why I chose five elements – it's because they're easy to remember when you're in the heat of the moment.
00:02:00 --> 00:02:30
So, let's flip the page here, and we'll go to drawing with these five basic elements so you can see how this mindset works. All right, so let's draw with the five basic elements: square, triangle, circle, line and dot – any order. I just happened to choose that order. Now what I'm going to do is show you what I mean
00:02:30 --> 00:03:01
by this simple way of drawing. So, let's start with a simple one. So, if you have your pen, write 'house' here. I'm using green to set it apart from the drawing. So, on a house you can get away with – if you want to call it that – a square and a triangle on top. Right, that would be enough to communicate the idea of a house. But you can go further, and you're still using these same elements.
00:03:01 --> 00:03:32
You use a rectangle, which is – you know – a stretched square. You can do a line here, and now you've got a window on your door of your house. A dot can be your doorknob. You can put another window up in the attic, let's say, and then a rectangle for a smoke stack or chimney. And then, finally, what about a curvy line? And that would be the smoke coming from the chimney. And now you've got a house. So, you can see it can be as simple as two objects or many objects based on the time you have. And the cool thing about it is
00:03:32 --> 00:04:01
you could start with a very simple one and after you do your sketchnote you can come back and fill those in. So, let's do another one; let's do 'book'. How would I communicate 'book' in the simplest form? So, one thing I'll say about this approach of five basic elements of drawing is it's a little bit of a game. So, you can see here I've done a rectangle and a line down the middle or two rectangles next to each other, I guess you could say. It's very, very simple, but it communicates the idea of a book,
00:04:01 --> 00:04:30
especially with the word below it. And this is really important. This idea that *words and pictures work together* in Sketchnoting is really critical. It's really important because you have the power of both and they support each other and they add to each other, which is a positive. So, you can see I could stop here. So, the game is: how *few elements* can I use to communicate an idea? It's a little bit like the game Pictionary – how few things can you use to draw to get your team to recognize? – a similar idea in some sense.
00:04:30 --> 00:05:02
But you can also, just like with the house, *add more detail*. So, let's add another line below and connect it. And what you may notice is, even though it's just a two-dimensional drawing, what I just did sort of suggests to your mind that you're actually seeing dimensionality. This can really be reinforced if you have, say, a gray marker and you run a gray marker here. It reinforces it; there's shade here; that there's depth, light's on the top, shade on the side. But all you've done is drawn a line and connect it.
00:05:02 --> 00:05:33
So, when you start thinking about that, really what you're doing is you're *providing enough information* for your brain to *interpret* this object as something. And that is a huge weight off your shoulders because now you don't have to be a great artist; you simply have to draw this object well enough that your brain can interpret it properly. So, let's add some more detail, so books have text on the pages. Now, this is quite small, so I wouldn't try to draw text, but we can do lines, and now this suggests that we've got text on the page.
00:05:33 --> 00:06:03
Some books also have images. So, let's draw an image – a square. I'll put a triangle in there – maybe it's a photo of a mountain – and then finish with two more lines. So, now it's getting the feeling that it's a book with text on the pages. There's a picture, and it's got some depth to it, which is kind of cool. Now, the third one I'm going to show you is coffee, one of my favorite drinks. So, you might start thinking if you're going to draw coffee, now you have to think about
00:06:03 --> 00:06:32
perspective and circles and "Oh, I'm not good at circles!". Here's another trick around this approach: stay *two-dimensional as long as possible*. This really reduces the stress on you. And if you can communicate an image in two dimensions, then do that. Don't feel compelled to draw in dimensionality or in proportions if you're not comfortable with that yet. That may be a later skill. So, stay two-dimensional as long as possible. And I'll show you what I mean by that.
00:06:32 --> 00:07:00
If you have a cup of coffee – let's say it's one of these cafeteria cups – why can't you just simply use rectangles and draw the side view? It still will represent as a cup of coffee. So, let's do a half circle here and one inside, so now we've got the handle on the coffee. And then, finally – just like with the house – let's put a little vapor coming off of it. And now you're implying that the coffee is hot. There's a little bit of vapor coming off of there.
00:07:00 --> 00:07:34
If you happen to be a tea drinker, well, all you need to do is write the word 'tea' below here, right? The beautiful thing about this is you're staying simple. It turns into a bit of a fun game to see how few elements can you use to represent the idea of something. It's representative. It's a simplified version. You're *not going for realism*. It *doesn't have to be beautiful*, but it *must communicate the idea* to other people or at least to you if the sketchnotes are for you. So, I think that's really important to think about as you're doing this drawing
00:07:34 --> 00:08:03
and you're seeing how it can impact the work that you do. What I want to talk about now is what happens when you start to practice drawing with these five basic elements. You're effectively building a visual library. What I mean by that is the more often that you draw objects repeatedly, you will then build a library of those objects in your mind.
00:08:03 --> 00:08:30
Now, you can of course have it on a piece of paper that you slide in the back of your notebook, just like this, if you wanted to make a collection that way. But as you draw these things over and over again, you start to build that library in your head. So, finishing the food theme next to my coffee or tea, let's talk about pizza, and specifically a slice of pizza. So, you might be tempted to simply draw a triangle. I would avoid that.
00:08:30 --> 00:09:03
And the reason why is, a slice of pizza really comes from a whole pizza – you should do a curve here, do a second curve in parallel, and now you've got crust. Now, remember the trick I taught you around the book. We can do the same thing here. You just draw another line below there, and now you've got depth to the pizza crust. Now, the other thing I'll show you is if you're going to draw, let's say, pepperonis, have them partially on the pizza. Maybe there's one here. I can fill them in with some shading;
00:09:03 --> 00:09:31
just some lines to give them some depth. And the reason that I say you use a curve is really like – you know – this slice of pizza is coming out of a circular pizza. So, you're reinforcing that it's a piece of a whole without even having to say those things. So, there's a really simple way to draw a slice of pizza. So, what's really interesting is you can actually build quite a few icons. So, let's do a little icon drawing, and then I'll label afterwards to show you
00:09:31 --> 00:10:02
how you can build a visual library that you can use over and over again. If you're someone like me – I'm a designer and I live in the world of deadlines – so, five o'clock on Friday is often a deadline for me. So, I can simply use this symbol in the sketchnotes that I do or the notes that I'm taking to represent a deadline that's upcoming. What about *ideas*? If I have an idea – let's say I'm taking notes about some other subject – I would draw like a little lightbulb like this,
00:10:02 --> 00:10:33
and that could represent an idea really quickly. If I have a challenge of concerns about a project – let's say I'm in a meeting taking notes – I'm very concerned about the timeline. Maybe I make the deadline on Friday, but the overall project is still behind. This would be what I would say 'alert'. And this can clue me into delays or problems of all kinds that might be happening, and I want to indicate that. So, very often for these, I'm actually using
00:10:33 --> 00:11:01
these in the notes that I'm taking; so, if I'm taking notes, more detailed notes, I'll sprinkle these in there. And what they do is help me identify when I scan through my notes, *actions*. So, what's the action here? Deadline on Friday; make sure it's on my calendar; make sure all my tasks are in order and that I'm working toward that Friday deadline. I have an idea. Maybe I need to sit down and write for an hour to express this idea so I don't lose it. But I would write enough that I could represent it later.
00:11:01 --> 00:11:33
So, the next task here would be to sit down for additional time and fill out the details of that idea in a sketch by writing whatever that is. This alert might suggest to me that I need to talk to my co-workers about issues that we see long term around this project that seems to be losing track – like it's falling behind; how can we address this? Is there something we can move back and accelerate this project to get it back on track? So, the last thing that I'll show you is a very useful tool for coming up with icons to build your visual library.
00:11:33 --> 00:12:01
And that is TheNounProject.com. This is a website where you can go, you can search any kind of term, and there will return not one but many different ways to interpret that idea as an icon. And this can be really helpful in building your visual library. If you're looking for certain objects that you use all the time in your work or in your personal life, this can be a really useful tool. I would say the second tool that's good for searching is just Google.com.
00:12:01 --> 00:12:34
And then focus on the image tab when you get the result that you're looking for, and then images will come up. And these can be helpful for just sparking your ideas around how you can simply communicate this concept. So, these are two really helpful ways to think about building icons and building your visual library. The last thing I'll say is if you're in a specific profession, it could be really valuable for you to take time *every day* and *every week* to sit down and make a list of all the words you would love to have icons for
00:12:34 --> 00:13:00
and then build those icons so that you've got those ready to go. And then have a reference that you carry with you. And as you get into meetings, you can have that reference out and you immediately have a symbol that represents those concepts that's always with you. And then, eventually as you do those more and more, you won't even need the card anymore; it'll be burned into your memory, and you can pull those out at a moment's notice on a whiteboard, on your notes, on whatever it is that you want to use.
00:13:00 --> 00:13:26
So, that is a really valuable way to think about drawing in a very simple way and to build your visual library – two really key parts to this whole Sketchnoting thing – because I believe if you can make it over the hump of not drawing as well as you'd like by focusing on ideas like this, then you'll be in a really good position to do the rest and feel confident and move forward and experiment and try things, which we're going to do.
Enhancing Sketches — Annotations, Arrows and Notes Annotations, arrows and notes increase the communicative power of your sketches.
© Interaction Design Foundation, CC BY-SA 3.0 Your sketches and accompanying text must communicate your entire design rationale to you and your team. All the following elements play their part in explaining your sketches and the objects, actions and emotions they represent.
Annotations – These are names, labels and explanations located next to different parts of a sketch to expand and clarify the meaning of any element depicted. Tie annotations to different elements in your sketch using arrows, braces, numbering and spatial proximity. Write your annotations using a different color that contrasts with the sketch proper.
Arrows – Apart from pointing to specific elements in a sketch, use arrows to illustrate interaction flow, a sequence of events, movement and direction.
Notes – Any text, long or short, that provides additional insight into your sketch is a note. Use notes to do the following:
Provide detailed explanation of the action or sequence illustrated.
Describe an idea derived from an illustration .
List unresolved issues.
Explore design elements not depicted in the sketch.
Clarify the purpose of each element you present, especially non-static ones.
Keep a record of your thought process when you first draw a sketch.
Build Your Sketching Muscle Memory The best way to gain confidence in sketching is to practice. Use sketching to capture the ideas and/or designs you encounter in your daily activities. Other people’s designs are concrete examples of solutions posed to challenges under different constraints. Add them to your knowledge bank to remix, influence, inspire or steer your own ideas in different — and perhaps unexpected and innovative — directions. To help you in this process, we introduce below two simple approaches to collecting virtual and real-life designs.
1. Scribble Sketching The idea behind this technique is to capture, as fast as possible and with the broadest of strokes, the essence of the object, design or action you are trying to preserve. Leave out non-important details, decorations, text and other non-essential elements. Include textual annotations (see previous section) in your scribble sketches to clarify functionality.
Capture with “broad strokes” the essence of the object, design or action you are trying to preserve.
© Interaction Design Foundation, CC BY-SA 3.0 Make a habit of always carrying a notebook to keep a record of objects, designs and actions that provoke or inspire you. Since you are the main audience of the scribble sketching technique, don’t feel forced to strive for fidelity. You should only provide a level of detail that is good enough to prompt your memory afterwards. Those rough etchings thus serve as a bank of ideas and skeletons you can eventually refine into powerful final versions.
2. Sampling with Cameras The goal of this technique is to use still photos and video to capture some features of the world. You can easily capture samples during your weekly grocery shopping, while running your favorite route, on your commute to work or when you meet friends for dinner. Capture objects, designs and actions that delight, inspire and irritate you.
Create a Record of Failed Design Efforts Keep a record of failed design efforts. Gather objects and situations that annoy you. Write down the reasons behind this negative effect. This exercise will help you develop a critical eye. A critical eye will allow you to identify even the shortcomings of your own work. In doing so, you will develop and show more sophisticated design skills.
Create a Record of Successful Design You should also keep a record of successful design. This will help you draw inspiration from multiple domains to ground your design work on features other than those of the digital realm.
The Take Away Sketching is a time-tested approach to propose, explore, refine and communicate your design ideas. Sketching should be your first line of attack when faced with a new design challenge. Unlike prototypes, you should produce sketches in abundance, on a very low budget and with just the right amount of detail in the early stages of the design process. Use sketches to explore multiple design directions simultaneously. Refine your chosen design with the standard tools of usability engineering to ensure it satisfies all relevant requirements. Sketch, sketch, sketch!
References and Where to Learn More Researchers from the University of Toronto and Microsoft Research conducted an experiment: They compared “usability testing of a single interface versus three functionally equivalent but stylistically distinct designs” and found that users were more reluctant to criticize a single design, than when presented with the same design in a group of three. For more on this fascinating study, read this paper, “Getting the Right Design and the Design Right: Testing Many Is Better Than One .”
For more on sketching in UX design , we recommend the following books:
Sketching User Experiences: Getting the Design Right and the Right Design by Bill Buxton
Sketching User Experiences: The Workbook by Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton.
Images © Interaction Design Foundation, CC BY-SA 3.0
