Web Design Reviews with Invision

Invision is a great way to show your first draft of your web design to your client. You will need to sign up for a free account, then after that, all you have to do is take a screenshot of each page and upload it. This allows your clients to easily provide feedback right on the prototype. Below are the steps on how to upload your pages to Invision.

  • circle

    Take a Screenshot

    I use the tool FireShot which is just a browser extension. Typically I save the entire page as a PNG file.

    Full Page PNG

  • two

    Sign into Invision

    Click the pink plus sign to create a new prototype.

    Create Free Account

     

  • three

    Create New Prototype

    Name your prototype, and choose the desktop version, and create.

    New Prototype

     

  • circle-1

    Upload Screenshots

    Click on the cloud with the arrow in it to upload each one of your screenshots to the prototype.

    Upload Screenshots

  • circle-2

    Send client a link to Prototype.

    In order for your client to leave feedback, you just go to the main prototype page, and navigate to the share button on the top right (highlighted green).

    Send client a link to Prototype.

    Then you copy the link highlighted and send it to your client.

    Share Prototype

     

  • circle-3

    Client View

    (The following steps will be shown from the clients point of view in order for you to help them if they have any questions).

    Once your client clicks the link you sent them, this will be what they see.

    Client View

     

  • circle-4

    Adding a Comment

    You will notice the screen shot you uploaded in the previous steps being shown here. What the main focus of this screen shot is, is the buttons on the bottom right of the screen. In order to enter 'Comment Mode' the client will have to click on the comment button in this area of the screen.

    Adding a Comment

    Pink Outline Comment Mode

    Your client will know when they did it correctly, when the screenshot you uploaded is highlighted in Pink.

    Once you see the pink border, your client will be able to then add comments. In order to do that, all your client will need to do is click anywhere they would like to add a comment.

    screen-shot-2016-09-16-at-2-36-44-pm

    Once the client enters their comment and hits the send button, they will then be prompted to enter their name and email address.

    screen-shot-2016-09-16-at-2-44-55-pm

     

  • circle-5

    View / Comment on other pages

    It can be a little confusing for your client to switch pages if they are not sure what buttons to look for. In the same area where they entered comment mode, to the left there is a grid icon that they click on.

    Multi Page View

    This is how clients can easily jump from page to page and make comments as needed.

After following those few simple steps I am sure you could see how seamless it is to communicate directly with your client and see the exact spots they would like updated.

Marti Latka

About Marti Latka

Leave a Comment