0
1
00:00:00,330 --> 00:00:05,970
So in order to get started with Sketch all you have to do is head over to www.sketchapp.com and download
1

2
00:00:06,030 --> 00:00:12,330
a free trial. And then you get access to the app for around 30 days and you can give it a spin and learn
2

3
00:00:12,330 --> 00:00:15,990
how to use it and see if it's the right kettle of fish for you.
3

4
00:00:16,050 --> 00:00:21,360
Now Sketch is only currently available for Mac and if you're running Windows or you don't have access
4

5
00:00:21,360 --> 00:00:22,450
to a Mac laptop
5

6
00:00:22,590 --> 00:00:26,770
I'll show you later on how to use Marvel to do your mockup prototyping.
6

7
00:00:26,850 --> 00:00:31,440
So don't worry if you don't have access to this. For those you guys who want to learn a bit more about
7

8
00:00:31,440 --> 00:00:34,740
Sketch and how to use it to create mockups and designs
8

9
00:00:34,830 --> 00:00:40,560
and once you downloaded it and installed it and open it it should take you to a welcome screen like this
9

10
00:00:40,560 --> 00:00:47,490
one. And we're going to click on the iOS UI design to bring up the iOS template. And I'm just going
10

11
00:00:47,490 --> 00:00:54,930
to save my file as a Sketch example and I'll put it into my documents.
11

12
00:00:55,170 --> 00:00:55,710
OK. Cool.
12

13
00:00:55,740 --> 00:00:57,150
So that's done. Now
13

14
00:00:57,180 --> 00:00:58,310
let me just show you around.
14

15
00:00:58,320 --> 00:01:04,620
So Sketch is optimized for UI design and it's also really really good for creating vector objects.
15

16
00:01:04,620 --> 00:01:09,050
So most of the icons that you'll see on the toolbar here are for designing vectors.
16

17
00:01:09,060 --> 00:01:13,950
Now you can change your toolbar preferences to display whatever it is that you want up here.
17

18
00:01:13,980 --> 00:01:20,190
So in the left hand pane you've got the navigation area. You're navigating between your different pages
18

19
00:01:20,400 --> 00:01:22,620
and also something called symbols.
19

20
00:01:22,620 --> 00:01:27,460
So symbols is something that's new to the current version of Sketch.
20

21
00:01:27,480 --> 00:01:35,310
So I'm using Sketch 41 at the moment which is the latest version. And symbols is a really really cool
21

22
00:01:35,310 --> 00:01:42,200
feature because it allows you to create reusable components that you can put into your designs for example
22

23
00:01:42,210 --> 00:01:45,910
how many times are you going to need a navigation bar in each of your screens?
23

24
00:01:45,960 --> 00:01:46,860
Many many times
24

25
00:01:46,860 --> 00:01:47,210
right?
25

26
00:01:47,220 --> 00:01:52,920
Instead of designing all of them again and again, you can just simply put in a symbol.
26

27
00:01:52,920 --> 00:01:57,150
And when you update the design for the symbol all of the other ones update.
27

28
00:01:57,150 --> 00:02:00,170
So it's really neat and I'm going to show you how we use it.
28

29
00:02:00,360 --> 00:02:05,910
So first things first, we've got this page 1 that has a bunch of iOS UI components.
29

30
00:02:05,910 --> 00:02:07,030
It's got keyboards,
30

31
00:02:07,170 --> 00:02:09,130
it's got status bars,
31

32
00:02:09,150 --> 00:02:11,030
it's got navigation bars.
32

33
00:02:11,060 --> 00:02:16,590
And you'll notice this infinite zoom that you have within a sketch. So you can zoom in as much as you
33

34
00:02:16,590 --> 00:02:21,270
like and because everything is vector it will forever stay sharp.
34

35
00:02:21,270 --> 00:02:25,710
So depending on what you need you can pick it out of this template.
35

