0
1
00:00:00,630 --> 00:00:03,770
So how did your mockup process go?
1

2
00:00:03,990 --> 00:00:10,790
Now the question is what to do once you've created all of these beautiful high fidelity photorealistic
2

3
00:00:10,870 --> 00:00:11,470
mockups?
3

4
00:00:11,490 --> 00:00:14,180
What's the next stage that you should take your designs to?
4

5
00:00:14,310 --> 00:00:20,550
Well the next stage of the workflow of a digital designer is turning those mockups into what are called
5

6
00:00:20,550 --> 00:00:27,040
prototypes. Now prototypes are essentially animated versions of all of those designs.
6

7
00:00:27,120 --> 00:00:32,220
So it'll show how your app would look and work and animate in real life.
7

8
00:00:32,310 --> 00:00:35,360
It's almost like you have the app in your hand and you're using it.
8

9
00:00:35,460 --> 00:00:37,610
Now none of this involves any code.
9

10
00:00:37,620 --> 00:00:42,360
It's all just through design work. And I'm going to show you some of the tools that are most commonly
10

11
00:00:42,360 --> 00:00:45,120
used to create these prototypes.
11

12
00:00:45,150 --> 00:00:47,990
Now one of my favorite tools is Marvel.
12

13
00:00:48,000 --> 00:00:54,420
I spoke about it briefly before in terms of how you can use it to create mockups. But in this context
13

14
00:00:54,420 --> 00:00:59,850
I'm going to show you how you can use Marvel to create prototypes that you can download onto your phone
14

15
00:01:00,150 --> 00:01:03,320
and you can start showing people a working prototype.
15

16
00:01:03,320 --> 00:01:09,450
Now Marvel's biggest competitor is invision and it's equally nice to use equally intuitive. And they
16

17
00:01:09,450 --> 00:01:14,290
can both pretty much do the same things and they both have quite a comfortable free tier for you to
17

18
00:01:14,290 --> 00:01:18,320
start getting your feet wet and get used to using these tools.
18

19
00:01:18,360 --> 00:01:21,210
Now there's another tool that I quite like Principle.
19

20
00:01:21,270 --> 00:01:26,750
Now this is again a Mac app and it's designed very similarly to Sketch.
20

21
00:01:26,880 --> 00:01:32,430
So it's very much focused on user interface prototyping and it's very specialized for that.
21

22
00:01:32,430 --> 00:01:35,450
And finally there's another tool called proto.io.
22

23
00:01:35,460 --> 00:01:41,430
Now between these four tools I'm sure you'll be able to find your favorite one for prototyping.
23

24
00:01:41,430 --> 00:01:47,640
Currently I'm mostly working in Principle and Marvel. So I can use principle to do some more fancy stuff
24

25
00:01:48,060 --> 00:01:53,100
and Marvel to create some basic interactions and I'll show you all of that in a little bit later on.
25

26
00:01:53,100 --> 00:01:55,620
So firstly let's show you what Principle can do.
26

27
00:01:55,620 --> 00:02:02,220
It's basically a Mac app that allows you to set up really simple animations and essentially it works
27

28
00:02:02,220 --> 00:02:04,440
mostly through tween animations.
28

29
00:02:04,440 --> 00:02:10,800
Now tween animations are basically this animation concept where you give the computer image A with position A
29

30
00:02:10,830 --> 00:02:17,220
and size A and then you move the image to another point or you change its size and then you allow the
30

31
00:02:17,220 --> 00:02:20,230
computer to work out all of the frames in between.
31

32
00:02:20,310 --> 00:02:24,930
So let me show you a really simple way of creating tween animation in a tool that you'll be surprised
32

33
00:02:24,930 --> 00:02:25,380
about.
33

34
00:02:25,380 --> 00:02:27,100
And that's Keynote.
34

35
00:02:27,210 --> 00:02:31,450
So I'm going to create a new presentation just going to choose the white one.
35

36
00:02:31,560 --> 00:02:34,140
And on here I'm going to put on an image.
36

37
00:02:34,140 --> 00:02:40,210
I'm going to head over to my workout images and let's put something like the lunge over here.
37

38
00:02:40,230 --> 00:02:42,240
So we got the lungeing person over here.
38

39
00:02:42,510 --> 00:02:50,340
And I'm going to copy and paste this slide and then I'm going to move her over here and I'm going to
39

40
00:02:50,340 --> 00:02:52,150
make her just a little bit bigger.
40

41
00:02:52,170 --> 00:02:56,840
So she's going to go from the left bottom corner to the right bottom corner and increase a little bit
41

42
00:02:56,850 --> 00:02:57,810
in size.
42

43
00:02:57,810 --> 00:03:03,630
Now if I select the first slide and I add this transition effect called a magic move which is basically
43

44
00:03:03,630 --> 00:03:05,540
putting in a tween animation.
44

45
00:03:05,580 --> 00:03:12,450
And when you run the slide it basically computes all the different frames in between that it needs to
45

46
00:03:12,450 --> 00:03:17,520
animate this image going from here to here increasing in size and moving in position.
46

47
00:03:17,550 --> 00:03:20,920
So that's basically how a lot of these prototyping tools work.
47

48
00:03:20,940 --> 00:03:26,940
And in fact you can actually use Keynote to produce your prototypes as well.
48

49
00:03:26,940 --> 00:03:34,010
And in the next lesson I'll show you how you can build your prototypes using Marvel as well as Keynote.
49

50
00:03:34,050 --> 00:03:36,510
So all of that and more on the next lesson.
50

51
00:03:36,510 --> 00:03:37,260
See you there.