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 use to do that is InVision – a platform that allows us to deliver design mockups in an easily digestible format. 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 gets us pretty close to that experience.

.

What it IS:

  • The program we use to share our design mockups as created by our 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 us 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 we share with you on InVision.

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

What it 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 us with about 75% of the content experience, and our collective imagination fills in the other 25% until we move into Development!

How to use InVision:

  • View wireframe and design mockups
  • 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.

Designs: 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 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.

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.

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!"

 

Clique Denver CLIQUE UNIVERSITY • CLIQUE UNIVERSITY •