Complete Guide on InVision Prototype to Boost Your Design Flow

Remember when you wanted to create a web application, but the thought of a perfect execution dampened your motivation? What if there was a way to test out your product without writing a single line of code? Invision prototype is here to offer you a solution, by creating a functional mock output. Invision prototyping is quick and easy allowing you to test out your product even before it’s made. Discover improvements to your design and fix critical mistakes using the prototype to streamline the design process.

Table of Contents

What is InVision Prototyping?

How to Create Prototypes on InVison: A Step-by-Step Guide

InVison Prototype - FAQs

Invision prototype is a prototype tool that can be used to create a prototype of a concept. The tool is entirely web-based and the results are both realistic and interactive. With a good number of high-profile developers setting their trust in the tool, for example, the mobile development team from Netflix, Invision has solid backing behind their claims.

A prototype is a preliminary version of a design or concept. These prototypes are built to evaluate the feasibility of the development and to make necessary changes. Developing a regular prototype requires a significant amount of work, however, the Invision prototype’s simplistic nature cuts down on the muscle needed.

The clickable prototype InVision can be based on websites, mobile applications, and all sorts of user interfaces.  These prototypes will be complete with interfaces, transitions, overlays, and interactions. The usable features allow the tester to navigate through the prototype and evaluate the design and flow, allowing them to document improvements and mistakes in the primary design.

The developers can then use the prototypes created to collect data and feedback regarding the preliminary designs. This data can then be analyzed to create further improvements which will be simulated later on. The cycle of design and testing will allow the developers to create a streamlined development process with no hiccups.

Also read: Innovative Prototype Examples to Boost Your Creativity

In this section, we’ll guide you through the process of creating a functional prototype through Invision. 

 Step 1 Head on over to the Invision website.

Once you arrive on their main page, head on over to the register button if you don’t have an account. If you have an account, just log in to your profile and you are good to go.

When creating your account, you are able to invite your team members into Invision to help collaborate with the development of the prototype.

Step 2  Create a New Project

Once you enter your profile on Invision, it’s time to create your first project. Creating a project on Invision is very simple and straightforward.

Head on over to the documents page on Invision and locate the create new prototype button. This is indicated by the large pink plus sign. If you are not sure about the specifications of the prototype, please try out some of the samples that are available on Invision. The samples will allow you to grasp an idea of what’s what!

After carrying out the above steps, enter a name for your prototype and proceed to select the device. The device you select will be used when selecting proportions for your prototype. For example, the design proportions for a prototype running on a tablet will be different to that running on a mobile device.

Step 3 Design screens

If you already have the prototype design, all you need to do is to upload them to Invision and the program will create the screens for you. As a user, you also have the ability to design them using a third-party application such as Sketch and import them into the canvas to implement as a prototype.

If you are keen on creating the design samples from scratch through Invision itself, then head on over to the Invision Studio. Once you are in the Invision Studio, you are able to draw and design the screens from scratch. 

Step 4 Linking Screens

Linking screens is what adds interactivity to your prototype. Before linking all the design screens you have are just pages or tabs that just exist on their own. But, once you link them together, you are able to create a complete flow. For example, after entering your login details on the login screen, you will be directed to the welcome screen. The transition between the two screens is a flow that is created by linking the two screens together. This simulates the feeling of the prototype being an actual functioning model rather than a set of screens.

To add interactivity, select a screen and click on the hotspot tool in the toolbar. The hotspot tool will be used to create hotspots, which are regions of interactivity on the screen. After selecting the tool, use it to add a hotspot on the screen. This can be on a button, link or image on the screen which when pressed forwards the user to a new screen.

In the settings of the hotspot tool, you are able to specify the target screen. The target screen is the destination screen to which the user will be forwarded. If needed, transitions and animations can be added, which will take effect when switching between screens.

Step 5 Preview and Test

Nothing is perfect, and it’s always better to test your prototype out before releasing it for feedback. Previewing allows you to do just that!

To preview your prototype, head on over to the sidebar in Invision and click on the “preview” option in it. You can find this option in the top right-hand corner of your screen.

Afterward, select whether you want to view the prototype as a page or as a panel. Now you are pretty much good to go! Fiddle around with the preview and make sure that everything functions as expected. If you wish to view the prototype in detail, hit the inspect button.

Step 6 Share and collaborate

You can share the results of your Invision prototyping by clicking on the share button at the top right-hand corner of your screen. To share the prototype, you can add their emails to which they will be prompted later on for access. Or you can copy the link to the prototype and share it manually with your testers.

Step 7 Gather Feedback

Gathering feedback is an important process of Invision prototyping as it allows you to get the insights of other users through a different point of view. Invision allows feedback in the form of comments which can be added to the prototype when viewing. These comments can then be viewed by the designer to gain an idea of what others think of the prototype.

Can I use InVision Prototype with my existing design files?

Yes, you can always import your design files into Invision instead of creating them from scratch. Existing design files can be uploaded into the Invision prototype design screen using the upload button on the screen.

Is InVision Prototype suitable for collaborative design projects?

Invision fully supports collaborative work. You can create a team in Invision and add members to it. The members of the team can then work together to create an InVision prototype.

As a beginner, can I create a prototype process on InVision by myself?

Invision is easy to learn and grasping the basics of the program takes minutes. However, there is a bit of a learning curve in it, as some of the more advanced prototype designing methods take time to get used to. Completely understanding how tools function and adding complex animations can be difficult for newer users. Or you can try to find App prototyping services.

What’s the alternative for InVision?

Invision is not cheap and the prices can be a deterrent when starting up. As a solution, there is a great alternative for Invision called MioCreate. Miocreate is very similar to Invision and the only difference is that it's more cost-beneficial. We also believe that Miocreate is better suited for beginners who are new to the field of prototype development. 

Miocreate is more user-friendly, it allows seamless real-time collaboration between team members. This can be used to streamline the workflow effectively by sharing the development process amongst users. Unlink Invision, Miocreate provides a lot more free templates for users to begin their development process with, which is a great help!  To create a prototype process via MioCreate, you just have to log in to it by clicking the button below.

Then choose “Create new board”.  You can see the templates offered by MioCreate, then select “Prototype design” and you can start editing your prototype.

Conclusion 

Overall, we believe that InVison prototyping is an important step in the development of a product or a concept. If you are deterred by the pricing offered by Invision, we wholeheartedly encourage you to try out Miocreate instead. If you are new to prototyping, Miocreate is a great place as it has everything you need to get started from templates to advanced prototyping tools. Try out the platform and make the decision yourself as it's completely free at the start.