Start with prototyping

- [Instructor] Let's start talking about prototyping, which is one of the reasons why we're using Marvel App to begin with. We've got the Pizza App open here, and I hope you've got some screens in there, or at least some kind of screens that you've been playing around with or working with, and the main idea here with Marvel App is that we're going to add our design content using a bunch of methods that we discussed previously. And now we're going to go in and we're going to start to add the interactivity. If you notice right up here, you're going to see we have the Play button. So for this project, or prototype, they call it, we can go take a look at it.

I'm going to tap on the Play button here, and we can play this on-device if we have the app, for instance, iOS or Android, or we can do it right here, there's a lot of ways to get this done. But you're going to see it's going to put it in a shell of whatever you chose to be the size of the content, so essentially when we started this project, we picked iPhone Six. You're going to notice right here, here it is right here. If we want to, we don't have any interactivity yet, meaning if I come out here and just start clicking, and trying to swipe and things, there's nothing out here yet. But if you look down here, you're going to see, we have a series of buttons we can work with.

I can tap on Next Screen, and you're going to see the Arrow key, there's a shortcut there, you can use the Arrow keys on your keyboard to go between screens, there we go, something like that. And it's just going to look, not great, to be honest, but that's fine. You can go to the Home screen, which is what we're at right now, and you're going to see a shortcut there, the letter H. You can even look at the different screens overview, if you're trying to jump to one to see what's going on. And so if I tap on Screens Overview there, I'll see all the screens, I can then click on one, it'll take that screen, and it'll preview it in the phone, so we can take a look and see what we've got here.

Okay, now, this is going to open in a separate browser window typically, so if we want to go back, we can just close this window and come back to the project. Now the way we start to add this interactivity where people can click or tap, is by adding hot spots. So we actually have to go to the screen we want to add the interactivity to, and we go Edit the Screen. So this is one of the first times we're going to go in here, but if you come to the Home screen, this one right here, come in to the middle, hover over it, you're going to see the big button Edit. Go ahead and tap on that, and it's going to take us in.

Now I just want to talk about this just for a minute, and then we're going to jump into adding interactivity. This is where we can go to, like I said, add hot spots. You'll notice up here that we have this slider, you can just slide between all the different screens that we have. You can also use your Right Arrow and Left Arrow on your keyboard to go between them. And you'll notice the name of the screen right here, you'll also see that we have Replace, which allows us to replace the image currently there, and that's just going to say, oh, okay, let's go out and grab another one, usually on your hard drive, and replace it.

We also have a Timer, we're going to talk about that. You can have it go between the different screens automatically. We can Play, which means let's go preview it, preview the prototype. And if you're done doing what you need to do, there's Done. There's also a little zoom in and zoom out right here you can use. And you'll see these keyboard shortcuts, which are actually really useful. And you'll see Fixed Header, we're going to talk about that later. You'll also, if you scroll down here, I'm using the scroll wheel on my mouse, you'll see a Fixed Footer, we'll talk about that as well. What we're going to do next is we're going to start to add some interactivity, so leave this open.