36
00:02:25,740 --> 00:02:29,540
So the first thing that we're going to do is we're going to create a new page.
36

37
00:02:29,550 --> 00:02:36,890
So I'm going to go to file, new page and I'm going to call this page iOS App.
37

38
00:02:36,900 --> 00:02:40,700
So the way they usually use pages in Sketch is for different platforms.
38

39
00:02:40,740 --> 00:02:43,750
So I'll have one page for my website,
39

40
00:02:43,830 --> 00:02:46,200
I'll have one page for the iOS app mockup,
40

41
00:02:46,220 --> 00:02:50,070
I'll have one page for the Android app mockup for example.
41

42
00:02:50,070 --> 00:02:55,990
So now I've created my new iOS page and you can see where I've actually got an infinite canvas
42

43
00:02:56,070 --> 00:02:57,620
so it just goes on and on.
43

44
00:02:57,750 --> 00:03:02,880
But the first thing I'm going to do is I'm going to insert an art board which is going to be a screen
44

45
00:03:02,910 --> 00:03:04,030
in my app.
45

46
00:03:04,110 --> 00:03:09,150
So if you just hit insert, artboard, and you can choose what kind of artboard you want.
46

47
00:03:09,150 --> 00:03:16,460
So we want iOS devices to be selected and I'm going to pick the one that's iPhone 7.
47

48
00:03:16,560 --> 00:03:22,400
So this is the screen dimensions for an iPhone 7 design and we're ready to design.
48

49
00:03:22,410 --> 00:03:29,820
So the first thing that we're going to do is head over to that template and find a nice status bar to
49

50
00:03:29,880 --> 00:03:31,870
put it into our app mockup.
50

51
00:03:32,040 --> 00:03:40,320
So I think I'm going to go for a I'm going to go for a dark navigation bar, so something like this. So
51

52
00:03:40,320 --> 00:03:42,740
I'll probably go for a light status bar
52

53
00:03:42,750 --> 00:03:51,510
so maybe something like this. And then I'm just going to copy and put that in here paste here. There we
53

54
00:03:51,510 --> 00:03:51,850
get.
54

55
00:03:51,990 --> 00:03:55,890
So now it's kind of invisible because it's white but that's okay.
55

56
00:03:55,890 --> 00:04:02,550
We're going to go back and grab our dark navigation screen and then all will be well.
56

57
00:04:03,090 --> 00:04:06,550
So let's paste that here and put that over here.
57

58
00:04:06,580 --> 00:04:12,630
And now you can see it's covering the status bar so we can either send it to back or you can actually
58

59
00:04:12,630 --> 00:04:16,360
arrange the order of your layers like so.
59

60
00:04:16,620 --> 00:04:17,150
OK.
60

61
00:04:17,160 --> 00:04:18,660
So that's looking pretty neat.
61

62
00:04:18,660 --> 00:04:22,280
Now we're going to want to change the title of our navigation bar.
62

63
00:04:22,300 --> 00:04:26,120
So obviously each of our navigation bars are going to have a different title.
63

64
00:04:26,130 --> 00:04:32,910
So the simplest way is just selecting the symbol which are denoted by these what looks like the recycle
64

65
00:04:32,910 --> 00:04:33,840
symbol to me.
65

66
00:04:34,230 --> 00:04:35,790
I'm sure there's a better way of describing that.
66

67
00:04:35,800 --> 00:04:36,810
But anyways.
67

68
00:04:36,930 --> 00:04:41,830
So now you can do something called override. If you have a whole bunch of boards,
68

69
00:04:41,910 --> 00:04:47,980
let's just put in another one, and you want to have navigation bars on each of them
69

70
00:04:48,000 --> 00:04:48,540
right?
70

71
00:04:48,580 --> 00:04:52,590
So then you could copy this one over and paste it over here.
71

72
00:04:52,590 --> 00:04:57,990
Now while I'm here, I'm just going to show you another way of inserting symbols and it is used when you
72

