Welcome back.
We're going to talk about the sketching process and 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 the time box, anything time box, your sketching presentations.
Keep yourself under a timely because it'll help you focus on sketching for your goal and it'll put a
little pressure on you to just throw 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 jaroff frame for your device.
Is it a browser?
Is it a desktop window?
In this case?
Right here, we have a little 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 Philip really help you kind of frame your sketches, whether it's a footer,
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,
you'll have fun, start sketching those interactions, keep them very simple.
At this stage, all you need is one or two shapes, square circles, rectangles that can make up any
sketch.
You'll notice here that they're just using little 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 propose interactions like over here, have some titles.
I have some just some text explaining what the interaction is.
It just really helps give a little bit 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 have 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 team to discuss.
I mean, if you're working beside them, just tapping on the shoulder, set a meeting time, just get
everyone in a room and 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 figments 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, kuai 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 OK.
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.
And it's again, I know I mentioned this before, but here it is.
Got 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 trying numbering in your sketches.
It can really help define where certain sketches 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 could 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 in two 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.
These are a bit hard and there's a bunch of different ways you can kind of do this.
You can 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 workflows.