Volodymyr Siedykh

How to Use InVision for Prototyping

InVision is a powerful tool that allows designers to create interactive prototypes for their websites or mobile apps. With its user-friendly interface and extensive features, it makes prototyping a breeze. In this blog post, we will walk you through the step-by-step process of using InVision to create stunning prototypes that will impress your clients and stakeholders.

How to Use InVision for Prototyping

How to Use InVision for Prototyping

If you're a designer or product manager, you're probably familiar with the importance of prototyping in the product development process. Prototypes allow you to test and validate your ideas before investing time and resources into development. InVision is a powerful prototyping tool that can help you create interactive and realistic prototypes quickly and easily. In this blog post, we'll guide you through the process of using InVision for prototyping, from setting up your project to sharing and gathering feedback. Let's get started!

Setting Up Your Project

Before you can start prototyping with InVision, you need to set up your project. Here are the steps to follow:

  1. Create an Account: If you don't already have an InVision account, head over to their website and sign up for a free account. InVision offers both free and paid plans, so choose the one that suits your needs.

  2. Create a New Project: Once you're logged in, click on the "Create New" button to start a new project. Give your project a name and select the appropriate project type (e.g., mobile app, website, etc.).

  3. Upload Your Design Files: InVision supports various file formats, including Sketch, Photoshop, and XD. Upload your design files by dragging and dropping them into the project or by using the upload button. InVision will automatically convert your design files into screens that you can prototype.

  4. Organize Your Screens: After uploading your design files, take some time to organize your screens. You can create different sections and reorder screens to reflect the flow of your prototype. This will make it easier to navigate and prototype your design later on.

Creating Interactive Prototypes

Now that you have your project set up, it's time to start creating interactive prototypes using InVision. Follow these steps:

  1. Link Your Screens: To create interactions between screens, you need to link them together. Select a screen and click on the "Link" button. Then, choose the destination screen and define the interaction type (e.g., tap, hover, etc.). Repeat this process for all the interactions you want to create.

  2. Define Transitions and Animations: InVision allows you to add transitions and animations to your prototypes to make them more realistic and engaging. Select an interaction and click on the "Animation" button. Choose from the available animation options, such as slide, fade, or scale. Adjust the duration and easing of the animation to fine-tune its behavior.

  3. Add Hotspots and Overlays: Hotspots are clickable areas on your screens that trigger interactions. To add a hotspot, select a screen and click on the "Hotspot" button. Drag and resize the hotspot to cover the desired area. You can also add overlays, which are elements that appear on top of your screens when triggered by an interaction. This allows you to simulate pop-ups, menus, and other UI elements.

  4. Preview and Test: Once you've created your interactions, it's time to preview and test your prototype. Click on the "Preview" button to launch the prototype in a new tab. Interact with your prototype as if you were using the actual product. Test different scenarios and user flows to ensure that your design works as intended.

Sharing and Gathering Feedback

InVision makes it easy to share your prototypes with stakeholders and gather feedback. Here's how to do it:

  1. Invite Collaborators: To share your prototype, click on the "Share" button. InVision allows you to invite collaborators by email or generate a shareable link. Collaborators can view and interact with your prototype, leave comments, and annotate specific areas of the design.

  2. Collect Feedback: As collaborators review your prototype, they can leave comments and suggestions directly on the design. InVision provides a commenting system that allows for threaded discussions, making it easy to track and address feedback. You can also use the "Freehand" feature to gather feedback during live design meetings or brainstorming sessions.

  3. Iterate and Update: Based on the feedback you receive, you may need to iterate and update your prototype. InVision makes it easy to make changes to your design files and sync them with your prototype. Simply upload the updated design files, and InVision will automatically update your prototype while preserving the interactions and animations you've created.

Conclusion

InVision is a powerful prototyping tool that can help you bring your designs to life. By following the steps outlined in this blog post, you can set up your project, create interactive prototypes, and gather feedback effectively. Remember to iterate and refine your design based on the feedback you receive to ensure a successful product. Happy prototyping!

Additional Resources

Create a website that grows with you

Get Started