Creating the Style Guide

Product Design Debt

UI Audit & Atomic Design

UI Audit = 2000 rows spreadsheet

Sketch Starter File

  1. Make a copy,
  2. Don't overwrite,
  3. Watch out for autosave

Instructions

UI Element Specificity

Concrete

Abstract

The Next Steps

  1. Change the headings levels
  2. Add/change a Salesforce button
  3. Design & add a colour palette
  4. Make a list of icons and add them to style guide
  5. Helvetica on Windows!
  6. Interactions, animations, loaders.
  7. Actual living style guide with snippets

deck

By Matej Latin

deck

  • 1,065