1
00:00:00,390 --> 00:00:06,900
So we're back again in concepts and we're just going to go through some quick tips just to kind of wrap

2
00:00:06,900 --> 00:00:08,490
everything up in terms of sketching.

3
00:00:09,580 --> 00:00:11,930
So let's just give ourselves a little title here.

4
00:00:12,400 --> 00:00:17,230
You know, I'm going to repeat a couple of things that I've been talking about that I really want you

5
00:00:17,260 --> 00:00:19,940
all to understand how important they actually are.

6
00:00:20,770 --> 00:00:23,430
Number one is, don't worry about them being messy.

7
00:00:23,560 --> 00:00:24,970
Go jump right in.

8
00:00:25,390 --> 00:00:28,180
Ask yourself those questions and just keep going.

9
00:00:28,180 --> 00:00:34,660
Like you saw, I created a home screen pretty quickly and I started understanding that maybe we do need

10
00:00:34,660 --> 00:00:35,820
these elements here.

11
00:00:36,160 --> 00:00:38,140
They're going to probably be useful.

12
00:00:38,650 --> 00:00:43,740
And I start learning about what content I can actually get from just like a quick sketch like that.

13
00:00:44,200 --> 00:00:51,190
And from there we can actually go in and start refining that a bit more, you know, add icons, figuring

14
00:00:51,190 --> 00:00:56,590
out maybe that's an avatar, figuring out what type of information goes in here.

15
00:00:56,590 --> 00:01:01,330
Like we found out that we needed a heart and maybe we need a price tag.

16
00:01:01,510 --> 00:01:02,830
Most definitely need a price tag.

17
00:01:02,830 --> 00:01:06,800
But this is the kind of stuff that it's just a natural progression.

18
00:01:06,970 --> 00:01:10,720
You don't worry about drawing something like this because eventually it's going to get to something

19
00:01:10,720 --> 00:01:13,150
even better than to the product that we eventually built.

20
00:01:13,420 --> 00:01:14,650
Don't worry about being messy.

21
00:01:14,900 --> 00:01:19,360
Like I said, be lean, agile, sketch quickly and save yourself some time instead of worrying about

22
00:01:19,360 --> 00:01:19,810
the detail.

23
00:01:20,020 --> 00:01:24,520
The next tip is, you know, it takes a little practice, but only a little, you know, think about

24
00:01:24,520 --> 00:01:25,690
it as building blocks.

25
00:01:26,690 --> 00:01:32,660
All you need are some squares, rectangles, maybe circles, and you can build a fairly decent UI like

26
00:01:32,660 --> 00:01:41,090
we've done before, like our card screen is just just an X whatever text we have there, we have a square.

27
00:01:42,740 --> 00:01:46,460
Some lines, another square to us.

28
00:01:46,490 --> 00:01:50,220
We understand what we're building here and we can refine that if we're going to present it to teammates.

29
00:01:50,540 --> 00:01:53,810
We got a fairly good understanding of what we need to build a screen like this.

30
00:01:54,960 --> 00:02:00,120
Don't worry about it too much, if you want to have a little bit of practice, like you can go and open

31
00:02:00,120 --> 00:02:05,130
an app that you love or a website that you love and try just sketching that out, just using some shapes

32
00:02:05,130 --> 00:02:06,350
or like some basic type.

33
00:02:06,690 --> 00:02:09,920
And eventually you'll just develop your own type of system for sketching.

34
00:02:10,110 --> 00:02:13,860
And there really is no wrong or right way to do it is just whatever is going to work for you.

35
00:02:14,040 --> 00:02:14,660
Next step.

36
00:02:14,730 --> 00:02:16,110
Keep your sketches safe.

37
00:02:16,110 --> 00:02:17,630
Buy yourself a folder, please.

38
00:02:17,640 --> 00:02:22,650
I mean, if you're doing it digitally, that's that's great, too, because, like, services like this

39
00:02:22,650 --> 00:02:26,700
will allow you to export it and JPEG or whatever file format.

40
00:02:26,700 --> 00:02:28,980
It doesn't really matter for sketches like this.

41
00:02:29,430 --> 00:02:32,700
If you're using paper stored in a folder, scan it right away.

42
00:02:32,700 --> 00:02:37,890
Take a picture, please, because I can't count how many times I've lost sketches that I really needed

43
00:02:37,890 --> 00:02:38,670
or I really liked.

