Creating Web and App Prototypes with InVision
Developing a clickable prototype of a site or app is an important stage in designing user interfaces and creating positive online experiences. Software required: InVision, Photoshop CC, Sketch 3.
What you'll learn
Developing a clickable prototype of a site or app is an important stage in designing user interfaces and creating positive online experiences. In this InVision tutorial we'll learn how to use InVision to create interactive prototypes that can easily be shared with your team and clients. By the end of this InVision training we'll have covered all aspects of using InVision: Setting up screens and sections, creating hotspots, building interaction, syncing files, working from raw source Photoshop and Sketch source files, and sharing our final prototypes. Software required: InVision, Photoshop CC, Sketch 3.
Table of contents
- Creating a New Project in InVision 8m
- Arranging Project Sections and Screens 10m
- Reviewing the InVision Screen Interface 8m
- Creating Hotspots for Navigation 7m
- Creating and Managing Hotspot Templates 7m
- Building a Prototype 7m
- Creating Global Drop Down Menus 9m
- Updating Layouts and Syncing Files 7m
- Sharing and Commenting 10m
- Working with Liveshare for Group Chat and Teleconferencing 8m
- Setting up Photoshop Source Files to Create Screens Automatically 8m
- Using Sketch Files with InVision Sync 7m
About the author
Jay Boucher is a freelance illustrator and interactive designer creating games and websites for young people. He strives to create work that is both entertaining and intuitive to use, a combination of visual fun and UI best practices. Jay spent much of the 2000s as Senior Designer for MTV.com, designing sites for shows like "Pimp My Ride" and "The Real World", as well as cable channels MTV2 and MTV Tr3s. He has worked with Hearst Digital, Condé Nast and Westwood One Radio Network and currently c... more