Building Interactive Prototypes with InVision

Introduction

This tutorial aims to guide you on how to use InVision, a powerful digital product design platform, to create interactive prototypes. By the end of this tutorial, you should be able to take a static design and add interactions to simulate how the final product will work.

You will learn about:
- Creating a new project in InVision
- Importing your designs
- Adding interactions to your designs

The prerequisites are:
- Basic understanding of UI/UX design concepts
- A free InVision account

Step-by-Step Guide

Creating a New Project

1. Log into your InVision account.
2. Click on the "+ Create" button and select "New Prototype".
3. Enter a name for your prototype.
4. Select the device type for your prototype.
5. Click "Create".

Importing Your Design

1. Once your prototype is created, click on the "+ Add screens" button.
2. Select the static design file(s) you want to import.
3. Click "Open" to upload your design.

Adding Interactions

1. Click on the screen to which you want to add an interaction.
2. Click on the "+" button to create a hotspot.
3. Draw a rectangle over the area where you want the interaction.
4. In the right panel, set the "Gesture" (the user action that will trigger the interaction) and the "Action" (the response to the gesture).
5. Select the screen that should be displayed after the interaction.
6. Click "Save".

Code Examples

Since InVision is a visual tool, there's no need for code examples. However, here's an example of how to add an interaction:

1. Click on your uploaded screen.
2. Click on the "+" button to create a hotspot.
3. Draw a rectangle over the "Submit" button in your design.
4. In the right panel, set the "Gesture" to "Tap" and the "Action" to "Transition".
5. Select the "Thank you" screen to be displayed after the interaction.
6. Click "Save".

This will create an interaction where tapping the "Submit" button will transition to a "Thank you" screen.

Summary

In this tutorial, you've learned how to create a new prototype in InVision, import your designs into the prototype, and add interactions to your designs.

As a next step, consider exploring advanced features in InVision like animations, overlays, fixed headers and footers, and scrolling. The official InVision Help Center is a great resource for this.

Practice Exercises

1. Create a new prototype for a mobile device and import a static design into it.
2. Add an interaction where tapping a button transitions to a different screen.
3. Add an interaction where swiping on a screen transitions to a different screen.

Here are the solutions:

1. Log in > "+ Create" > "New Prototype" > Enter name > Select "iOS" or "Android" > "Create" > "+ Add screens" > Select your design > "Open".
2. Click on your screen > "+" > Draw rectangle over button > "Gesture" set to "Tap" > "Action" set to "Transition" > Select screen > "Save".
3. Click on your screen > "+" > Draw rectangle over swipeable area > "Gesture" set to "Swipe left" > "Action" set to "Transition" > Select screen > "Save".

For further practice, try creating more complex interactions by chaining multiple gestures and actions together.