44
00:02:38,670 --> 00:02:40,230
And sometimes you lose details.

45
00:02:40,680 --> 00:02:41,910
Just remember, keep them safe.

46
00:02:43,000 --> 00:02:49,270
Always be prepared, keep a sketch pad near you, pencil a pen with you on my desk at home, I always

47
00:02:49,270 --> 00:02:50,380
have my sketchbook.

48
00:02:50,830 --> 00:02:55,210
It's a dotted line sketchbook, so it's really easy for drawing wire frames and stuff like that.

49
00:02:55,210 --> 00:02:56,620
So keep something with you.

50
00:02:56,620 --> 00:03:01,570
If you like to draw digitally, like on an iPad or if you have a tablet that you draw on, like a whack

51
00:03:01,570 --> 00:03:05,980
on tablet, keep that by your side because, you know, you never know when an idea is going to come.

52
00:03:06,430 --> 00:03:08,380
You just never know when you need to sketch.

53
00:03:08,410 --> 00:03:09,250
Keep it by your side.

54
00:03:10,370 --> 00:03:14,540
Another thing I'd like to do is I like to hang my sketches up so like, say, if I have some sort of,

55
00:03:14,540 --> 00:03:21,050
like, board beside me or a wall, I just like to hang up my sketches for some inspiration and then

56
00:03:21,050 --> 00:03:22,520
I just write additional notes.

57
00:03:23,180 --> 00:03:28,010
If I'm working from home, I have my whiteboard that I hang up and it serves as a daily reminder just

58
00:03:28,010 --> 00:03:30,180
so I can see what I've been thinking about.

59
00:03:30,440 --> 00:03:32,360
I can maybe scrap some ideas.

60
00:03:32,540 --> 00:03:36,800
I can maybe take this new idea that I have and or this old idea I have.

61
00:03:36,800 --> 00:03:41,900
And, you know, maybe something else comes from it because I've taken some time to just take some breathing

62
00:03:41,900 --> 00:03:45,500
room, you know, just put it up for yourself.

63
00:03:46,280 --> 00:03:51,920
And if you're working with teams, they help as well, because other people can kind of get into it

64
00:03:51,920 --> 00:03:54,650
and they can start to provide some valuable insight.

65
00:03:55,100 --> 00:03:57,190
You want to keep people in your team participating.

66
00:03:57,200 --> 00:04:01,940
So that's the best thing I've always found, is just put your sketches up, share them.

67
00:04:02,450 --> 00:04:05,270
And that leads me to my next tip over here.

68
00:04:05,630 --> 00:04:07,430
My next step is to communicate.

69
00:04:07,430 --> 00:04:09,140
Just please communicate.

70
00:04:09,860 --> 00:04:12,010
Don't hide these gems that you're making.

71
00:04:12,110 --> 00:04:18,590
I call them gems because like every product starts from something like this, you know, that may not

72
00:04:18,590 --> 00:04:22,580
seem true, but that's what really is the skeleton of your product.

73
00:04:22,940 --> 00:04:24,920
They'll always start from like a messy sketch.

74
00:04:24,930 --> 00:04:29,080
So share them with people because this is a collaborative process.

75
00:04:29,900 --> 00:04:32,840
Share them with your team, talk to every team.

76
00:04:32,870 --> 00:04:33,560
It doesn't matter.

77
00:04:33,560 --> 00:04:35,450
They'll always provide valuable insights.

78
00:04:35,690 --> 00:04:38,780
We talked a little bit about like a certain feature over here.

79
00:04:39,770 --> 00:04:46,880
Where there was going to be a carousel, it will just quickly draw it again, and if a user swiped left.

80
00:04:48,600 --> 00:04:53,730
The new image would come in, and if I were to develop a feature like this or build a feature like this,

81
00:04:53,940 --> 00:04:55,860
first person I would talk to would be a developer.

82
00:04:55,860 --> 00:04:59,560
And I would like to understand, is this feasible for our timeline?

83
00:04:59,820 --> 00:05:01,310
What's the best way to do it?

84
00:05:01,590 --> 00:05:03,900
And you can have those conversations early on.

85
00:05:04,410 --> 00:05:09,990
Next thing I'd like to do is I mentioned it briefly about like putting your sketches up, but some people

86
00:05:09,990 --> 00:05:14,810
like to get a big whiteboard and sketch on a whiteboard, and that's totally fine, too.

