Sketch and InVision Design System Manager: Website Design

1h 21mIntermediate2019-12-23

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

Building great designs is a team effort. It requires thorough UX research and planning and a collaborative toolset for execution. Sketch is an industry-standard app for website prototyping. Using it in tandem with the InVision Design System Manager (DSM) allows you to save and manage elements of your design, so you can easily reuse and update assets. In this course, instructor Emmanuel Henri guides you through the process of designing a robust website with these tools and modern UX best practices. Discover how to research and find visual inspiration for your design, create reusable symbol-based elements, build out the website in sections, and manage the components in DSM.

Learning objectives
Researching your website
Creating the symbol and menu elements
Creating the site sections
Managing your designs with DSM

Skills covered

Multidevice DesignInVisionSketchBohemianUser ExperienceProject

Concepts

0. Introduction

01 - Sketch and InVision Design System Manager (DSM)
02 - What you should know

1. Initial Research

03 - Set up Sketch and Craft
04 - Visual inspiration for the project
05 - Research a website
06 - Exploring mockups

2. Design Symbol Elements

07 - Create the large album element
08 - Create the small album element
09 - Create the icon elements
10 - Create the top menu

3. Finalize Sections

11 - Create the hero section
12 - Finalize the hero section
13 - Create the album section
14 - Create the merchandise section
15 - Finalize the merchandise section

4. Manage Designs with DSM

16 - Overview of InVision DSM
17 - Manage the colors section
18 - Manage the components section
19 - Manage text section

Conclusion

20 - Next steps