Sketches in UX/UI Design

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

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.

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.

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.

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

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.

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

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,

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.

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.

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.

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

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.

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.

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

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.

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.

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;

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

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,

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

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.

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.

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.

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

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.

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.

What are sketch notes? Some of you may know what these things are. Some may not. I think of them, I call them “Notes Plus” sometimes because it's It's not like you stop writing notes. What you're doing is you're adding to your writing with lettering. So that might be your first step, is to do lettering. The next step could be drawing, and then you're focusing on the big ideas. That was the big understanding and realization for me as I began this work was because I was doing the analysis as I was listening,

as I was writing, as I was drawing, as I was doing lettering, that I started to really make sense of things in the moment. And then all I was doing is capturing what was entering my mind. And the beauty of that was, back in the old way I took notes, I would write all these notes and then I didn't want to look through them anymore. So the benefit of this was, by doing it all in the moment when you're done with the session you're in or the the whatever time you're spending, your notes are ready to go, and then you can, of course, modify them.

But the bulk of the work is done in the moment and you don't have to go back and like parse out what's valuable and what is not. So that's a really important thing to think about. People will say “I've been doing that for years, I never knew what the name was”. So having a name sometimes can be valuable, but really it's this idea of expanding beyond just writing words to adding visuals, whether that's lettering, which is a visualization of letter forms, or if that's drawing the things that are entering your head, drawing things from the PowerPoint deck that maybe someone's presenting, or if it's in a case of an experience or,

you know, ideation, what are the things that are entering your mind that you can then put on the page or on the screen to help you remember that concept. So you might ask, “Well, why should I bother with this extra step of sketch noting?” Well, in my in my experience, I remember a lot more of the of the things that I experience when I sketch note them, whether that's a talk at a conference or if that's an experience of a meal

or traveling or any other experience that I decide to visualize. There's something that's going on in our brains where the hearing and the writing and the drawing cements that idea. And I can look at sketch notes from years and years ago and still remember a lot of details around that moment when I took those notes. So that's a benefit. I think it helps you retain more. So if you take this approach because it's such a high, high detail moment where your brain is processing all this information and you're using your whole body, I believe that there's retention happening

that makes what you remember last longer. So you can call it back into memory in the future when you need it. And of course, the last part is you can have fun doing it like this, that the whole thing that convinced me to continue doing sketch notes way back in 2006 was this idea that, “Hey, this is really fun. I'm enjoying taking notes”. I'm when the talk is done, I don't have to do any more work. And it's short enough and brief enough because you're, you know, looking for the big ideas.

That's maybe four or five pages. It's shareable. You can now share. Not only is it good for you, but if you wish, it can be useful for someone else. And I found that true as well. So there is the fun aspect that should not be overlooked in sketch noting, I think it's really important, the things that you have fun doing, you repeatedly do, right? That's sort of the way we work as humans. So I thought it would be helpful to show some samples. But first, my big statement is: ideas, not art. So this is for those of you who feel like if I asked the question who feels like

they can't draw and you're the person raising your hand, this is for you. “Ideas,not art” is all about this concept of forget about any drawing classes you took in college or any of those kind of things. We're talking about capturing ideas simply, and if you can use simple shapes to do that, it makes it possible for anyone to do sketch, noting it really lowers the bar and it reduces the pressure for people who feel like I can't draw, I don't know how to draw. I don't know where to begin. So first of all, I'm going to just show you some samples

to give you a taste of how I've used this in my professional and personal life. So you can see these are these are sketch notes from meetings. These can be meetings or conferences. These are the one on the top left is an online conference that I attended. I did that with my iPad Pro. The one on the right is with some friends talking about graphic recording which is related to sketch noting. And finally lower right is a section that I attended about Agile learning about Agile and how, you know, Agile works so that I could apply it in my design profession.

So this really helped me understand and have a little fun with those notes. You can see that's an example of what meetings might look like. So another way that might apply, especially to the designers, is this idea of sketch noting your ideation. So when you build these skills, you now feel like you have another power to go on a whiteboard, to go on a piece of paper, to use an iPad pro and a pencil to sketch out the ideas that are in your head so you can get them out, so you can look at them yourself, and then you can share them with your teammates to kind of work through like, is this a good idea or not?

Right? A lot of times we have these discussions where we think we're agreeing when we're talking in words, but we really don't agree. It's this illusion of agreement. So by visualizing, it helps everyone get clear about what it is the idea is, so you can see on the left are these crazy ideas I had for hiding Thin Mints, the Girl Scout cookies, from my kids on the right was an idea, of course, that I took where I explored a storyboard. And then in the bottom right was when I first got a new computer exploring

if I'm using usb-c cables, which cables would I need? Right? So it can be very practical ways to visualize ideas that you have.