73
00:04:57,990 --> 00:04:59,810
know already what it is that you want.
73

74
00:04:59,990 --> 00:05:04,780
If you just go into insert, symbol, and then you can navigate to the thing that you need.
74

75
00:05:04,790 --> 00:05:10,250
So currently I'm looking for navigation bar and I know that it's called normal dark from browsing.
75

76
00:05:10,460 --> 00:05:16,160
And now if I click on that then it becomes attached to my mouse cursor and it'll be placed wherever
76

77
00:05:16,160 --> 00:05:16,880
I click on.
77

78
00:05:16,880 --> 00:05:18,310
So I'm just going to put it here.
78

79
00:05:18,350 --> 00:05:18,980
Ok cool.
79

80
00:05:19,070 --> 00:05:24,650
So now I have two navigation bars and obviously I want different titles for each of them.
80

81
00:05:24,710 --> 00:05:32,890
So let's change this title by using the override over here on the right and we'll call that home screen.
81

82
00:05:33,170 --> 00:05:37,160
And this one that we'll call workout screen.
82

83
00:05:37,160 --> 00:05:41,480
Now obviously that's up to you whatever it is that you want to put in there and you can also override
83

84
00:05:41,480 --> 00:05:43,290
the cancel and the Done buttons.
84

85
00:05:43,310 --> 00:05:44,540
So that's that.
85

86
00:05:44,540 --> 00:05:49,840
Now let's go back to the home screen and I want to add a bit more design to it.
86

87
00:05:49,850 --> 00:05:57,110
Now the next thing I would add is a background to my screen. So I'm just going to draw a rectangle and
87

88
00:05:57,140 --> 00:06:04,190
pretty much have it the size of the screen and we're going to fill it with a gradient.
88

89
00:06:04,190 --> 00:06:09,920
So let's pick our gradient colors and we'll just choose something quite simple like that.
89

90
00:06:09,920 --> 00:06:17,540
And you can obviously change the directions of the gradients or the degree of the gradient by just manipulating
90

91
00:06:17,930 --> 00:06:20,820
this little line here.
91

92
00:06:21,010 --> 00:06:22,600
I think that looks fine.
92

93
00:06:22,610 --> 00:06:24,600
So now let's just send that back.
93

94
00:06:24,650 --> 00:06:29,930
Now this top navigation bar is looking a bit too dark for me now so I'm going to reduce the opacity and
94

95
00:06:29,930 --> 00:06:32,440
make it look more iOScy.
95

96
00:06:32,570 --> 00:06:36,910
That's not a word definitely. But opacity down to about 65%
96

97
00:06:36,980 --> 00:06:38,770
and it looks a little bit more translucent.
97

98
00:06:38,820 --> 00:06:40,190
That looks brilliant.
98

99
00:06:40,400 --> 00:06:43,850
So the next thing I want to do is I want to insert a button.
99

100
00:06:44,000 --> 00:06:50,700
So I'm going to create a button by drawing a rectangle shape like so
100

101
00:06:50,780 --> 00:06:56,590
and then we can make that center aligned by going over here and clicking the center alignment button.
101

102
00:06:56,810 --> 00:07:04,790
Now it's bang in the middle. And I want to change the fill to maybe a solid color like a red color.
102

103
00:07:04,790 --> 00:07:07,810
Next I'm going to add a bit of text.
103

104
00:07:09,110 --> 00:07:12,550
So let's just write something like button.
104

105
00:07:12,650 --> 00:07:21,680
I'm going to change the font size to maybe 30 and I'm going to select the rectangle and my button text
105

106
00:07:22,280 --> 00:07:24,950
and I'm going to center them both together.
106

107
00:07:24,950 --> 00:07:34,520
Now next I want to make it a little bit round. So let's just increase that radius to bit more like that.
107

108
00:07:34,520 --> 00:07:35,600
That looks great.
108

109
00:07:35,600 --> 00:07:37,370
So now I'm happy with my button.
109

