Any product development process should include prototypes. You can use interactive clickable prototypes to ensure the right design decisions are made at every stage of the design process, from conception and research to design and development.
Through collaboration within design tools like InVision Studio, designers can collect feedback from users and key stakeholders on the project by providing them with an interface to interact with, thus speeding up the design process and ensuring your team is building the right item.
What Is InVision
InVision Studio is a prototyping and animation tool that allows you to create advanced, vector-based screen designs quickly due to flexible layers and an infinite canvas. It is considered one of the best high-fidelity prototyping tools out there. With this platform, you can speed up your workflow, create interactive prototypes, communicate your designs to the team and clients, test them, and square away questions, concerns, and design changes before the development stage.
InVision is a tool that allows users to turn web and app design mock-ups into interactive prototypes. These prototypes can be used in customer meetings to present design ideas in a much more dynamic way, allowing stakeholders, clients, or product team members to not only see your design but to interact with the links and features, as well. Over the years, the platform has become a critical part of the design process throughout the industry.
InVision Studio is part of the InVision pack of tools, which also includes InVision Cloud, where you can connect, store and share your complete product design workflow, and InVision DSM, a design system manager and library where you can store and control all of your brand and UX components. It can be used on Mac and Windows.
Creating a Prototype in InVision
Prototypes help improve our product design and development process. The following process is how one can get started in the field.
1. Create a new prototype
In the main navigation, you have to click “Documents” and then the plus button and select “Prototype.” This will allow you to name the prototype and select from a list of device types.
2. Upload your screens
Second, you will be prompted to upload your wireframes or screens. You can do this manually or via Craft Sync, which enables you to send your designs from Sketch or Photoshop to InVision smoothly. You are going to manually upload screens if you are not using Studio, Sketch, or Photoshop, though.
3. Sort your screens
Organizing your screens into sections is still helpful. In order to do this, you can head to the prototype homepage and create dividers between rows of screens. From there, you have to drag and drop the screens into the associated sections.
4. Add interactivity with hotspots
At the bottom of the page, click the “Build” mode icon to set up your hotspots. They allow you to link your prototype screens to certain destinations, determine whether clicking or hovering will trigger a hotspot, and adjust scroll settings.
5. Set fixed headers and footers
Adding headers and footers will help provide a realistic experience for those navigating the prototype. At the bottom of your screen, click the “Build” mode icon. This prompts the ability to check the “Fixed Header” or “Fixed Footer” box at the top right of the page. Once those appear, you can use the slider to adjust the size.
3 Tips for InVision
In this section, we will discuss some to-dos that are necessary in order to use InVision in your favor.
1. Establish a naming system for hotspot templates
You have to be quite familiar with naming your files, pages, and layers in other design tools. It is a necessary practice for keeping track of the many little pieces of each project. InVision has Hotspot Templates that allow you to link up multiple screens at a time, saving hours of repetitive work. This is great when most of your elements stay in one spot, but things get messy when they do not. One or two buttons might need to change position or hide while others are constant.
One workaround for this problem is to make most buttons a separate template instead of grouping them. This strategy gives most of the time-saving goodness of templates, even if more have to be made and managed. The trade-off, yet, is that there are tons of little templates all over the prototype.
2. Involve clients early and encourage using comments
Collaborating with InVision can be great when there is a good rapport between the clients and your team. Some clients take to the app fastly and actively give and keep track of feedback through comments without any guidance. Others prefer to give feedback verbally and depend on our team to handle comments. This is what you should do in the comments section.
First of all, you should establish rounds for feedback and revision. InVision works just fine as a tool for gathering feedback, but to do so it is key to settle on a pattern with your team and clients early on. The goal is to make it clear to everyone how much work is in scope and what is expected of it.
Set clear guidelines for resolving comments. Make sure your team and clients are clear on who handles comments. Decide if you want this to be a way for clients to sign off on changes, or if the project manager or design lead will clean up comments when they feel an issue is fixed.
3. Place overlays precisely using lines or cropped objects as a guide
Using Overlays when modals, menus, or sidebars are necessary can save us a lot of time. InVision does not currently provide smart guides or nudges to help you place overlays precisely. To achieve pixel-perfect precision, you will probably need to reposition your overlays several times.
Bottom Line
InVision is a fine tool that has many advantages if you use it in your favor. In order to do so, it is recommendable that you follow the tips mentioned and adapt the rest of the information to your work so you can become better at prototyping.
