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.

Screenshot of Invision's homepage that says "Design Better. Faster. Together."

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:

Screenshot of a 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

CTA Button


“Banner” section

Banner Headline


Opens a popup windowButton that says "Click for popup"

Commonly used icons:

Placeholder for an image

Example of Placeholder image

Placeholder for a video

Example of placeholder 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

Screenshot of a wirefame that shows active elements

Open popup view

Screenshot of wireframe with a pop-up open

To navigate:

There are three ways to navigate from page to page:

  1. Use the page link
  2. Once on a page, use the <  > arrow buttons on your keyboard to go to next/previous pages
  3. Click the grid icon in the lower right of the screen to view all pages

Screenshot of all wireframes in an Invision project

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:

Screenshot of invision wireframe with comment mode on

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:

Leaving a comment on invision wireframe

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.


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.

Robert De Niro gif showing he's watching you

To view resolved comments:

Test comment on invision wireframe showing you can 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!


Gif from Looney Toons saying "That's all folks!"


  • Brendan Hufford

  • Design
  • 5 min read

  • Brendan Hufford

  • Design
  • 5 min read

  • Brendan Hufford

  • Design
  • 5 min read

  • Brendan Hufford

  • Design
  • 5 min read

  • Brendan Hufford

  • Design
  • 5 min read

  • Brendan Hufford

  • Design
  • 5 min read