Sketch and InVision: Designing a Sign-up Process

41mIntermediate2018-12-03

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

Boost your Sketch and InVision Studio know-how as you learn how to design a compelling sign-up workflow. In this course, Emmanuel Henri steps through how to use the design tools in Sketch and the collaboration and prototyping features in InVision Studio to build and publish a working prototype of a sign-up process. Emmanuel begins by guiding you through the research stage, showing how to find inspiration for your project and demonstrate initial mockups using Balsamiq, a rapid wireframing tool. He then steps through how to create welcome, sign-up, and confirmation screens in Sketch; add simple interactions and complex animations with InVision Studio; and leverage the collaboration tools available in InVision.

Learning objectives
Finding inspiration for your project
Demonstrating initial mockups with Balsamiq
Creating the welcome and sign-up screens
Exporting assets to InVision Studio
Adding simple transitions and complex animations
Using the InVision collaboration tools

Skills covered

Multidevice DesignInVisionSketchBohemianUser Interface PrototypingUser ExperienceProject

Concepts

0. Introduction

01 - Sign-up workflow with Sketch and InVision
02 - What you should know

1. Research

03 - Visual inspiration for the project
04 - Research a user-friendly purchase flow
05 - Initial mockups with Balsamiq

2. Design the Sign-up on Sketch

06 - Create the symbols for the project
07 - Create the welcome screen
08 - Create the sign-up screen, part 1
09 - Create the sign-up screen, part 2
10 - Create the confirmation screen
11 - Explore the export options

3. Interactions with InVision Studio

12 - Overview of InVision Studio
13 - Add simple transitions
14 - Add complex animations
15 - Publish the final project to InVision

4. Collaboration with InVision

16 - Collaboration workflow with InVision

Conclusion

17 - Next steps