110
00:07:37,430 --> 00:07:38,830
I'm done designing it.
110

111
00:07:38,900 --> 00:07:42,490
So I want to put this button and a number of places.
111

112
00:07:42,530 --> 00:07:45,100
So I'm going to turn it into a symbol.
112

113
00:07:45,110 --> 00:07:52,130
Now if I select my text and my button together I can either group this by hitting group selection which
113

114
00:07:52,130 --> 00:07:59,090
means that every time I select it I'll select both which is useful. But I'm going to make it even more useful
114

115
00:07:59,270 --> 00:08:03,090
by clicking this button here which is create symbol.
115

116
00:08:03,110 --> 00:08:08,600
So I'm going to call my symbol "Red button" which seems descriptive and I'm going to leave this check
116

117
00:08:08,600 --> 00:08:11,570
to send it to the symbols page over here.
117

118
00:08:11,570 --> 00:08:11,990
Hit OK.
118

119
00:08:12,080 --> 00:08:13,940
OK that's done.
119

120
00:08:13,940 --> 00:08:20,270
Now if I have a look in my symbol's page, if I zoom out I should be able to find my button called red
120

121
00:08:20,270 --> 00:08:21,520
button over here.
121

122
00:08:21,860 --> 00:08:29,050
So, now if we go back to our iOS app and I want to put this button on another screen say over here.
122

123
00:08:29,780 --> 00:08:36,850
Then I can simply go insert, symbol, red button, and I can put it wherever it is that I want.
123

124
00:08:36,950 --> 00:08:44,060
And instead of the text saying button everywhere which is a bit dumb, I can override it to say "Click me"
124

125
00:08:44,740 --> 00:08:48,110
or over here or something like "Download".
125

126
00:08:48,140 --> 00:08:49,790
So that's pretty easy.
126

127
00:08:49,790 --> 00:08:54,590
Now what if I become unhappy with the way that the button is designed?
127

128
00:08:54,590 --> 00:09:02,060
Well it's equally easy to change that symbol. If we head over to the symbol page and I'm going to
128

129
00:09:02,060 --> 00:09:07,430
change the fill now to a different color a light green.
129

130
00:09:07,430 --> 00:09:08,150
There we go.
130

131
00:09:08,360 --> 00:09:14,150
And if I head back to the iOS app you can see that all the changes are reflected everywhere.
131

132
00:09:14,240 --> 00:09:19,910
So the other thing that you might need to do is inserting images like so.
132

133
00:09:20,120 --> 00:09:25,530
So if we go over to our workout app asset, we've got some images over here.
133

134
00:09:25,550 --> 00:09:28,360
Let's just select the lunge one.
134

135
00:09:28,370 --> 00:09:29,160
There we go.
135

136
00:09:29,330 --> 00:09:31,900
So there's a lunge and we can put it over here.
136

137
00:09:31,910 --> 00:09:39,770
You can resize it have a you like, you can put it behind everything or you can put it in front or you
137

138
00:09:39,770 --> 00:09:46,020
can line it up with the button by again going like this or you just select everything here.
138

139
00:09:46,260 --> 00:09:49,220
Then we can line it up in the center of the screen.
139

140
00:09:49,220 --> 00:09:50,760
So how easy was that?
140

141
00:09:50,780 --> 00:09:59,360
Within five minutes of barely designing, I've got a home screen with a navigation bar, a status bar with
141

142
00:09:59,360 --> 00:10:01,660
an image and a button
142

143
00:10:01,700 --> 00:10:04,760
and then I can go on to design my next screens etc.
143

144
00:10:04,760 --> 00:10:11,570
So I would say that 95% of the time when you're designing your app screen all you need to do
144

145
00:10:11,600 --> 00:10:16,610
is just to use the symbols that are provided in the iOS UI template
145

146
00:10:16,610 --> 00:10:23,450
and remember that you can either insert them like so or you can go to page one browse for the one that
146

