So in order to get started with Sketch all you have to do is head over to www.sketchapp.com and download 1
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
how to use it and see if it's the right kettle of fish for you. 3
Now Sketch is only currently available for Mac and if you're running Windows or you don't have access 4
to a Mac laptop 5
I'll show you later on how to use Marvel to do your mockup prototyping. 6
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
Sketch and how to use it to create mockups and designs 8
and once you downloaded it and installed it and open it it should take you to a welcome screen like this 9
one. And we're going to click on the iOS UI design to bring up the iOS template. And I'm just going 10
to save my file as a Sketch example and I'll put it into my documents. 11
OK. Cool. 12
So that's done. Now 13
let me just show you around. 14
So Sketch is optimized for UI design and it's also really really good for creating vector objects. 15
So most of the icons that you'll see on the toolbar here are for designing vectors. 16
Now you can change your toolbar preferences to display whatever it is that you want up here. 17
So in the left hand pane you've got the navigation area. You're navigating between your different pages 18
and also something called symbols. 19
So symbols is something that's new to the current version of Sketch. 20
So I'm using Sketch 41 at the moment which is the latest version. And symbols is a really really cool 21
feature because it allows you to create reusable components that you can put into your designs for example 22
how many times are you going to need a navigation bar in each of your screens? 23
Many many times 24
right? 25
Instead of designing all of them again and again, you can just simply put in a symbol. 26
And when you update the design for the symbol all of the other ones update. 27
So it's really neat and I'm going to show you how we use it. 28
So first things first, we've got this page 1 that has a bunch of iOS UI components. 29
It's got keyboards, 30
it's got status bars, 31
it's got navigation bars. 32
And you'll notice this infinite zoom that you have within a sketch. So you can zoom in as much as you 33
like and because everything is vector it will forever stay sharp. 34
So depending on what you need you can pick it out of this template. 35
So the first thing that we're going to do is we're going to create a new page. 36
So I'm going to go to file, new page and I'm going to call this page iOS App. 37
So the way they usually use pages in Sketch is for different platforms. 38
So I'll have one page for my website, 39
I'll have one page for the iOS app mockup, 40
I'll have one page for the Android app mockup for example. 41
So now I've created my new iOS page and you can see where I've actually got an infinite canvas 42
so it just goes on and on. 43
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
in my app. 45
So if you just hit insert, artboard, and you can choose what kind of artboard you want. 46
So we want iOS devices to be selected and I'm going to pick the one that's iPhone 7. 47
So this is the screen dimensions for an iPhone 7 design and we're ready to design. 48
So the first thing that we're going to do is head over to that template and find a nice status bar to 49
put it into our app mockup. 50
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
I'll probably go for a light status bar 52
so maybe something like this. And then I'm just going to copy and put that in here paste here. There we 53
get. 54
So now it's kind of invisible because it's white but that's okay. 55
We're going to go back and grab our dark navigation screen and then all will be well. 56
So let's paste that here and put that over here. 57
And now you can see it's covering the status bar so we can either send it to back or you can actually 58
arrange the order of your layers like so. 59
OK. 60
So that's looking pretty neat. 61
Now we're going to want to change the title of our navigation bar. 62
So obviously each of our navigation bars are going to have a different title. 63
So the simplest way is just selecting the symbol which are denoted by these what looks like the recycle 64
symbol to me. 65
I'm sure there's a better way of describing that. 66
But anyways. 67
So now you can do something called override. If you have a whole bunch of boards, 68
let's just put in another one, and you want to have navigation bars on each of them 69
right? 70
So then you could copy this one over and paste it over here. 71
Now while I'm here, I'm just going to show you another way of inserting symbols and it is used when you 72
know already what it is that you want. 73
If you just go into insert, symbol, and then you can navigate to the thing that you need. 74
So currently I'm looking for navigation bar and I know that it's called normal dark from browsing. 75
And now if I click on that then it becomes attached to my mouse cursor and it'll be placed wherever 76
I click on. 77
So I'm just going to put it here. 78
Ok cool. 79
So now I have two navigation bars and obviously I want different titles for each of them. 80
So let's change this title by using the override over here on the right and we'll call that home screen. 81
And this one that we'll call workout screen. 82
Now obviously that's up to you whatever it is that you want to put in there and you can also override 83
the cancel and the Done buttons. 84
So that's that. 85
Now let's go back to the home screen and I want to add a bit more design to it. 86
Now the next thing I would add is a background to my screen. So I'm just going to draw a rectangle and 87
pretty much have it the size of the screen and we're going to fill it with a gradient. 88
So let's pick our gradient colors and we'll just choose something quite simple like that. 89
And you can obviously change the directions of the gradients or the degree of the gradient by just manipulating 90
this little line here. 91
I think that looks fine. 92
So now let's just send that back. 93
Now this top navigation bar is looking a bit too dark for me now so I'm going to reduce the opacity and 94
make it look more iOScy. 95
That's not a word definitely. But opacity down to about 65% 96
and it looks a little bit more translucent. 97
That looks brilliant. 98
So the next thing I want to do is I want to insert a button. 99
So I'm going to create a button by drawing a rectangle shape like so 100
and then we can make that center aligned by going over here and clicking the center alignment button. 101
Now it's bang in the middle. And I want to change the fill to maybe a solid color like a red color. 102
Next I'm going to add a bit of text. 103
So let's just write something like button. 104
I'm going to change the font size to maybe 30 and I'm going to select the rectangle and my button text 105
and I'm going to center them both together. 106
Now next I want to make it a little bit round. So let's just increase that radius to bit more like that. 107
That looks great. 108
So now I'm happy with my button. 109
I'm done designing it. 110
So I want to put this button and a number of places. 111
So I'm going to turn it into a symbol. 112
Now if I select my text and my button together I can either group this by hitting group selection which 113
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
by clicking this button here which is create symbol. 115
So I'm going to call my symbol "Red button" which seems descriptive and I'm going to leave this check 116
to send it to the symbols page over here. 117
Hit OK. 118
OK that's done. 119
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
button over here. 121
So, now if we go back to our iOS app and I want to put this button on another screen say over here. 122
Then I can simply go insert, symbol, red button, and I can put it wherever it is that I want. 123
And instead of the text saying button everywhere which is a bit dumb, I can override it to say "Click me" 124
or over here or something like "Download". 125
So that's pretty easy. 126
Now what if I become unhappy with the way that the button is designed? 127
Well it's equally easy to change that symbol. If we head over to the symbol page and I'm going to 128
change the fill now to a different color a light green. 129
There we go. 130
And if I head back to the iOS app you can see that all the changes are reflected everywhere. 131
So the other thing that you might need to do is inserting images like so. 132
So if we go over to our workout app asset, we've got some images over here. 133
Let's just select the lunge one. 134
There we go. 135
So there's a lunge and we can put it over here. 136
You can resize it have a you like, you can put it behind everything or you can put it in front or you 137
can line it up with the button by again going like this or you just select everything here. 138
Then we can line it up in the center of the screen. 139
So how easy was that? 140
Within five minutes of barely designing, I've got a home screen with a navigation bar, a status bar with 141
an image and a button 142
and then I can go on to design my next screens etc. 143
So I would say that 95% of the time when you're designing your app screen all you need to do 144
is just to use the symbols that are provided in the iOS UI template 145
and remember that you can either insert them like so or you can go to page one browse for the one that 146
you like and then just copy and paste it over. And then we learned a little bit about using colors using 147
gradients 148
and there's a whole different variety of colors that you can pick and choose from. 149
Ideally just go through them, try it out, 150
play around with it and see which one you like. 151
And we also showed you how to use overrides on the symbols by changing the title label. 152
And you can actually override more than just text. 153
So if I just go and insert a tab, a bottom tab bar something like this. 154
Let's just put that over here. 155
For now I just want to show you that you can also override images. 156
So for example, the first one here is just a blue box and I'm going to change this by hitting choose 157
image and I'm going to go over to my workout app assets. 158
I've got some tab bar icons saved here. 159
I'm going to change it to the home.png. And you can see it appear here. 160
And I'll change that text to home. 161
So that was pretty simple and you can do the same for the rest of them. 162
So overriding the images or overriding the text is as simple as just hitting a button and changing 163
the text. 164
So basically, I just want to show you how easy and intuitive it is to use a Sketch to create mockups 165
for your apps or websites or whatever it is that you want to do. And it has a whole bunch of tools, 166
it's super lightweight something like 100MB to download compared with Photoshop which takes 167
up something crazy like 20GB. But it's not necessary when you're designing your mockup. 168
Most of things that you'll be using is going over to the symbols page and browsing for the thing that 169
you need from here. 170
So you've got loads of things alerts, you've got pop ups, you've got keyboards etc. 171
Finding the thing that you need and then inserting it into your appboard 172
and then just editing it in the right hand side pain using some of these alignment tools in order to 173
make it look centered or edge aligned or whatever it is that you need and then using the overrides for the 174
symbols to change them. 175
And I also showed you how to create your own symbols for designs that you want to reuse and how to insert 176
images. 177
So those are pretty much all the things that you need to know in order to create your designs in Sketch. 178
So other than these components that Sketch provides by default, I'm going to show you another really 179
great resource where you can get free Sketch design resources. 180
So it's a website called sketchappsources.com. 181
And on here you have a whole bunch of free resources that will help you with a lot of your designs. 182
So some of these are vectors for icons such as these for example these icons and some of these are user 183
interface designs and layouts for example something like this. 184
And you can basically just download these resources and then unzip them 185
and when you open them up... 186
so this is called Stitch by... 187
And I don't have those fonts but that's OK. 188
Now here you can see the user interface that this designer has designed. 189
And if you like one of these layouts for example, I think that looks pretty neat, 190
you can just copy it over to your app. So there it is. 191
And then if you need to adjust these things for example let's move that add to cart button down a bit 192
more, then you can if you need to. 193
So this is a super simple way of starting to design your mockups for your user interface and there are 194
so many really really awesome free resources on sketchappsources.com. 195
In fact this 2318 resources that designers have uploaded in here. 196
It's a real candy store. 197
It really is a nice window shopping experience where you can go and have a look at what else you might 198
want to incorporate. 199
So say if you needed to have a notification bar, then this person has very kindly designed a beautiful 200
notification template and you can just copy that over to your Sketch file like we did before. 201
Now I've taken the wireframes that I've created earlier on by sketching and I've turned them into mockups 202
using Sketch. So you can take a look at the screens that I've designed based on those wireframes and 203
I've shared the project in a link in the text box below. 204
So that's another really cool feature about Sketch. You can share your designs with anyone or share it 205
privately with a particular person and you can have a look at my thoughts for how the wireframes could 206
be converted into mockups. 207
Now these mockups are created in about an hour using some of the resources I've designed previously 208
as well as some designs from Sketch app resources. 209
So we really didn't take all that long. 210
So have a look at those mockups and download Sketch and have a play around with it. In the next lesson 211
we're going to talk about how to use another tool called Canva in order to design mockups. 212
Now this is for people who don't have access to a Mac and therefore can't download and use Sketch. 213
So we're going to show you a browser tool called Canva that allow you to build your mockups online without 214
any specialized design tools. 215
So have a look at those mockups and download Sketch and have a play around with it and I'll see you 216
on the next lesson.