In this video Dennis will walk you through how to create your first mobile prototype. He'll show you how to select from a list of prototype styles and how to configure your prototype and customise the skins. Dennis will also cover the various ways to upload screens into InVision to begin building your prototype.
- [Voiceover] Before we begin building prototypes, I'd like to give you more context of what prototypes are and how they work inside InVision. So why is it important to prototype? Prototyping makes it easier for stakeholders to understand your ideas and it eliminates a lot of the gray area since they can interact with it. You're able to get real context feedback much sooner. It allows you to build fast, test, and evolve your ideas while eliminating expensive rework and code later. So what makes InVision prototyping so cool? InVision prototypes make it easy to turn screens into clickable ideas without having to write any code.
It can accept whatever fidelity of design you throw at it so maybe it's a napkin sketch or early wire-frame or something far more designed and polished that you've done in Photoshop. You can make a prototype with it. It can be integrated with Photoshop and Sketch and so many other tools that you use every day. So now that you know more about prototypes, let's take a look how you can build one quickly and easily inside InVision. To build your first prototype, simply go to Prototypes and click the pink button. From here, you'll name the prototype, and choose from a variety of prototype options that are available to you.
From Desktop, iPad, iPhone and even wearable devices. From here, we're going to just choose an iPhone. We're going to keep it in portrait mode and we're going to create the prototype. Here's where we'll add screens to our prototype. You can choose them from your computer, through Photoshop, Sketch, or use cloud storage solutions like Dropbox, Drive or Box. We're going to choose ours from the computer. We're going to go to Browse and go into our Exercise Files and choose some screens to upload.
And go to Prototypes, Sketch or Photoshop. I'm going to use Sketch. Hi-Fi, Exported Screens, and we're going to choose one through six and then eight. We aren't going to upload screen seven, icon or loading screens, we're going to show those later when we start to move this into something a little bit more refined. I'll click Open. So now that we have our screens imported inside InVision, I'm going to click on one of these screens to configure the prototype.
Here's what InVision calls the console mode. Here, you'll have a couple of options available to you. You have Preview, you have Build Mode, Comment Mode and History Mode. You also have some sharing options available as well as this configuration panel that we're going to talk about next. InVision also has a number of pop-ups that help you through building your prototypes and through other parts of the product so be sure to watch those and look at those as well. This is a configuration panel. Each prototype has a different configuration panel depending on what the prototype is.
Here you can see we can change the skin. We're going to make it white. But you can also do things like hide status bars when you're viewing this on a desktop. Click save, and we can quickly cycle through our prototype. So keep in mind that InVision supports whatever fidelity that you throw at it so whether it's a small sketch that you've created on a napkin and you can bring it in as a JPEG, or something as polished as this, you can build a prototype around it. So that's how quick it is to bring screens inside InVision to start building your prototype.
- Creating your InVision account
- Adding linked screens, overlays, and transitions to prototypes
- Creating and customizing a board
- Sharing prototypes and boards
- Collaborating and commenting
- Integrating with Photoshop and Sketch
- Using the InVision mobile app