img/svg

Prototyping is one of the most important stages of a design process. It allows a designer to check and test all the design decisions he/she made during UX process. Prototypes should not be compared to the final product, rather these are the samples which are only built to test the functionality of the app. Before starting the Interface Design, it is crucial for a designer to test all the design solutions which will save time and effort in the end. Testing with prototypes will reveal all the basic bugs in your design prior to the actual implementation and you can fix them beforehand.

General Description of the tool

Invision is a prototyping software which provides a number of digital interactions with the still mockups of an interface. It also supports designing user interfaces for mobile applications. It is one of the major players in the market as it constantly improves the user experience but also regularly add extensions to the product.

Invision provides the ability to upload more or less detailed wireframes and with the functionalities of the app these wireframes are converted into the prototype. Invision makes it very easy to input the necessary transitions, test the navigation and analyze button behaviours which is important to test prior to the development process.

As per developer’s perspective, Invision allows better collaboration between designers and developers. Rather than documenting the necessary transition effects and hover behaviours, a designer can visually let the developer know about the effects that clearly bridges the gap between both parties.

Steps towards your first prototype with invision

  1. Sign In to Invision if you are already a user otherwise sign up.
  2. For the first time, Invision allows to create a new project under which you can choose to prototype, create mood-boards or draw freehand. Choose ‘create new prototype’.
  3. img/svg
  4. Enter your project name and choose whether its a mobile app or web app.
  5. img/svg
  6. Now upload all of your screen mockups or you can also drag/drop. You can also upload loading screen of your app. Loading screen is the screen which will be visible while launching your app.
  7. img/svg
  8. You can start by clicking your first mockup or where you want the interaction to start. Here, I will start with my LogIn Page.
  9. img/svg
  10. The next screen will show your mock in a mobile interface. This is automatically in the ‘Preview Mode’. In order to start prototyping, make sure you switch to ‘Build Mode’.
  11. img/svg
  12. When you enter the Build Mode, you can start creating hotspots. Hotspots are the areas of the where your user will actually click and interact with the app.
  13. img/svg
  14. A dialog box will appear which will ask you to input all the important information like the destination where you want your user to end up after clicking the particular button, gesture with the button and what sort of transition would you like. Enter all the necessary information and press ‘Save’.
  15. img/svg
  16. You can Shift+Click on the created hotspot to navigate in the Build Mode which will take you to the chosen destination. Here you can create another hotspot and repeat the previous step on all the other screens to create a navigation for your app.
  17. img/svg

Above steps were just the basic steps to start with Invision. There are so many other functionalities of Invision that will help you prototype better and share it with your fellow designers and developers.

Make sure you explore the exciting new features of the app here

Thanks for reading!