Exercise Invision PDF

Preview

Summary

invision exercise lecture notes...

Description

EXERCISE - INVISION!

CREATE AN INTERACTIVE WEBSITE PROTOTYPE Fir this exercise, you’ll be creating an interactive prototype using InVision and supplied wireframe JPGs.!

Here’s what you need to do:! 1. CREATE AN NEW INVISION ACCT • Go to https://www.invisionapp.com and set up a free acct! • You’ll only be able to have 1 project in the free account# 2. CREATE A NEW PROJECT • Click on the plus button!

3. NAME YOUR PROJECT • CHOOSE ‘prototype’, ‘desktop web’ and ‘Add a project name’!

4. ADD EXERCISE JPGS • Drag and drop all JPGs from the supplied files to the window! !

5. REORDER THE THUMBNAILS • Drag the pages around so they’re in the same order as the navigation!

6. CHANGE THE BACKGROUND COLOUR • Click on the gear icon and create a new background colour! • Select ‘Apply to all…’!

7. ENTER BUILD MODE • Select build mode! !

#

#

#

# 8. CREATE HOTSPOTS • Drag a rectangle around a menu item and select the screen it will link to in the in the destination! • Repeat for every item in the nav! • Don’t forget to create a hotspot for the logo that will link back to the home page!

9. CREATE A LINK TO ‘PROJECT 1’ • On the portfolio page “Works’, create a link from the Project 1 icon to project 1! !

!

10. POP UP • From the video graphic part way down then Project 1 page, create a link to the pop up! • Create a new hotspot over the Video graphic! • Select ‘Screen as overlay’! • Select the video popup screen! • Choose and experiment with the Transition styles and BG percentage! • Don’t forget to add the Nav hotspot template to this page! !

11. LINK TO THE FIRST TEAM MEMBER • From the team page, create a hotspot over the first team member and link it to the team page! • Don’t forget to add the Nav hotspot template to this page! 13. TEST YOUR PROTOTYPE!...