Creating a Style Guide with Sketch
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.
What you'll learn
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.
Table of contents
- The Benefits and Usage of a Styleguide 7m
- Defining the Project and Sketching out the User Flow 9m
- Sketching the Entry Cover Page 9m
- Wireframing the Entry View Page 10m
- Prototyping the Journal List Page 9m
- Exploring Designs for the New and Edit Entry Pages 8m
- Wireframing a Login Page 5m
- Initial Designs for a Settings Page 5m
- Setting up Sketch 3 for Style Guides 2m
- Configuring Adobe Illustrator for Style Guides 11m
- Installing Font Families with SkyFonts 4m
- Creating System Typography 10m
- Designing Reading Typography 8m
- Making Reusable Text Styles 9m
- Creating Spacing Based on Typography 10m
- Breaking Down Shades of Gray 9m
- Adding a Brand Color Pallet 9m
- Exploring Sketch Plugin Functionality 7m
- Building Buttons in Sketch 10m
- Designing Form Elements and Their States 8m
- Preparing the Style Guide 4m
- Building the Cover Page for Mobile 9m
- Finishing the Mobile Cover Page Design 6m
- Adding Material Design Icons 8m
- Designing the Desktop Cover Page 10m
- Creating a View Page on Mobile 9m
- Expanding the View Page for Desktop 9m
- Laying out List Items for the List Page 8m
- Creating a List Page for Mobile Devices 10m
- Expanding the List Page for Desktop Views 9m
- Building a Mobile Edit Page 6m
- Creating a Desktop Edit Page 7m
- Creating Modal Dialogs 10m
- Expanding Modal Dialogs for Advanced Features 10m
- Designing Edit Page Syntax Highlighting 6m
- Laying out Settings Pages for Multiple Viewports 9m
- Designing a Mobile Login Page 6m
- Desktop Login Page Design 6m
- Exporting the Design from Sketch 4m
About the author
Stewart Hines is a designer who lives and works in Oklahoma. He has been working with small businesses and start-ups for the last 10 years. He's spent the last 7 years working at Nine Collective where he is currently the creative director. Stewart is a versatile designer who has experience in everything from simple graphics to developing interfaces. When he's not clicking a mouse or planning in a notebook he's playing with his kids.