So another way of prototyping which is probably even easier than using Keynote is using a web app called 1
Marvel app. 2
Now it's at www.marvelapp.com and it's free to sign up and you can build a three app prototypes on a 3
free account. 4
All right. 5
So once you've signed up in your free account you can just go ahead and click Create project. And I'm 6
going to call mine Workout app and I'm going to select a cam the size of iPhone 6 and then I'm going 7
to create project. 8
Now they give you some beginning designs that you can simply drag on so I'll show you what that looks 9
like. 10
It's basically a whole load of screens that they've designed for you and you can go ahead and just use 11
them to link up. 12
And the way that Marvel app works is very similar to Pop. 13
And it basically allows you to draw up areas that are able to be interacted with and you can link them 14
to the next screen. 15
And you hook them onto the next one and you continue adding these interactive areas until basically 16
when you're done. 17
And if I go from the beginning and I show you right now it looks like is Marvel is able to put all of 18
your designs into a really nice little prototype and you go ahead and just click through it essentially. 19
So it's pretty neat 20
and I'm going to show you how we can design our workout app in Marvel. Right. 21
So after you created the mockups in Sketch there's a really neat way of importing them into Marvel. Now 22
if you go to marvelapp.coms/prototype-with-sketch. The link is in the text box below. 23
You can actually download a Sketch plugin. 24
Now what that Sketch plugin allows you to do is that you can incorporate your Sketch images and designs 25
into your Marvel prototypes. 26
So I've already downloaded and installed the Sketch plugin. 27
Now if I run the Marvel app I can go to Marvel and I can send it over to my workout app. 28
OK. 29
So now that's uploaded, let's go and check out our design and Marvel. 30
OK. 31
So these were some of the ones from previously and we can actually select all of them to get rid of 32
them because we have our own mockups now 33
right? 34
Let's get rid of all of those images. Now that all we're left with is our app mockup. 35
So let's add some links to them. 36
All right. 37
So that didn't take too long 38
and now I've created some of the basic links in order for my app to work as a prototype. 39
So let's go ahead and click done and let's play our prototype. 40
Okay. So first thing we see is our welcome screen. So I'm going to login, takes me to the home screen. 41
I'm going to hit start and that takes me to the workout session. 42
Okay. So I forgot to add this part to the workout session so let's just go back and edit that. 43
Get to refresh this sort to take into account any changes. hit end sessions go back to home screen 44
and then I can go to the workout screen. 45
I'm going to select my workouts, hit done, go to the workouts and then we can go back home screen again 46
have a look at the calendar view have a look at the graph you toggle between the two. 47
And that's how simple it is to create a prototype using your designs from Sketch. 48
Now if you didn't create your mockups in Sketch, if you did it within Canva or within Photoshop or within 49
any other program, you can also add the images to Marvel and link them up. 50
Another thing that Marvel actually lets you do is to design the screens from scratch. 51
So if you just hit the design button you actually go into their static image design screen. On here you 52
can for example search their database of images, you can drag these onto the screen and arrange them as 53
you see fit. 54
And then we can add some buttons for example as this as a button and then add text or something like 55
login and then we can move that text onto the button and then you can change its color. 56
So let's make that white. And we can make it a little bit bigger and arrange all of that and then just 57
copy and make another one of these. 58
And you've just created another welcome screen and then you can click to add this to project and you 59
can link it up with the rest of your prototype over here. 60
Now this is another easy way to design your mockup 61
if you don't want to use Sketch or some of the other design softwares that we spoke about. 62
So this is super simple. 63
You have access to a bunch of shapes, text, images as well as your own custom images. 64
And basically you can do some simple layouts and you can link each of the screens together to produce 65
a prototype.