O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rapid Prototyping with InVision

Video Description

InVision is a software tool that makes it easy to quickly create prototypes of web sites and mobile apps; and share them with others. This course teaches you how to use InVision to build your own prototypes. Stephanie will provide a hands-on look at InVision's tool sets and demonstrate how prototypes (unlike static wireframes or screen mock-ups) make it possible to demonstrate a web site or app.

You'll learn why prototyping helps you find and fix usability problems before anything is hard-coded; and understand how prototyping facilitates cooperation and concept alignment among team members, and perhaps most importantly, your clients.

  • Understand what prototyping is and how it fits into the UX design process
  • See why UX designers, interface designers, and product managers use InVision
  • Gain experience building a prototype in less than 10 minutes without writing any code
  • Discover how to integrate InVision prototyping into your existing workflow
  • Explore built-in tools for feedback collection, collaboration, and project status tracking
  • See the plug-in for Sketch and Photoshop that speeds up the design workflow
  • Understand how to prepare a prototype for hand-off to engineers for development
Stephanie Schuhmacher has designed and prototyped digital experiences for the web and mobile apps since 1995; including award winning products such as the NetSpend Personal Financial Management Tool Suite (named Most Innovative Prepaid Program by the 2010 Paybefore Awards). Currently the Manager of User Experience at Lifesize, Stephanie co-founded the Austin, Texas chapter of Ladies that UX, taught Visual Communications and Web UI Design at Austin Community College, holds a BA in art from the University of Texas, and is a published author on UX design issues.

Table of Contents

  1. Introduction
    1. Introduction 00:01:51
    2. About The Author 00:00:45
  2. Prototyping and User Experience
    1. What Is Rapid UX Prototyping? 00:03:26
    2. Prototyping In The UX Design Process 00:05:48
    3. Planning Your Prototype's Goals 00:03:41
    4. Tips For Creating Effective Prototypes 00:06:43
    5. What Is InVision? 00:02:55
  3. Build Your First InVision Prototype
    1. Create An InVision Account 00:00:35
    2. Create Your First Project 00:01:17
    3. Adding Hotspots To Your Prototype 00:04:34
    4. Sharing Your Prototype With Others 00:02:02
  4. Collaborating With Team Members In InVision
    1. Adding Collaborators To Your Project 00:01:37
    2. Adding Comments To A Prototype 00:02:03
    3. Reviewing And Resolving Comments 00:01:24
    4. Tour Points, Notes, And Private Notes 00:01:51
    5. Using LiveShare To Collaborate With Your Team 00:02:38
    6. Reassign Your Prototype To Another User 00:00:34
  5. Organizing And Managing Your InVision Prototype
    1. Organizing Your Screens Using Sections 00:02:37
    2. Renaming And Searching For Screens 00:02:10
    3. Removing And Archiving Screens 00:01:29
    4. Duplicating Screens 00:01:48
  6. Building On The Basics
    1. Introduction 00:00:36
    2. Working With Hotspot Templates 00:04:35
    3. Setting Fixed Headers And Footers 00:02:25
    4. Adding Hover States With Hover Hotspots 00:04:26
    5. Using Overlays To Layer Screens 00:03:42
    6. Link To Another Point On The Same Screen 00:04:19
    7. Using Timed Redirects To Automatically Move To Other Screens 00:02:19
  7. Other Ways To Share Your Prototype For Feedback
    1. Download Your Prototype To Use Offline 00:03:31
    2. Customizing And Managing Share Links 00:04:50
    3. Usability Test A Desktop Prototype With UserTesting 00:01:41
    4. Get Feedback On A Mobile Prototype With LookBack 00:01:48
  8. Managing Your Prototype's Workflow In InVision
    1. Activity Feed And Workflow Features 00:02:31
    2. Using History Mode To Track Changes 00:00:50
    3. Using Live Embed To Integrate With Other Collaboration Tools 00:01:43
  9. Create Your First Mobile Prototype
    1. Introduction 00:00:45
    2. Adding Complexity With Gestures And Transitions 00:04:31
    3. The InVision Mobile App 00:02:01
  10. Using InVision's Craft Plug-In With Sketch
    1. Invision's Craft Plug-In For Sketch And Photoshop 00:02:32
    2. Using Craft's Data And Duplicate In Sketch 00:04:10
    3. Pairing Sync And Inspect Mode 00:01:49
    4. Create Reusable And Sharable Styles With Library 00:01:40
    5. Solicit Real-Time Feedback With Freehand 00:01:08
  11. Conclusion
    1. Wrap up And Thank You 00:01:38