• 20 hours
  • Hard

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 11/30/21

Build an app prototype with InVision

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:

  1. Entering Build Mode

  2. Opening the screen where we wish to add a link/hotspot

  3. Choosing which screen to link it to (and which type of transition between screens we want)

hgf
Enter Build Mode to create hotspotsĀ 

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.

Creating a hotspot
Creating a hotspot

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.

sd

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!

Enter Preview Mode to see your prototype in action!
Enter Preview Mode to see your prototype in action!

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).

Example of certificate of achievement
Example of certificate of achievement