All language subtitles for 13 - The Sketching

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.