1
00:00:00,540 --> 00:00:01,150
Welcome back.

2
00:00:01,170 --> 00:00:04,500
We're going to talk about the sketching process and a little bit more detail.

3
00:00:04,920 --> 00:00:08,820
There's a couple of different steps and steps within those steps that I want to talk about and touch

4
00:00:08,820 --> 00:00:11,760
upon so that when you start sketching, you're just ready.

5
00:00:12,540 --> 00:00:15,240
That first step is be prepared.

6
00:00:15,480 --> 00:00:16,320
Always be prepared.

7
00:00:17,250 --> 00:00:22,950
You know, prepare your tools beforehand, lots of papers, pens, markers, pencils, whatever works

8
00:00:22,950 --> 00:00:24,520
for you, even if it's like a tablet.

9
00:00:24,960 --> 00:00:26,850
We also want to think about what our goals are.

10
00:00:27,720 --> 00:00:32,640
You can think about what you're trying to solve for maybe it's a certain flow, maybe it's a certain

11
00:00:32,640 --> 00:00:35,060
interaction, but that should always be the center of your attention.

12
00:00:36,560 --> 00:00:41,270
We're also going to think about our audience, this is really important, if it's for yourself, I mean,

13
00:00:41,270 --> 00:00:44,010
go crazy, be as messy as you want.

14
00:00:44,030 --> 00:00:48,860
I mean, you don't really need to annotate anything as long as you understand your own process.

15
00:00:49,340 --> 00:00:55,100
But if it's for somebody like a client or a stakeholder or your teammates, I mean, you need to clean

16
00:00:55,100 --> 00:00:55,660
them up a bit.

17
00:00:55,670 --> 00:01:02,150
So maybe add a bit more detail and explain your thought process so you don't waste time trying to explain

18
00:01:02,150 --> 00:01:03,500
it while you're presenting it to them.

19
00:01:04,340 --> 00:01:06,490
Remember, always time box yourself.

20
00:01:06,530 --> 00:01:10,550
This is like one of the best pieces of advice I ever got in my career.

21
00:01:10,790 --> 00:01:15,290
Is the time box, anything time box, your sketching presentations.

22
00:01:15,470 --> 00:01:20,840
Keep yourself under a timely because it'll help you focus on sketching for your goal and it'll put a

23
00:01:20,840 --> 00:01:25,400
little pressure on you to just throw those ideas, not get bogged down by those details like we talked

24
00:01:25,400 --> 00:01:26,000
about earlier.

25
00:01:26,420 --> 00:01:28,460
So don't worry about them being messy.

26
00:01:28,460 --> 00:01:32,090
Just time box yourself and I promise you you'll just produce a bunch.

27
00:01:33,130 --> 00:01:41,110
Step two now, what you want to do here is just start, just go jaroff frame for your device.

28
00:01:41,740 --> 00:01:42,830
Is it a browser?

29
00:01:42,880 --> 00:01:43,960
Is it a desktop window?

30
00:01:43,960 --> 00:01:44,470
In this case?

31
00:01:44,480 --> 00:01:45,940
Right here, we have a little mobile frame.

32
00:01:46,180 --> 00:01:47,890
So it just needs to be a frame.

33
00:01:47,890 --> 00:01:50,500
It's just going to help you kind of guide your sketch a bit.

34
00:01:50,980 --> 00:01:56,320
The next step is to think about the bigger picture and more basic elements, elements that are much

35
00:01:56,320 --> 00:02:02,050
more redundant that you'll see Philip really help you kind of frame your sketches, whether it's a footer,

36
00:02:02,050 --> 00:02:02,790
it's a header.

37
00:02:02,950 --> 00:02:05,470
Think about those elements that you're going to be seeing a lot of.

38
00:02:06,830 --> 00:02:11,750
And then from there, move on to some of the more detailed elements and the more detailed interactions,

39
00:02:12,050 --> 00:02:14,990
you'll have fun, start sketching those interactions, keep them very simple.

