So how did your mockup process go? 1
Now the question is what to do once you've created all of these beautiful high fidelity photorealistic 2
mockups? 3
What's the next stage that you should take your designs to? 4
Well the next stage of the workflow of a digital designer is turning those mockups into what are called 5
prototypes. Now prototypes are essentially animated versions of all of those designs. 6
So it'll show how your app would look and work and animate in real life. 7
It's almost like you have the app in your hand and you're using it. 8
Now none of this involves any code. 9
It's all just through design work. And I'm going to show you some of the tools that are most commonly 10
used to create these prototypes. 11
Now one of my favorite tools is Marvel. 12
I spoke about it briefly before in terms of how you can use it to create mockups. But in this context 13
I'm going to show you how you can use Marvel to create prototypes that you can download onto your phone 14
and you can start showing people a working prototype. 15
Now Marvel's biggest competitor is invision and it's equally nice to use equally intuitive. And they 16
can both pretty much do the same things and they both have quite a comfortable free tier for you to 17
start getting your feet wet and get used to using these tools. 18
Now there's another tool that I quite like Principle. 19
Now this is again a Mac app and it's designed very similarly to Sketch. 20
So it's very much focused on user interface prototyping and it's very specialized for that. 21
And finally there's another tool called proto.io. 22
Now between these four tools I'm sure you'll be able to find your favorite one for prototyping. 23
Currently I'm mostly working in Principle and Marvel. So I can use principle to do some more fancy stuff 24
and Marvel to create some basic interactions and I'll show you all of that in a little bit later on. 25
So firstly let's show you what Principle can do. 26
It's basically a Mac app that allows you to set up really simple animations and essentially it works 27
mostly through tween animations. 28
Now tween animations are basically this animation concept where you give the computer image A with position A 29
and size A and then you move the image to another point or you change its size and then you allow the 30
computer to work out all of the frames in between. 31
So let me show you a really simple way of creating tween animation in a tool that you'll be surprised 32
about. 33
And that's Keynote. 34
So I'm going to create a new presentation just going to choose the white one. 35
And on here I'm going to put on an image. 36
I'm going to head over to my workout images and let's put something like the lunge over here. 37
So we got the lungeing person over here. 38
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
make her just a little bit bigger. 40
So she's going to go from the left bottom corner to the right bottom corner and increase a little bit 41
in size. 42
Now if I select the first slide and I add this transition effect called a magic move which is basically 43
putting in a tween animation. 44
And when you run the slide it basically computes all the different frames in between that it needs to 45
animate this image going from here to here increasing in size and moving in position. 46
So that's basically how a lot of these prototyping tools work. 47
And in fact you can actually use Keynote to produce your prototypes as well. 48
And in the next lesson I'll show you how you can build your prototypes using Marvel as well as Keynote. 49
So all of that and more on the next lesson. 50
See you there.