Creating an Interactive Prototype with InVision

Mar 13, 2017 · by Wiktoria Swiecicka

For a web designer, having a good mock-up software is crucial. In the initial phase of design, a mockup software should allow you to plan wireframes and focus more on the utility than on the visual concept. To do that, I use Invision.

As for designing the visual elements within my mockups, I use an alternative to the Adobe products which is super intuitive, Affinity Designer. It’s great either for creating vector illustrations, wireframes, mobile apps or more complicated user interface projects.

Invision is an app that has many great features to make any design functional. It makes presenting the designs with a breeze, and it is so much more effective than sending out a pdf or screen shots.

 

Invision_dashboard

 

When you upload your screens (Invision is fully integrated with Sketch!), it presents them in a way that mimics an actual web browsing experience. The builder mode allows you to wire all the screens simply by adding actions to the interaction areas. It converts the visual design into a fully working prototype.

 

Invision_Wireframing

 

Invision allows you to have many collaborators and discuss the mockups by leaving comments, that are connected to a point on the screen.

The best part is the live sharing - this feature allows you to share your project with potential users and test the product it which is extremely useful to see users interaction in real time, before the starting development.

 

Invision_testing

 

These are basic features that Invision provides you. It also has a lot of plugins That you can download. Apart from integrating Sketch, Photoshop and even Slack. You can import the source code and even outsource user testing.

The best part is User Testing - this feature allows you to share your project with potential users and test the product it which is extremely useful to see users interaction in real time, before the starting development.

 

Invision_user_testing

 

With User Testing, you can generate questions “look around and talk about what you think this is about. What can you do here, what's it for, what strikes you about it?” or  “What, if anything, do you like or dislike? Since this isn’t a finished design, what would you like to see in the final version?” or even more specific like “try to find and register to the next upcoming event”. The results of the tests are recorded and delivered within few hours directly to your inbox.

 

 

Wiktoria Swiecicka

About the author, Wiktoria Swiecicka

Wiktoria creates beautiful, usable, professional designs using best practices in accessibility and usability. She is a user advocate and plans user interface of each site using researched personas.

More Articles by Wiktoria Swiecicka »
Sign up for our training newsletter

Receive occasional email notifications about upcoming training courses near you.

Featured Articles