2016
Digital Tutors / Pluralsight
Stewart Hines
5:05
English
Throughout these lessons we'll create a digital UI style guide for a product. We'll start with wireframing our project and then follow the process through design, all while creating a unified interface. By the end of this tutorial you'll have a firm understanding of how to build a style guide to ensure the look and feel of your product is consistent, taking the guess-work out of design.
1
Introduction
01:06
2
Building Buttons in Sketch
07:15
3
Designing Form Elements and Their States
09:02
4
Preparing the Style Guide
08:49
5
Building the Cover Page for Mobile
10:06
6
Finishing the Mobile Cover Page Design
09:22
7
Adding Material Design Icons
07:45
8
Designing the Desktop Cover Page
05:08
9
Creating a View Page on Mobile
05:14
10
Expanding the View Page for Desktop
02:22
11
Laying Out List Items for the List Page
10:36
12
Creating a List Page for Mobile Devices
03:45
13
Expanding the List Page for Desktop Views
09:41
14
Building a Mobile Edit Page
07:57
15
Making Reusable Text Styles
09:23
16
Creating Spacing Based on Typography
09:39
17
Breaking Down Shades of Gray
08:47
18
Adding a Brand Color Pallet
08:30
19
Exploring Sketch Plugin Functionality
07:03
20
Building Buttons in Sketch
09:31
21
Designing Form Elements and Their States
07:43
22
Preparing the Style Guide
03:58
23
Building the Cover Page for Mobile
08:48
24
Finishing the Mobile Cover Page Design
05:34
25
Adding Material Design Icons
07:55
26
Designing the Desktop Cover Page
10:22
27
Creating a View Page on Mobile
08:39
28
Expanding the View Page for Desktop
09:20
29
Laying Out List Items for the List Page
08:16
30
Creating a List Page for Mobile Devices
09:40
31
Expanding the List Page for Desktop Views
09:18
32
Building a Mobile Edit Page
05:40
33
Creating a Desktop Edit Page
07:05
34
Creating Modal Dialogs
09:39
35
Expanding Modal Dialogs for Advanced Features
10:06
36
Designing Edit Page Syntax Highlighting
06:23
37
Laying Out Settings Pages for Multiple Viewports
09:10
38
Designing a Mobile Login Page
06:26
39
Desktop Login Page Design
06:11
40
Exporting the Design from Sketch
04:16
digitaltutors.com/tutorial/2452-Creating-a-Style-Guide-with-Sketch
Download File Size:1.3 GB
|