40
00:02:15,000 --> 00:02:21,410
At this stage, all you need is one or two shapes, square circles, rectangles that can make up any

41
00:02:21,410 --> 00:02:21,890
sketch.

42
00:02:22,800 --> 00:02:28,050
You'll notice here that they're just using little rectangles, we have circles, we have lines, they

43
00:02:28,050 --> 00:02:29,720
get their point across pretty well.

44
00:02:30,980 --> 00:02:32,720
Now, this is really important.

45
00:02:32,780 --> 00:02:37,800
This is one of my messy sketches, so I want you to just annotate and document your sketches.

46
00:02:38,210 --> 00:02:43,700
The worst thing is looking back and not understanding what you sketch before you're going to be creating

47
00:02:43,700 --> 00:02:44,840
messy sketches.

48
00:02:44,840 --> 00:02:50,840
And sometimes you may not understand what you drew the day before or the week before whenever you revisit

49
00:02:50,840 --> 00:02:51,050
them.

50
00:02:51,380 --> 00:02:56,750
So the thing you need to do is just be as detailed as you can, but just quickly point out some certain

51
00:02:56,750 --> 00:02:59,690
reasoning or propose interactions like over here, have some titles.

52
00:02:59,690 --> 00:03:03,230
I have some just some text explaining what the interaction is.

53
00:03:03,440 --> 00:03:07,010
It just really helps give a little bit more context to what you're drawing.

54
00:03:08,240 --> 00:03:14,150
Now, what I need you to do is just keep going, find the sketches you like, and start building alternatives

55
00:03:14,150 --> 00:03:14,570
from that.

56
00:03:14,570 --> 00:03:19,730
Don't just stop, organize the ones that you think have the potential and keep on going.

57
00:03:20,030 --> 00:03:24,740
And what's going to really help you do that is by sharing them, share those sketches, bring them to

58
00:03:24,740 --> 00:03:26,150
your team to discuss.

59
00:03:26,560 --> 00:03:32,210
I mean, if you're working beside them, just tapping on the shoulder, set a meeting time, just get

60
00:03:32,210 --> 00:03:36,290
everyone in a room and just talk about certain things that you've been working on, whether it's an

61
00:03:36,290 --> 00:03:38,510
interaction, whether it's an overall flow.

62
00:03:38,990 --> 00:03:43,760
I like uploading my sketches into figments sometimes, and I share that document with the team and people

63
00:03:43,760 --> 00:03:44,340
can comment.

64
00:03:44,600 --> 00:03:46,840
I also just bring printouts or originals.

65
00:03:47,180 --> 00:03:52,700
So if I'm sketching on paper, I'm just bringing my paper there, or if I'm sketching within like a

66
00:03:52,700 --> 00:03:55,070
tablet or something, I'm bringing that print out.

67
00:03:55,520 --> 00:03:57,820
What I'm doing is I'm just talking to everyone.

68
00:03:57,830 --> 00:03:58,640
It doesn't matter.

69
00:03:58,880 --> 00:04:05,930
Developers, product managers, kuai everyone has valuable insight that you should really tap into and

70
00:04:05,930 --> 00:04:09,020
after you get some feedback, you can start building off of those sketches a bit more.

71
00:04:09,470 --> 00:04:12,790
This is an ongoing process for every type of feature that you're going to design.

72
00:04:13,860 --> 00:04:16,270
The last step is refining.

73
00:04:16,290 --> 00:04:21,510
So how do you clarify your sketches so you have some sketches indicating some sort of flow or interaction

74
00:04:21,990 --> 00:04:27,330
and you want to clean them up a bit or think through them a bit more, but they're a bit messy and unorganized,

75
00:04:27,330 --> 00:04:27,900
and that's OK.

76
00:04:28,170 --> 00:04:28,800
So what do you do?

77
00:04:29,640 --> 00:04:30,510
Add titles.

78
00:04:31,110 --> 00:04:33,840
You really want to add titles for all your sketches?

