0
1
00:00:00,300 --> 00:00:05,610
Now if you don't have access to Sketch I'm going to show you something else that you can use.
1

2
00:00:05,670 --> 00:00:13,650
Now one option you have is something called canva.com and this is one of my favorite tools for creating
2

3
00:00:13,650 --> 00:00:20,160
posters for creating social media posts for creating all sorts of beautiful layouts because they have
3

4
00:00:20,220 --> 00:00:25,980
loads and loads of templates that you can essentially edit and design to make it look good. But you can
4

5
00:00:25,980 --> 00:00:29,040
also use it to create mockups.
5

6
00:00:29,100 --> 00:00:34,170
So if you go into the website and you say "use custom dimensions" and then you put in the dimensions
6

7
00:00:34,170 --> 00:00:39,980
for the screen size of an iPhone which I think is 750 X 1344.
7

8
00:00:40,290 --> 00:00:48,580
And then you go ahead and hit design, and now you'll have a blank canvas to start designing your apps.
8

9
00:00:48,600 --> 00:00:53,880
Now if you go into search and you search for wireframe, it'll bring up a whole load of components that
9

10
00:00:53,880 --> 00:00:55,870
you can drag and drop on screen.
10

11
00:00:55,890 --> 00:00:58,740
Now some of these components are paid but most of them are free.
11

12
00:00:58,740 --> 00:01:04,860
So for example if you needed drag in a nav back button all you have to do is that resize and then put
12

13
00:01:04,860 --> 00:01:13,670
it over there and then maybe we want something like a list of items over here something like this.
13

14
00:01:13,980 --> 00:01:19,020
And then you can also add in custom shapes squares or circles or whatever.
14

15
00:01:19,200 --> 00:01:26,940
So let's drag a square onto here and make that little bit bigger
15

16
00:01:26,940 --> 00:01:37,950
to create a navigation screen. There we go. And just make it go back back back and let's change the color to maybe
16

17
00:01:37,950 --> 00:01:39,400
a dark gray.
17

18
00:01:39,430 --> 00:01:46,000
There we go. Now we're starting to have something that's looking a bit more like a app. Add a heading
18

19
00:01:46,110 --> 00:01:52,370
and call it "My App" drag that right up here.
19

20
00:01:52,770 --> 00:01:57,490
Let's change that font into something a bit more like this
20

21
00:01:57,540 --> 00:02:03,080
and then you can create a second screen just by hitting add a new page and it'll be the same dimensions.
21

22
00:02:03,330 --> 00:02:05,600
And you can continue to drag and drop things.
22

23
00:02:05,700 --> 00:02:10,810
You've got access to a whole bunch of color palettes backgrounds,
23

24
00:02:10,920 --> 00:02:15,100
so something nice like this like a honeycomb design.
24

25
00:02:15,510 --> 00:02:20,070
And you've got loads of text styes  that you can choose from.
25

26
00:02:20,100 --> 00:02:23,600
So maybe in your app you want something that looks a bit like that.
26

27
00:02:23,610 --> 00:02:31,080
Now of course Canva is actually optimized mostly for print design but I quite like this way of adding
27

28
00:02:31,080 --> 00:02:37,200
a new page to just create another canvas and the ability to drag and drop a whole load of things.
28

29
00:02:37,230 --> 00:02:44,040
So in their elements section, you can have a look at a whole bunch icons that they've got that you can
29

30
00:02:44,040 --> 00:02:52,800
have access to for free so your profile icon for example which might go down here in the tab bar and the
30

31
00:02:52,800 --> 00:02:57,810
simple ability of just dragging and dropping, resizing and putting new things on them.
31

32
00:02:57,990 --> 00:03:04,140
Now of course they don't have a lot of user interface elements such as the status bar or the navigation
32

33
00:03:04,140 --> 00:03:10,610
bar but it's quite easy to actually search for images and just drag and drop them on there.
33

34
00:03:10,620 --> 00:03:16,050
And if nothing comes up that seems useful to you, you can always go to Google and search for whatever
34

35
00:03:16,050 --> 00:03:20,060
image it is that you need whether it's a navigation bar whether it's a status bar
35

36
00:03:20,190 --> 00:03:23,990
and then you simply upload it and drag it drop it onto your screen.
36

37
00:03:24,120 --> 00:03:32,280
You can also share your canva with other people and you can download it as images or as PDFs for use
37

38
00:03:32,370 --> 00:03:33,890
elsewhere as well.
38

39
00:03:33,900 --> 00:03:39,180
So that's a really quick and easy way of making mockups if you don't have access to Sketch.