Creating a Prototype in InVision
Lesson 2 from: App Design: Create a Working PrototypeAlexandra Moran
Creating a Prototype in InVision
Lesson 2 from: App Design: Create a Working PrototypeAlexandra Moran
Lessons
Lesson Info
Creating a Prototype in InVision
So, uh, I made a new account to so you guys could see what envisions gonna look like when you sign up there really great program. And they have some examples in here that you can click through to get an understanding of what what it's capable of. But I am going to make a new project, and I'm going to call it Parleys Donuts. And I'm going to choose IPhone because this is mobile app, and I've designed it for an IPhone five size, which is the phone that I have, which is the phone will be testing on today on I Want It in Portrait, which means it's vertical, not landscape ports. Until so this drops me right into add your files. Um, envision has a lot of features and great stuff to use, but it's not going to do anything without a some of your work Teoh go based off of. So I'm going Teoh, browse and pull up the stuff that I've created, which are all of these files. Okay, so now the app that I have, uh, ab screens that I have as PM Jews are dropped in on visible here, set a loading screen So t...
his is something that envision Says, uh, this screen is gonna display when your site when your app is launching. That's very common with that. You see an apse. It's just sort of a visual thing to look at while you are waiting for a tow load. So I'm going Teoh, drag my last splash screen that I designed, uh, in here to set it as the loading screen. And then I'm gonna reorder the rest of my screens in the way that I want the flow toe work. So I know that I want home to be first than Home added. Then I want my order, my form completion screen and my menu. So what this is going to do is if you just click through the APP without using any of the hot spots or any of the feature that we're about to get into, that's just going to be the order in which you see these screens. So it's helpful organisation for you. It also just makes the app make a little bit more sense. So if I click on this, it's going Teoh, pull up the preview of it as if it were actually on a phone, Um, and you can see off the bat. We've got a little bit of overlap here. So if you go down into this configuration settings icon, I can say that my design starts below the status bar, and that's gonna bump down all of my designs so that I can see, uh, see how they look accurately. And I'm gonna stay safe. So, uh, there a little bit hard to see? But there are arrows here that I can click back and forth through my screens, but because I want to build it out as a prototype and not just a slide show, I'm going to use hot spots. So down here, I can go into build mode, and I can click and drag to create hot spot. So if I click and drag here, you can see that this blue square comes up and then I get this pop up menu and basically what I'm doing is I'm creating a dummy link like it's very easy for me to do sort of feet coding here because envisions giving me all of these tools. So I'm gonna say is any time someone clicks on the hamburger menu, it's going to go. Ah, the hamburger icon. Excuse me. It's going to go to the menu, which I have designed and cute up eso The gesture here is a tap. There are lots of other options. Swipe writes like swipe breath left. Excuse me. And these air great. If they're gonna maybe make you think about different gestures that you can use in your mobile app. Hopefully, you have already thought through some of that as you're building and you just know which ones to choose. I'm gonna stick with tap for this one, and I'm gonna change my transition to push left. You can see there's a little animation here for how, Teoh For what the the effect is gonna look like. And I want it to look like my screen is lighting over. So I'm gonna say, push left. And I'm gonna include hot spot in a template, Not have any templates created yet, but I'm going to call this one menu and save it. And what that means is that on every other slide that I have, they're going to have a, uh, menu icon, and I want to be able to have the same functionality, so instead of having to build it every time I have this default set up for myself. Okay, so let's see what else? Um, in the screens that I have built. I know that if I hit this plus button, uh, I'm going to move to the next screen, which shows that there is, um, one chocolate frosted doughnut added to my my order. So I'm gonna have tap and instant be, um, be my targets, OK, and then down here at the bottom, I don't think I need to add anything else for this screen. So I'm gonna come out of hot spot mode, and then I'm back in preview mode, so you can see now I can scroll through, uh, as if it was a real phone. And what I can do is if I click here where there's non hot spot, it's gonna flash those blue boxes of the ones I just created so that I know where I can click for something to happen so I can click my menu and it slides over into the screen that I designed. And if I click back, it doesn't weren't get so I'm gonna go back into hot spot moon. And now I'm gonna make a hot spot here and I'm gonna just the size of it. What I'm gonna have this one dio is linked back slash clothes, which basically means that last screen that you were just on. So instead of choosing just specific slides in your flow, you can have different options here that envision gives you for, uh, different ways, Teoh, navigate around your your prototype and I'm gonna have it push right. So I have the same feeling of opening and closing on what this does and you'll see when we test it is, it starts to feel kind of like a really app. And the more the closer that you can get it to what you want it to be coated, the better it's gonna be for you to understand what the experience will be and for your developer to understand what you're looking for. Okay, so lets navigate back to our home added screen, which is just gonna have, um, the hot spots on it. So I am going Teoh scroll down here and add one in for are but in at the bottom, complete order. And I want to send that to my review order screen. Um, I'm gonna save the other thing I'm gonna dio is a peer of the top. I'm going to add in my menu hot spot on DSO There. You can see it's green because of the template and this one's blue because it's a one off button. All right, so moving through we did our home screen or home added screen and I review order screen eso again. I'm gonna go into hot spot mode. I'm gonna add in my menu. I'm going to create a one off button for pay. And I want that to move to payment anthem and then here in the form again, I am going Teoh hot spot mood at my menu tech there and then create a button here for confirmed. So this is a very light prototype. Just a small chunk of an app to show you guys what you can do with envision and how useful it's gonna be. Typically, you'd have a lot more screens in there that you'd be working with. Um So what at that one in Great. Yeah. Here. We'll add our menu. Make sure we've hit all of our screens. Okay, Great So this is saved to my account now, and what I'm gonna do is switch to my phone and open up the envision app and look at what I just made. And so the importance of doing this in switching to your phone is envisioned as a pretty good job of putting it in a phone template. But it's not quite the same as holding it in your hand and really feeling like, uh, feeling how the user's gonna feel when they're looking at it. I worked at an agency and we were going back and forth for possibly even a week on the font size should be 12. The font size should be 15. The funds that should be 12 and it was different. People on the team had different opinions about what it should be. And then we finally looked at it on a phone, and the answer was very obvious. There was no need for all of the back and forth discussion because 12 was obviously too small for all of us to see, and 15 was just rate. So it really helps you understand, uh, how this is gonna be used in context and not just how you think it's gonna show up