FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 InVision Overview

Hi everyone. Welcome back. In this lesson, we are going to start by looking at the InVision app online. This is the application that we're using to create the interactive features that we need for the prototype that we designed in Photoshop earlier. So the wonderful thing about this is that it lives right in your browser, so you can access it from any network connection that you have, any computer that you have and really get to work. When you first login to InVision, this is what you see. It's basically your desktop of opportunities and projects here. By default, when you just start out with a brand new account, you have a Mobile App Prototype, a Web App Prototype, and then a Clickable Wireframe. These are just three scenarios for you to get familiar with what InVision offers and click around with how they want you to look at interaction before you load in your prototype. So it's really cool if you're completely new to this and you're not sure what the possibility is to be able to look at these mockups that come for you. You also have the option to create your first project right here, which we are going to tackle in the next lesson. But this is going to get you to where you can just create your project and select what you want. Up here, you're also going to see your projects listed, so however many that you have, you have it here. The activity menu's really cool for when you start sharing your prototypes with other people, clients, for example, to get feedback on your project. So you're going to see the activity monitor fill up here as more and more interaction occurs. And then if you have people involved in your organization besides just yourself, you can see that it's just me right here. But if you had other people working, part of your design and development teams for example, you can add them here. The other cool thing is that you can create a team on the fly if you need to. So you can create more than just one. You can add people but you can upgrade your InVision account to be able to have a team and multiple teams. And that could be really handy for bigger organizations where you can have a design and development team and they need to interact separately. So you can do that. Otherwise, you just have yourself here. The other neat thing is that you're always going to have access to a link that's gonna show you all the new features that InVision is creating all of the time. They just released some new ones today, actually. So you can come and stay up to date with all of the cool things that they're constantly releasing for you and your application. You can also click here to go to your LiveShare. This is something that we're gonna talk about a little bit later for your interactive components here when you're sharing your screen, your application with people right through LiveShare. It's really cool because you can create a link you can see right here. So if I was ready to LiveShare a project I can invite people and get ready to go and then it kinda keeps track of it and right now it's just me. By the link that I can share with as well as a group chat. You could see me right here, but if there was more people you could see each of them and they could draw on this. That's just a quick overview of LiveShare. We're gonna look at this a lot further in depth later on, but that is a cool feature for your teams. There's also a new feature called Snaps which is associated with LiveShare, but it's also the ability to take snapshots of your website right away. So if you had an HTML version or High Fidelity version of your site, you can take snapshots of it and include it right into your projects and be able to interact with it that way. And then we have our profile over here where we can look at our profile, upgrade our plan, and Desktop Sync. Desktop Sync is a really cool feature because you can integrate Dropbox and Box is coming soon. But you also can download a folder for your Mac. This way you could drop in all of your projects right into the sync folder. It's gonna sync automatically, it saves a lot of time from having to upgrade. We are going to use this feature quite extensively coming up when we prep our file for this particular syncing method, and it's going to be a lot faster than coming in here and going to New Project through the web application. So that is a quick look at what InVison offers. If we were to go quickly into one of these examples before we dive into ours you can see what it looks like from the prototype view once you have project going. You can see that we have all of our screens here. These are the static screens that are created to mimic interaction between the application here. So there's quite a few different options. This is a mail app so there would obviously be a lot of different ways that we could look at this. The cool this is is that thanks to the naming feature you can see exactly what this is so that you can quickly scan through your screens and see exactly what each one is and all of the possibilities all the way down here. We can also mimic our loading screen and our icon for our mobile app which is really cool. It just adds to the whole flavor of prototyping, especially for clients who aren't as comfortable with the web. They'll be able to catch on really quickly and get a very good feel for this application. And again, we can follow our activity stream here and see what kind of comments we have going on. We can see that we've added a new screen so any activity that happens for this project is gonna be found here. Again, we can track our comments so we can see exactly what's going on. Comments act like an inbox now so it's very easy to kind of scan them and look at them. And then there's another cool feature for Assets. So if you have developers that you're bring on board, you can drop in your PSDs, your illustrator files, .png files, .jpgs, whatever you need to create this site. You can drop in those final assets here. And you can see that you can also sync from your desktop. And you can configure that to bring those files right across automatically. Over here we have some options for managing our projects. You can manage people, you can transfer the ownership of the project away from yourself, and you can do a lot of other things. You can even export everything out if you need to. LiveShare is going to be that option to where you can share your prototype with other people, you can all collaborate, and you also have the option to just share your project through the ability to share the URL. You can drop it in an email. You can even send it to a mobile device automatically which is going to give you that opportunity to interact with it on a mobile device quickly. You can embed the prototype if you need to. And then you can go ahead and download it for offline access for later on. So there's a lot of cool options with your project here that's going to enhance how you work with prototypes with InVision. Now if we go back to our screen you can click on any one of these to dive right into that one screen. You can see because it's a mobile application we're getting the nice mobile view here. It's within a iPhone mockup here so we can see exactly what this is going to look like on a mobile device. You can see that when we click here we already have some awesome interaction that's happening that's giving us a very cool vibe of what this would be like on a mobile device. And from here you can see that we have our screen that we're on and we can go back, just by clicking that. If we click back in here you can see that we can access all 29 of our screens just by clicking this box and we can switch between them, with ease. Over here we have preview mode which is where we're in right now. This allows us to view and interact with it in a live style mode here. If you want to go into build mode that's where you can create your hotspots. And you can see all of the linkage that's in place here for this mobile application. You can click on these at any time to go ahead and edit. You can see that this links to the inbox screen and the gesture is to tap it and the transition is to slide down. So you can actually put in realistic transitions into your prototype here so people really get a feel for what this would look like. You can also include this hotspot in a template so you can reuse it again and again. That way you don't have to recreate it. And then you can create that here and then you tell it the position relative to bottom of the design if you want to. And so this is either through Compose, Inbox- TopBar, Reply- TopBar. You have the options here to save this as a template if you want to and then you just hit Save. That's a quick look at the hot links. Again, we're gonna dive right into that in more detail later on. Comment Mode is where we're able to come in here and leave comments anywhere we want to. You can just click and then leave a comment and type it in. And you can send the notification to anybody on your team to see that. You can also limit who sees this if you would like to. That way not everybody on your team needs to see the comment. But that's a great way to leave comments on the design if you need to. But that's also how other people are going to leave comments to you. And then the wonderful thing about the History Mode. As you work through prototypes you're gonna go back and make changes. So we can come here and see multiple versions of this screen as we need to. You can see we just have one version right now but there would be a list here if you had several versions going on. We can go ahead and replace the screen at any time by dragging and dropping. That's one method. I'm gonna show you another method with the sync, the DesignSync that we're going to use later on. But this is a quick way to have alternate screens and replace the one that you currently have. They also changed the screen status. Right now we're in Progress but you can say Needs Review. And if it's approved and ready to roll you can mark it as approved. If you're in your configuration settings this is really neat because you can go ahead and pick a different version of the iPhone that you want. That way you can see it as the iPhone 5 or even back to the iPhone 4. And you can always say my design store is below the status bar, which means it's behind here, so you can dictate that. You can also set what you want the foreground and the background to be. That's cool. If you have a specific background color and it's merging together, or you really want that to pop off, make it very brand specific, you can go ahead and set that here. You can also hide the status bar for desktop viewing if you want to and then you save when you're done. And you also again have the option to LiveShare or share this at any time from within your screen. So you can do that at any time. Okay so that is a quick overview of InVision. Now we're actually going to see it in action by taking the prototype that we designed in this course and apply it to this application and see how awesome it is to use this application for finishing off our prototype.

Back to the top