MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Creating a Style Guide with Sketch

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 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

Course Fee:
USD 29

Course Type:


Course Status:



1 - 4 hours / week

This course is listed under Development & Implementations and Digital Media & Games Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url