147
00:10:23,450 --> 00:10:29,000
you like and then just copy and paste it over. And then we learned a little bit about using colors using
147

148
00:10:29,000 --> 00:10:29,540
gradients
148

149
00:10:29,570 --> 00:10:33,370
and there's a whole different variety of colors that you can pick and choose from.
149

150
00:10:33,410 --> 00:10:36,390
Ideally just go through them, try it out,
150

151
00:10:36,440 --> 00:10:39,070
play around with it and see which one you like.
151

152
00:10:39,080 --> 00:10:43,970
And we also showed you how to use overrides on the symbols by changing the title label.
152

153
00:10:43,970 --> 00:10:46,820
And you can actually override more than just text.
153

154
00:10:46,820 --> 00:10:53,870
So if I just go and insert a tab, a bottom tab bar something like this.
154

155
00:10:53,870 --> 00:10:55,710
Let's just put that over here.
155

156
00:10:55,730 --> 00:10:59,230
For now I just want to show you that you can also override images.
156

157
00:10:59,240 --> 00:11:06,560
So for example, the first one here is just a blue box and I'm going to change this by hitting choose
157

158
00:11:06,560 --> 00:11:09,670
image and I'm going to go over to my workout app assets.
158

159
00:11:09,680 --> 00:11:11,920
I've got some tab bar icons saved here.
159

160
00:11:11,930 --> 00:11:17,330
I'm going to change it to the home.png. And you can see it appear here.
160

161
00:11:17,780 --> 00:11:19,750
And I'll change that text to home.
161

162
00:11:19,760 --> 00:11:22,950
So that was pretty simple and you can do the same for the rest of them.
162

163
00:11:22,970 --> 00:11:28,910
So overriding the images or overriding the text is as simple as just hitting a button and changing
163

164
00:11:28,910 --> 00:11:29,480
the text.
164

165
00:11:29,480 --> 00:11:35,900
So basically, I just want to show you how easy and intuitive it is to use a Sketch to create mockups
165

166
00:11:35,960 --> 00:11:41,820
for your apps or websites or whatever it is that you want to do. And it has a whole bunch of tools,
166

167
00:11:41,840 --> 00:11:47,180
it's super lightweight something like 100MB to download compared with Photoshop which takes
167

168
00:11:47,180 --> 00:11:51,380
up something crazy like 20GB. But it's not necessary when you're designing your mockup.
168

169
00:11:51,560 --> 00:11:57,470
Most of things that you'll be using is going over to the symbols page and browsing for the thing that
169

170
00:11:57,470 --> 00:11:58,880
you need from here.
170

171
00:11:58,880 --> 00:12:04,390
So you've got loads of things alerts, you've got pop ups, you've got keyboards etc.
171

172
00:12:04,580 --> 00:12:08,360
Finding the thing that you need and then inserting it into your appboard
172

173
00:12:08,600 --> 00:12:13,970
and then just editing it in the right hand side pain using some of these alignment tools in order to
173

174
00:12:13,970 --> 00:12:19,910
make it look centered or edge aligned or whatever it is that you need and then using the overrides for the
174

175
00:12:19,910 --> 00:12:21,620
symbols to change them.
175

176
00:12:21,620 --> 00:12:28,280
And I also showed you how to create your own symbols for designs that you want to reuse and how to insert
176

177
00:12:28,310 --> 00:12:28,930
images.
177

178
00:12:28,940 --> 00:12:33,590
So those are pretty much all the things that you need to know in order to create your designs in Sketch.
178

179
00:12:33,650 --> 00:12:40,280
So other than these components that Sketch provides by default, I'm going to show you another really
179

180
00:12:40,280 --> 00:12:44,300
great resource where you can get free Sketch design resources.
180

181
00:12:44,300 --> 00:12:48,090
So it's a website called sketchappsources.com.
181