87
00:05:14,820 --> 00:05:15,970
I love sketching out whiteboards.

88
00:05:16,800 --> 00:05:18,270
Now it's very collaborative.

89
00:05:18,310 --> 00:05:20,940
It's easy to involve team members in this discussion.

90
00:05:21,180 --> 00:05:26,460
And when you're just drawing screens, everyone can kind of just come in, point certain things out

91
00:05:26,940 --> 00:05:29,220
because it's and nobody really gets tied to the details.

92
00:05:29,220 --> 00:05:31,860
Everyone's thinking about like the overall flow.

93
00:05:32,340 --> 00:05:33,750
You have so much space.

94
00:05:33,760 --> 00:05:37,490
Sometimes you'll be surprised at how fast you can actually fill that up with your whole team.

95
00:05:38,220 --> 00:05:42,630
And what I also like to do is I like to pen my sketches there as well.

96
00:05:42,630 --> 00:05:46,670
So maybe they have some sort of relation to a certain screen.

97
00:05:47,520 --> 00:05:53,160
It's a good jumping off point for yourself so you can kind of go back to your desk or wherever you're

98
00:05:53,160 --> 00:05:56,730
working and start thinking about different things.

99
00:05:57,660 --> 00:06:05,340
That could relate and one of the last tips I have, and I do this fairly often, sometimes I'll grab

100
00:06:05,340 --> 00:06:08,010
a sketch so if I have our search experience.

101
00:06:09,460 --> 00:06:15,220
Like, so it's easy to you know, it's easy to just sketch these out, but sometimes you don't necessarily

102
00:06:15,220 --> 00:06:17,200
get like a feel for the product.

103
00:06:18,250 --> 00:06:20,100
That's natural because it's on paper.

104
00:06:20,110 --> 00:06:21,190
It's just static.

105
00:06:21,850 --> 00:06:27,050
And sometimes you want to understand, like, how does that feel when the user actually clicks this?

106
00:06:27,580 --> 00:06:32,770
So what you could do is you can export like individual frames any which way you want to do it.

107
00:06:32,770 --> 00:06:37,900
Like you can export this whole thing here in concepts, this whole canvas, and you can kind of duplicated

108
00:06:37,900 --> 00:06:43,330
and crop it to each individual frame and you can bring it into Fidelma and link it together in a prototype.

109
00:06:43,930 --> 00:06:46,270
And bam, you have like something super simple.

110
00:06:46,270 --> 00:06:51,210
And it give you a little more context on how it will actually work in the digital product.

111
00:06:51,760 --> 00:06:57,550
So sometimes I'll do that or I'll scan in a sketch and that would really help me to figure that out

112
00:06:57,550 --> 00:07:01,090
if things actually work while I'm tapping it on the mobile screen.

113
00:07:01,120 --> 00:07:05,700
Also, give me a sense on how these elements need to be bigger than I thought.

114
00:07:05,710 --> 00:07:07,280
Maybe it's not going to work here.

115
00:07:07,330 --> 00:07:10,390
So like on a home screen, we thought about things like the little hearts.

116
00:07:10,390 --> 00:07:15,090
But, you know, maybe we'll realize that that's not really feasible for a user to tap.

117
00:07:15,460 --> 00:07:18,040
Maybe it is for larger images on a mobile screen.

118
00:07:18,040 --> 00:07:22,450
But maybe if we're thinking about smaller ones, maybe we leave that out there because it's a little

119
00:07:22,450 --> 00:07:28,490
confusing and a user may go to tap that and then actually tap into the image when they didn't want to.

120
00:07:29,380 --> 00:07:30,100
Where do they go?

121
00:07:30,100 --> 00:07:34,060
They go do it like that product description page that we've been talking so much about.

122
00:07:35,110 --> 00:07:39,400
All these different tips are going to really help you create a much better user experience, is going

123
00:07:39,400 --> 00:07:44,710
to help you drive that communication throughout the whole team, create that collaborative process.

124
00:07:45,310 --> 00:07:47,520
At the end of the day, it's going to make you a better designer.

125
00:07:47,530 --> 00:07:49,060
It's going to make your users happy.

126
00:07:49,090 --> 00:07:50,650
So follow these tips.

127
00:07:50,650 --> 00:07:56,470
Follow that process we talked about earlier in the lesson and you're well on your way to sketching some

128
00:07:56,650 --> 00:08:00,280
amazing interactions and different types of flows.