Creating a Style Guide with Sketch

Pluralsight

Course Summary

Consistency is a vital aspect of product design. This course teaches you how to build a UI style guide that will ensure unity across all aspects of your product. Software required: Sketch 3.3.2, ColorSchemer Studio, Adobe Illustrator CC, SkyFonts.

+
Course Description

The consistency of a product's design can make it or break it in the market. If you want to learn how to create a unified design and take the guess-work out of the design process, then this course, Creating a Style Guide with Sketch, is for you. Throughout this course, you'll create a digital UI style guide for a product, starting with wireframing your project. You'll then follow the process through designing form elements such as typography, color, and buttons, all while creating a unified interface. Finally, you'll design a login page and learn to export your sketch. By the end of this tutorial, you'll have a firm understanding of how to build a style guide in Sketch to ensure the look and feel of your product is both well-made and consistent. Software required: Sketch 3.3.2, ColorSchemer Studio, Adobe Illustrator CC, SkyFonts.

Course Description

The consistency of a product's design can make it or break it in the market. If you want to learn how to create a unified design and take the guess-work out of the design process, then this course, Creating a Style Guide with Sketch, is for you. Throughout this course, you'll create a digital UI style guide for a product, starting with wireframing your project. You'll then follow the process through designing form elements such as typography, color, and buttons, all while creating a unified interface. Finally, you'll design a login page and learn to export your sketch. By the end of this tutorial, you'll have a firm understanding of how to build a style guide in Sketch to ensure the look and feel of your product is both well-made and consistent. Software required: Sketch 3.3.2, ColorSchemer Studio, Adobe Illustrator CC, SkyFonts.

+
Course Syllabus

Introduction and Project Overview
- 1m 6s

—Introduction 1m 6s

Creating a Style Guide with Sketch
- 5h 4m

—The Benefits and Usage of a Styleguide 7m 15s
—Defining the Project and Sketching out the User Flow 9m 2s
—Sketching the Entry Cover Page 8m 49s
—Wireframing the Entry View Page 10m 6s
—Prototyping the Journal List Page 9m 22s
—Exploring Designs for the New and Edit Entry Pages 7m 45s
—Wireframing a Login Page 5m 8s
—Initial Designs for a Settings Page 5m 14s
—Setting up Sketch 3 for Style Guides 2m 21s
—Configuring Adobe Illustrator for Style Guides 10m 36s
—Installing Font Families with SkyFonts 3m 45s
—Creating System Typography 9m 41s
—Designing Reading Typography 7m 57s
—Making Reusable Text Styles 9m 23s
—Creating Spacing Based on Typography 9m 39s
—Breaking Down Shades of Gray 8m 47s
—Adding a Brand Color Pallet 8m 30s
—Exploring Sketch Plugin Functionality 7m 3s
—Building Buttons in Sketch 9m 31s
—Designing Form Elements and Their States 7m 43s
—Preparing the Style Guide 3m 58s
—Building the Cover Page for Mobile 8m 48s
—Finishing the Mobile Cover Page Design 5m 34s
—Adding Material Design Icons 7m 54s
—Designing the Desktop Cover Page 10m 22s
—Creating a View Page on Mobile 8m 39s
—Expanding the View Page for Desktop 9m 20s
—Laying out List Items for the List Page 8m 16s
—Creating a List Page for Mobile Devices 9m 40s
—Expanding the List Page for Desktop Views 9m 18s
—Building a Mobile Edit Page 5m 40s
—Creating a Desktop Edit Page 7m 5s
—Creating Modal Dialogs 9m 39s
—Expanding Modal Dialogs for Advanced Features 10m 6s
—Designing Edit Page Syntax Highlighting 6m 23s
—Laying out Settings Pages for Multiple Viewports 9m 10s
—Designing a Mobile Login Page 6m 26s
—Desktop Login Page Design 6m 11s
—Exporting the Design from Sketch 4m 16s