182
00:12:48,290 --> 00:12:53,640
And on here you have a whole bunch of free resources that will help you with a lot of your designs.
182

183
00:12:53,660 --> 00:13:01,280
So some of these are vectors for icons such as these for example these icons and some of these are user
183

184
00:13:01,280 --> 00:13:05,740
interface designs and layouts for example something like this.
184

185
00:13:05,750 --> 00:13:11,310
And you can basically just download these resources and then unzip them
185

186
00:13:11,360 --> 00:13:14,110
and when you open them up...
186

187
00:13:14,210 --> 00:13:16,870
so this is called Stitch by...
187

188
00:13:16,870 --> 00:13:19,600
And I don't have those fonts but that's OK.
188

189
00:13:19,610 --> 00:13:24,350
Now here you can see the user interface that this designer has designed.
189

190
00:13:24,440 --> 00:13:28,880
And if you like one of these layouts for example, I think that looks pretty neat,
190

191
00:13:28,940 --> 00:13:36,090
you can just copy it over to your app. So there it is.
191

192
00:13:36,090 --> 00:13:40,470
And then if you need to adjust these things for example let's move that add to cart button down a bit
192

193
00:13:40,470 --> 00:13:42,470
more, then you can if you need to.
193

194
00:13:42,470 --> 00:13:49,410
So this is a super simple way of starting to design your mockups for your user interface and there are
194

195
00:13:49,410 --> 00:13:54,690
so many really really awesome free resources on sketchappsources.com.
195

196
00:13:54,690 --> 00:13:59,640
In fact this 2318 resources that designers have uploaded in here.
196

197
00:13:59,670 --> 00:14:00,880
It's a real candy store.
197

198
00:14:00,900 --> 00:14:06,180
It really is a nice window shopping experience where you can go and have a look at what else you might
198

199
00:14:06,180 --> 00:14:07,310
want to incorporate.
199

200
00:14:07,500 --> 00:14:14,520
So say if you needed to have a notification bar, then this person has very kindly designed a beautiful
200

201
00:14:14,520 --> 00:14:19,810
notification template and you can just copy that over to your Sketch file like we did before.
201

202
00:14:20,100 --> 00:14:27,120
Now I've taken the wireframes that I've created earlier on by sketching and I've turned them into mockups
202

203
00:14:27,210 --> 00:14:33,180
using Sketch. So you can take a look at the screens that I've designed based on those wireframes and
203

204
00:14:33,180 --> 00:14:36,940
I've shared the project in a link in the text box below.
204

205
00:14:37,380 --> 00:14:42,150
So that's another really cool feature about Sketch. You can share your designs with anyone or share it
205

206
00:14:42,150 --> 00:14:47,220
privately with a particular person and you can have a look at my thoughts for how the wireframes could
206

207
00:14:47,220 --> 00:14:50,120
be converted into mockups.
207

208
00:14:50,130 --> 00:14:55,020
Now these mockups are created in about an hour using some of the resources I've designed previously
208

209
00:14:55,170 --> 00:14:58,170
as well as some designs from Sketch app resources.
209

210
00:14:58,200 --> 00:14:59,760
So we really didn't take all that long.
210

211
00:14:59,760 --> 00:15:04,650
So have a look at those mockups and download Sketch and have a play around with it. In the next lesson
211

212
00:15:04,650 --> 00:15:09,890
we're going to talk about how to use another tool called Canva in order to design mockups.
212

213
00:15:09,900 --> 00:15:14,790
Now this is for people who don't have access to a Mac and therefore can't download and use Sketch.
213

214
00:15:14,790 --> 00:15:20,310
So we're going to show you a browser tool called Canva that allow you to build your mockups online without
214

215
00:15:20,340 --> 00:15:22,190
any specialized design tools.
215

216
00:15:22,230 --> 00:15:27,060
So have a look at those mockups and download Sketch and have a play around with it and I'll see you
216

217
00:15:27,060 --> 00:15:28,030
on the next lesson.