Original subtitles

‫Welcome back.

‫We're going to talk about the sketching process in a little bit more detail.

‫There's a couple of different steps and steps within those steps that I want to talk about and touch

‫upon so that when you start sketching, you're just ready.

‫That first step is be prepared.

‫Always be prepared.

‫You know, prepare your tools beforehand.

‫Lots of papers, pens, markers, pencils, whatever works for you, even if it's like a tablet.

‫We also want to think about what our goals are.

‫You can think about what you're trying to solve for.

‫Maybe it's a certain flow, maybe it's a certain interaction.

‫But that should always be the center of your attention.

‫We're also going to think about our audience.

‫This is really important.

‫If it's for yourself, I mean, go crazy, be as messy as you want.

‫I mean, you don't really need to annotate anything as long as you understand your own process.

‫But if it's for somebody like a client or a stakeholder or your teammates, I mean, you need to clean

‫them up a bit.

‫So maybe add a bit more detail and explain your thought process so you don't waste time trying to explain

‫it while you're presenting it to them.

‫Remember, always time box yourself.

‫This is like one of the best pieces of advice I ever got in my career is to time box anything.

‫Time box.

‫You're sketching presentations.

‫Keep yourself under a time limit because it'll help you focus on sketching for your goal, and it'll

‫put a little pressure on you to just throw out those ideas, not get bogged down by those details like

‫we talked about earlier.

‫So don't worry about them being messy.

‫Just time box yourself, and I promise you you'll just produce a bunch.

‫Step two.

‫Now, what you want to do here is just start.

‫Just go draw a frame for your device.

‫Is it a browser?

‫Is it a desktop window?

‫In this case, right here we have a mobile frame, so it just needs to be a frame.

‫It's just going to help you kind of guide your sketch a bit.

‫The next step is to think about the bigger picture and more basic elements, elements that are much

‫more redundant that you'll see.

‫They'll really help you kind of frame your sketches, whether it's a footer or it's a header.

‫Think about those elements that you're going to be seeing a lot of.

‫And then from there, move on to some of the more detailed elements and the more detailed interactions.

‫Know, have fun.

‫Start sketching those interactions.

‫Keep them very simple.

‫At this stage, all you need is one or two shapes, squares, circles, rectangles that can make up

‫any sketch.

‫You'll notice here that they're just using rectangles.

‫We have circles, we have lines.

‫They get their point across pretty well.

‫Now this is really important.

‫This is one of my messy sketches.

‫So I want you to just annotate and document your sketches.

‫The worst thing is looking back and not understanding what you sketch before you're going to be creating

‫messy sketches.

‫And sometimes you may not understand what you drew the day before or the week before whenever you revisit

‫them.

‫So the thing you need to do is just be as detailed as you can, but just quickly point out some certain

‫reasoning or proposed interactions like over here I have some titles, I have some just some text explaining

‫what the interaction is.

‫It just really helps give a little more context to what you're drawing.

‫Now, what I need you to do is just keep going, find the sketches you like, and start building alternatives

‫from that.

‫Don't just stop.

‫Organize the ones that you think of the potential and keep on going.

‫And what's going to really help you do that is by sharing them.

‫Share those sketches, bring them to your product team to discuss.

‫I mean, if you're working beside them, just tap them on the shoulder, set a meeting time, just get

‫everyone in a room to just talk about certain things that you've been working on, whether it's an interaction,

‫whether it's an overall flow.

‫I like uploading my sketches into Figma sometimes, and I share that document with the team and people

‫can comment.

‫I also just bring printouts or originals, so if I'm sketching on paper, I'm just bringing my paper

‫there, or if I'm sketching within like a tablet or something, I'm bringing that print out.

‫What I'm doing is I'm just talking to everyone.

‫It doesn't matter.

‫Developers, product managers, QA, everyone has valuable insight that you should really tap into.

‫And after you get some feedback, you can start building off of those sketches a bit more.

‫This is an ongoing process for every type of feature that you're going to design.

‫The last step is refining.

‫So how do you clarify your sketches?

‫So you have some sketches indicating some sort of flow or interaction and you want to clean them up

‫a bit or think through them a bit more, but they're a bit messy and unorganized, and that's okay.

‫So what do you do?

‫Add titles.

‫You really want to add titles for all your sketches, they really help you understand which screens

‫are relevant and without thinking too much about it.

‫This is so useful if you have a bunch of sketches like we see here and yes, annotate again.

‫I know I mentioned this before, but here it is.

‫Get annotations are like little notes right beside elements that explain its purpose.

‫They also really help clarify certain things that are just too hard to draw.

‫So it's really great.

‫So I mean, like over here you can see that there's a bunch of different annotations in regards to the

‫sketch and these different UI elements, but we also can use numbers, try numbering your sketches.

‫It can really help define where certain sketch is within a flow or interaction.

‫It helps speed up discussions and it really helps others to try and make sense of where something fits

‫in within your sketches.

‫It also helps others to point out certain numbers when they're giving you some feedback so they can

‫just say, Hey, Daniel, screen three.

‫I love it.

‫We're going to keep that the same.

‫And it really helps you gather that feedback as well.

‫If you're taking notes, definitely use arrows.

‫Arrows help to indicate a transition.

‫So we can see here that if somebody interacts with this element, something else is going to happen

‫and may push them in two different directions.

‫Even though I don't necessarily understand this flow, I do know that something's happening here that's

‫going to push them into different directions, and that's with no context whatsoever.

‫You can only imagine what somebody with context could see and the level of detail and context you can

‫give them.

‫So remember, use arrows that can really help indicate where there's a page transition or even an interaction

‫transition.

‫And lastly, if you're feeling a little brave, you can start drawing some gestures for certain interactions

‫that are a bit hard.

‫And there's a bunch of different ways you can kind of do this.

‫You can like try to use like little circles, you can use arrows to indicate them.

‫But what I usually do is I sketch really quickly and I'm not really worried about like refining like

‫these gesture sketches.

‫What I'll do is I'll just go right over to the developer that I'm working with or developers and have

‫a conversation.

‫I mean, I run it by them and try to explain this in person, maybe even sketch on a whiteboard.

‫And so they can really understand my intention and I can get some insight into what they think about

‫the interaction.

‫These are the different types of things you can do when you're thinking about the actual sketching process.

‫Next, we're going to jump into actually sketching some UX flows.