In this video Dennis shows you how to evolve your InVision prototype into something much more reflective of an actual coded mobile app. He'll show you how to use overlays, create fixed headers, footers and how to automatically transitions screens if you ever need to.
- [Voiceover] Now that we added hot spots and created a basic, clickable prototype, let's try to evolve this and make into something that's a little bit closer to real life. What we're gonna do is we're gonna talk about some overlays, adding some fixed headers and footers, and talk about some time transitions. The first thing we need to do is go to our Screens view and add our overlay. Click the pink plus icon, browse our assets from our screens, and we're going to add screen seven to our prototype.
That is our success overlay. I'm gonna name that Overlay, and click Return. Jump back into our builder, back under build mode, and cycle through until we get to our send success message. Since this is a template, it's going to be reflected on all of the screens that we added that template to. What we're gonna do is we're gonna set screen as an overlay.
We're gonna choose our gesture, we can make this a tap. We're actually now going to select that screen, and call it overlay. You can actually choose if you want to position it centered, top left, top right, or actually custom. This is a great way to replicate modals, success messages like we have here, or even just doing tool tips across the map. We're just gonna keep it centered. We're gonna have this fade in, and we're gonna just give it a background opacity of 80%.
We're gonna keep it as a reversed transition on close, so if you click anywhere outside of that, it will close it. We don't need to include it in the hot spot since we already had it under footer menu. We'll click Save. Now when we preview this, instead of this button taking us back to the home screen, it's actually going to take us to our success message. You can close it out. We're gonna cycle through until we get to our success message.
Click Send again. That's adding modals. Another thing that we may want to do while we're on this is replicate a fixed footer or header. A fixed footer and a header can be used in a variety of instances. If you're using a desktop prototype, or maybe even on this mobile prototype, and you want to have content slide underneath the footer, or in the case of this, we may want to actually fix this footer. We won't actually have that content slide underneath. To do so, you simply just click, and drag to where you want that header to stop.
Do that here as well, and once this content grows as you continue to build this prototype out, if you choose to show multiple chat interactions, and we preview this, all the content would actually slide underneath this. The other thing that you can do, and we're gonna jump all the way to the back to the beginning of this prototype, is you can take and make time transitions. In a lot of apps, or maybe homepage designs, you may have a slider or a walkthrough.
If you want to automate those transitions, you can do so by clicking on the stopwatch icon here on any screen, and you can set the transition. For this, we're gonna just transition this login screen automatically to compose. We're gonna have it happen on default, 800 milliseconds, and we're gonna have it dissolve. We'll click Save. What'll happen once this loads, you can see it automatically takes you to the next screen.
Those are a few ways you can take your basic prototype, and evolve it into something that looks more reflective of an actual app.
- 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