0 1 00:00:00,770 --> 00:00:07,430 So another way of prototyping which is probably even easier than using Keynote is using a web app called 1 2 00:00:07,520 --> 00:00:08,650 Marvel app. 2 3 00:00:08,840 --> 00:00:14,720 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 4 00:00:14,720 --> 00:00:15,710 free account. 4 5 00:00:15,710 --> 00:00:15,980 All right. 5 6 00:00:15,980 --> 00:00:20,570 So once you've signed up in your free account you can just go ahead and click Create project. And I'm 6 7 00:00:20,570 --> 00:00:27,530 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 8 00:00:27,530 --> 00:00:28,740 to create project. 8 9 00:00:28,760 --> 00:00:34,370 Now they give you some beginning designs that you can simply drag on so I'll show you what that looks 9 10 00:00:34,370 --> 00:00:35,070 like. 10 11 00:00:35,120 --> 00:00:42,140 It's basically a whole load of screens that they've designed for you and you can go ahead and just use 11 12 00:00:42,140 --> 00:00:43,190 them to link up. 12 13 00:00:43,280 --> 00:00:46,440 And the way that Marvel app works is very similar to Pop. 13 14 00:00:46,640 --> 00:00:53,300 And it basically allows you to draw up areas that are able to be interacted with and you can link them 14 15 00:00:53,330 --> 00:00:55,490 to the next screen. 15 16 00:00:55,910 --> 00:01:03,170 And you hook them onto the next one and you continue adding these interactive areas until basically 16 17 00:01:03,170 --> 00:01:03,850 when you're done. 17 18 00:01:03,860 --> 00:01:10,460 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 19 00:01:10,460 --> 00:01:16,470 your designs into a really nice little prototype and you go ahead and just click through it essentially. 19 20 00:01:16,610 --> 00:01:17,550 So it's pretty neat 20 21 00:01:17,570 --> 00:01:22,430 and I'm going to show you how we can design our workout app in Marvel. Right. 21 22 00:01:22,460 --> 00:01:28,970 So after you created the mockups in Sketch there's a really neat way of importing them into Marvel. Now 22 23 00:01:29,000 --> 00:01:34,430 if you go to marvelapp.coms/prototype-with-sketch. The link is in the text box below. 23 24 00:01:34,460 --> 00:01:37,250 You can actually download a Sketch plugin. 24 25 00:01:37,250 --> 00:01:44,750 Now what that Sketch plugin allows you to do is that you can incorporate your Sketch images and designs 25 26 00:01:44,870 --> 00:01:46,850 into your Marvel prototypes. 26 27 00:01:46,850 --> 00:01:50,200 So I've already downloaded and installed the Sketch plugin. 27 28 00:01:50,210 --> 00:01:56,610 Now if I run the Marvel app I can go to Marvel and I can send it over to my workout app. 28 29 00:01:56,850 --> 00:01:57,130 OK. 29 30 00:01:57,140 --> 00:02:00,980 So now that's uploaded, let's go and check out our design and Marvel. 30 31 00:02:00,980 --> 00:02:01,250 OK. 31 32 00:02:01,250 --> 00:02:08,330 So these were some of the ones from previously and we can actually select all of them to get rid of 32 33 00:02:08,330 --> 00:02:12,130 them because we have our own mockups now 33 34 00:02:12,410 --> 00:02:12,710 right? 34 35 00:02:12,710 --> 00:02:17,500 Let's get rid of all of those images. Now that all we're left with is our app mockup. 35 36 00:02:17,540 --> 00:02:19,880 So let's add some links to them. 36 37 00:02:46,340 --> 00:02:46,660 All right. 37 38 00:02:46,670 --> 00:02:48,180 So that didn't take too long 38 39 00:02:48,200 --> 00:02:52,580 and now I've created some of the basic links in order for my app to work as a prototype. 39 40 00:02:52,610 --> 00:02:58,290 So let's go ahead and click done and let's play our prototype. 40 41 00:02:58,350 --> 00:03:04,520 Okay. So first thing we see is our welcome screen. So I'm going to login, takes me to the home screen. 41 42 00:03:04,670 --> 00:03:08,410 I'm going to hit start and that takes me to the workout session. 42 43 00:03:08,600 --> 00:03:14,570 Okay. So I forgot to add this part to the workout session so let's just go back and edit that. 43 44 00:03:24,960 --> 00:03:31,160 Get to refresh this sort to take into account any changes. hit end sessions go back to home screen 44 45 00:03:31,260 --> 00:03:33,550 and then I can go to the workout screen. 45 46 00:03:33,750 --> 00:03:41,540 I'm going to select my workouts, hit done, go to the workouts and then we can go back home screen again 46 47 00:03:41,550 --> 00:03:46,250 have a look at the calendar view have a look at the graph you toggle between the two. 47 48 00:03:46,440 --> 00:03:51,920 And that's how simple it is to create a prototype using your designs from Sketch. 48 49 00:03:51,930 --> 00:03:58,200 Now if you didn't create your mockups in Sketch, if you did it within Canva or within Photoshop or within 49 50 00:03:58,290 --> 00:04:03,180 any other program, you can also add the images to Marvel and link them up. 50 51 00:04:03,180 --> 00:04:08,340 Another thing that Marvel actually lets you do is to design the screens from scratch. 51 52 00:04:08,340 --> 00:04:14,940 So if you just hit the design button you actually go into their static image design screen. On here you 52 53 00:04:14,940 --> 00:04:21,270 can for example search their database of images, you can drag these onto the screen and arrange them as 53 54 00:04:21,270 --> 00:04:22,560 you see fit. 54 55 00:04:22,710 --> 00:04:30,960 And then we can add some buttons for example as this as a button and then add text or something like 55 56 00:04:31,500 --> 00:04:41,030 login and then we can move that text onto the button and then you can change its color. 56 57 00:04:41,040 --> 00:04:48,750 So let's make that white. And we can make it a little bit bigger and arrange all of that and then just 57 58 00:04:49,200 --> 00:04:52,080 copy and make another one of these. 58 59 00:04:57,550 --> 00:05:02,800 And you've just created another welcome screen and then you can click to add this to project and you 59 60 00:05:02,800 --> 00:05:06,670 can link it up with the rest of your prototype over here. 60 61 00:05:06,670 --> 00:05:09,360 Now this is another easy way to design your mockup 61 62 00:05:09,400 --> 00:05:14,010 if you don't want to use Sketch or some of the other design softwares that we spoke about. 62 63 00:05:14,200 --> 00:05:15,700 So this is super simple. 63 64 00:05:15,700 --> 00:05:20,950 You have access to a bunch of shapes, text, images as well as your own custom images. 64 65 00:05:20,980 --> 00:05:25,720 And basically you can do some simple layouts and you can link each of the screens together to produce 65 66 00:05:25,780 --> 00:05:26,590 a prototype.