Prototyping with InVision
InVision is an industry standard prototyping tool that lets you take images (like the screens you created previously in Sketch) and to stitch them together so that a user can navigate through these screens in the sequence they are meant to be experienced in.
In other words, InVision is a remarkably powerful tool that creates clickable prototypes that are incredibly professional in look and feel, while remaining a tool that is easy to learn and use.
Creating an InVision account
You can get a free single-project account on InVision for creating a prototype out of the individual screens. Sign up for InVision using this link.
Then you can play around with one of the existing projects that you see already in your projects list. These are here so that you can experiment.
Or you can create a new project, upload your images, and start linking them!
Linking Screens
We link our screens together in InVision by:
Entering Build Mode
Opening the screen where we wish to add a link/hotspot
Choosing which screen to link it to (and which type of transition between screens we want)
Create a hotspot by dragging an area over the area which should be clickable (like I do with the 'Log In' button - top left of the screenshot below), and then specify the screen the hotspot should link to and which type of transition it should feature.
Here is a helpful video that summarizes the process of adding links:
Transitions
When you add a hotspot, you may have noticed that you have the option to select a number of transitions. I urge you to experiment with all of these because they are just such great fun to play around with, and they make your prototype look a little snazzy!
In the screenshot below, I am about to select the Push Right transition, which means that when I click a hotspot, I will be linked to a new screen, and that new screen will slide in from left to right.
Viewing your prototype
I usually work in either the Build Mode (adding hotspots) or the Preview Mode (testing the prototype and making sure that all the hotspots work as I expect).
It is important to stop every now and again and check that the flow works well - and that you haven't missed any hotspots!
Summary
In this lesson, we learned how InVision can help us link our app screens when we create hotspots. We create clickable prototypes in this way that deliver a realistic experience to customers. Our next chapters will look at how we can install a prototype on our mobile device and the techniques to getting feedback from customers.
Additional Resources
Create a free account on InVision.
Create a hotspot template in InVision (e.g. for menu bar).