79
00:04:34,140 --> 00:04:39,380
They really help you understand which screens are relevant and without thinking too much about it.

80
00:04:40,020 --> 00:04:43,020
This is so useful if you have a bunch of sketches like we see here.

81
00:04:43,860 --> 00:04:44,760
And yes.

82
00:04:44,760 --> 00:04:48,180
And it's again, I know I mentioned this before, but here it is.

83
00:04:48,180 --> 00:04:53,340
Got annotations are like little notes right beside elements that explain its purpose.

84
00:04:53,820 --> 00:04:58,630
They also really help clarify certain things that are just too hard to draw.

85
00:04:59,430 --> 00:05:00,250
So it's really great.

86
00:05:00,270 --> 00:05:04,830
So, I mean, like over here you can see that there's a bunch of different annotations in regards to

87
00:05:04,830 --> 00:05:07,260
the sketch and these different UI elements.

88
00:05:08,130 --> 00:05:12,300
But we also can use numbers trying numbering in your sketches.

89
00:05:12,550 --> 00:05:16,740
It can really help define where certain sketches within a flow or interaction.

90
00:05:17,040 --> 00:05:22,590
It helps speed up discussions and it really helps others to try and make sense of where something fits

91
00:05:22,590 --> 00:05:23,760
in within your sketches.

92
00:05:24,360 --> 00:05:28,050
It also helps others to point out certain numbers when they're giving you some feedback.

93
00:05:28,320 --> 00:05:32,460
So they could just say, Hey, Daniel, screen three, I love it.

94
00:05:32,460 --> 00:05:33,810
We're going to keep that the same.

95
00:05:33,990 --> 00:05:37,260
And it really helps you gather that feedback as well if you're taking notes.

96
00:05:38,070 --> 00:05:41,730
Definitely use arrows, arrows, help to indicate a transition.

97
00:05:42,120 --> 00:05:47,250
So we can see here that if somebody interacts with this element, something else is going to happen

98
00:05:47,250 --> 00:05:49,650
and may push them in two different directions.

99
00:05:50,040 --> 00:05:55,080
Even though I don't necessarily understand this flow, I do know that something's happening here that's

100
00:05:55,080 --> 00:05:59,940
going to push them in two different directions, and that's with no context whatsoever.

101
00:06:00,120 --> 00:06:06,240
You can only imagine what somebody with context could see and the level of detail and context you can

102
00:06:06,240 --> 00:06:06,690
give them.

103
00:06:07,170 --> 00:06:13,680
So remember, use arrows that can really help indicate where there's a page transition or even an interaction

104
00:06:13,680 --> 00:06:14,310
transition.

105
00:06:14,880 --> 00:06:19,920
And lastly, if you're feeling a little brave, you can start drawing some gestures for certain interactions.

106
00:06:20,640 --> 00:06:24,240
These are a bit hard and there's a bunch of different ways you can kind of do this.

107
00:06:24,240 --> 00:06:27,180
You can try to use like little circles.

108
00:06:27,450 --> 00:06:29,160
You can use arrows to indicate them.

109
00:06:29,460 --> 00:06:35,310
But what I usually do is I sketch really quickly and I'm not really worried about, like refining like

110
00:06:35,310 --> 00:06:36,750
these gesture sketches.

111
00:06:37,080 --> 00:06:42,720
What I'll do is I'll just go right over to the developer that I'm working with or developers and have

112
00:06:42,720 --> 00:06:43,380
a conversation.

113
00:06:43,680 --> 00:06:48,690
I mean, I run it by them and try to explain this in person, maybe even sketch on a whiteboard.

114
00:06:48,690 --> 00:06:53,700
And so they can really understand my intention and I can get some insight into what they think about

115
00:06:53,700 --> 00:06:54,330
the interaction.

116
00:06:55,050 --> 00:07:01,230
These are the different types of things you can do when you're thinking about the actual sketching process.

117
00:07:02,040 --> 00:07:04,740
Next, we're going to jump into actually sketching some workflows.