Guide to Invision: A Tool for Sharing Designs and Communicating Feedback
Here at Clique, our motto “Build Something” is the lifeblood of everything we do. In order to keep building a lot of somethings in collaboration with our clients, we’re constantly bridging the gap between our web design expertise and their business objectives.
One tool we have used in the past to do that is InVision – a platform that allows us to deliver design mockups in an easily digestible format. InVision is most popular for their Sketch and Adobe Photoshop plugins, as well as being many designers’ go-to design tool for creating interactive prototypes.
While we currently utilize Figma, we’ve found that InVision can be a powerful tool. Clients can use InVision to deliver feedback in exactly the places they want to, even without knowing the design lingo. Sometimes there really is no substitute for pointing at the screen and saying, “I want this to go there,” and InVision can get you pretty close to that experience.
What InVision IS:
- A wireframing and prototyping tool that can be used to share design mockups as created by a design team
- Each page mockup has a link to a rendering that gives the closest representation of what the design might look like as a web page.
- InVision allows clients and partners to communicate with one another by leaving comments and feedback directly on the mockup.
You do not need a subscription or to sign-up/login to access the links shared on InVision.
What InVision ISN’T:
- Although close to what a webpage might look like, InVision does not function as webpage. It’s more like a sophisticated pdf in functionality – we can leave comments and demonstrate a few of our more simple ideas for elements like hover effects, but anything like animations, or dynamic scrolling features (the things that can really bring a website to life) will be implemented in the Development Phase.
- InVision is not responsive. To view desktop designs, please use a desktop for the closest representation, and make sure your display settings are the standard default.
InVision supplies users with about 75% of the content experience, and that users’ collective imagination fills in the other 25% until a project moves into Development!
How to use InVision in a Design Process:
- View wireframes, design mockups and prototypes
- Leave comments, questions, or other feedback directly on the mockups.
Wireframes: You will see a grayscale mockup similar to the sample link and screenshots below, squarely focused on navigation and page layout.
Design Prototyping: Color, branding, fonts, and other design elements will be applied.
Sample Wireframe:
To view a mockup:
With each Design deliverable, you’ll receive the links to the page mockups in InVision.
You can experiment with this sample of a General Wireframe and link:
*Heads up: this is a shared link, so others will see if you leave a comment
All sections and elements of the sample wireframe are labeled as we commonly refer to them to help develop a common language.
Here are a few examples:
Call to Action button
“Banner” section
Opens a popup window
Commonly used icons:
Placeholder for an image
Placeholder for a video
Active elements:
Some elements, like an example hover state or popup window, can be mocked up in in a clickable prototype with InVision. To see which elements are active, click anywhere on the page, and anything that lights up in blue is clickable:
Popup and CTA buttons
Open popup view
To navigate:
There are three ways to navigate from page to page:
- Use the page link
- Once on a page, use the < > arrow buttons on your keyboard to go to next/previous pages
- Click the grid icon in the lower right of the screen to view all pages
To open Comment Mode:
To leave a comment directly on the mockup, turn on Comment Mode using the toggle in the lower right of the screen. When the page has a pink frame, you’ll know you’re in Comment Mode.
Open Comment Mode:
To see & post a comment:
To see a comment: Comments that are entered will show up as a pink numbered dot. Click the dot to see the comment
To post a comment: click anywhere on the page (near the element you’re making the comment about is helpful) to open a new comment window. Click Post!
Open comment:
Feel free to experiment with the sample wireframe – just make sure to mark your test comments as “resolved” since this is a universal link.
To resolve a comment:
If the comment has been addressed, we can mark the comment as “Resolved” to remove the numbered pink dot. This keeps us up-to-date, displaying only the unaddressed comments.
However…
All comments that were marked as “Resolved” are still accessible. To view, click the checkbox in the upper right of the screen. This means whoever uses this link will be able to see a record of every comment that has ever been left.
To view resolved comments:
One of our three values here is “Be a Student and a Teacher,” so in an effort to constantly share what we know, we figured this might be useful to share beyond just our clients. Hopefully, you found it helpful, and please share it with anyone else who might have use for it!
