A design system is a scalable framework of decisions & team behaviors spread across an organization so your products can converge on a cohesive experience. Start your plan with a firm understanding of what parts it includes, products it applies to, and people that will do the work.
12. Our system is (ultimately) an HTML/CSS playbook
for 1 product team to build a consistent design.
http://ux.mailchimp.com/patterns
13. Our system is a design spec, asset library and/or
(maybe) supporting HTML/CSS for our 10 product
teams to share a consistent design.
harmony.intuit.com
15. http://www.google.com/design/
The system is a toolkit (often, HTML/CSS)
customized by independent teams on ā products
to produce eļ¬ective design eļ¬ciently.
http://foundation.zurb.com/
16. DESIGN SYSTEMS, SCALED
1
Our system is (ultimately) an HTML/CSS
playbook for 1 product team to build a
consistent design.
So many of my own
projects over the years
10
Our system is a design spec, asset library and/
or (maybe) supporting HTML/CSS for our 10
product teams to share a consistent design.
Red Gate, Intuit
Harmony, Marriott (my
time in 2013-14)
100
Our system is a design spec, asset library, and
structured collaborative activity across 100
products to spread a cohesive design.
IBM, Google, GE, āØ
big orgs across many
platforms
ā
The system is a toolkit (often, HTML/CSS)
customized by independent teams on ā
products to produce eļ¬ective design eļ¬ciently.
Bootstrap, Mac OSX,
Google Material (&
Lite), Code for America
17. A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.
WHAT IS A DESIGN SYSTEM?
PRACTICES
PARTS PEOPLE
PRODUCTS
31. BRANDING RESEARCH/USERS
like personas, mental models
PRACTICES
like accessibility, SEO
VS
DESIGN TEMPLATES
like swatches, layouts
GOVERNANCE
like reviews, audits
PROCESS
like requests, contributing
UTILITIES
like mixing, helpers
MORE AND MORE PARTSā¦
32. PARTS, BY TIME ON SITE
DESIGN LANGUAGE
UI ELEMENTS
UI COMPONENTS
LAYOUTS
BRANDING
EDITORIAL
BEST PRACTICES
ASSETS
ABOUT THE PROGRAM
GLOBAL
Online style guide with broad coverage, much spec (280 articles), & little code.
ICONS COLOR TYPE
BUTTON
SITE NAV
PUNCUTATION/āØ
FORMATS
ACCESSIBILITY
33. DESIGN LANGUAGE
Color
Palettes, by category
Contrast
Meaning
Swatches
UI ELEMENTS
Paragraph
Lead paragraph
Block quote
Headers (H1 - H6)
Lists
Links
Code
Typography
Hierarchy
Weights / types
Web fonts
Baseline grid
Buttons
Primary
Secondary
Button groups
Menu buttons
Split buttons
FAB (ļ¬oating action)
Iconography
Pictograms
Illustration
Icon fonts
Alignment
Form controls
Text
Variants (email, etc)
Text area
Radio
Checkbox
Select
Motion
Principles
Timing
Types
Transitions
Form controls, contād
File upload
Labels
Floating labels
Microcopy
Required
Validation
Space
Units / measurments
Metrics and keylines
Structure
Photography
Divider / rule
Switch
Slider
Image
Block
Full bleed
Inline with positions
UI COMPONENTS
Action bar/sheet
Back to top
Badges
Breadcrumbs
Calendar picker
Caption
Cards
Chat (live)
Code block
Comments
Contact us
Cookie notiļ¬cation
Data tables
Dialog
Drawer/accordion
Filters
Footer
Footnotes
Header
Hero billboard
Hero carousel
Legend
Loading / spinner
Local navigation
Maps
Menu
Messaging
Toast
Block
Inline error
Modal
Nav Megamenu
Pagination
Progress bar
Pull quote
Ratings
Reviews
Rich text editor
Search
Sidebar
Site/App navigation
Social networking
Status (alpha, beta,...)
Tabs
Tags / chips / pills
Thumbnails / #-ups
Tips / tutorial
Toolbar
Tooltips
Video & media
UI PATTERNS
Authentication
Create account
Database connection
Form structure
Launch
EDITORIAL
Voice & tone
Writing for the web
Word list
Capitalization
Punctuation
DOWNLOADS
Templates (PSD,...)
Swatch palettes
Fonts
Icons
Code
Permissions
Purchase/checkout
Settings
Site / app structure
Swipe to refresh
BRANDING
Identity
Logo(s)
Tagline(s)
Partnerships
Themes
GETTING INVOLVED
Request New Parts
Give Feedback
Request Audit
Present at a Share
Contribute
PAGE TEMPLATES
Home
Category
Product
Dashboard
Article
RESEARCH & USERS
User needs
Personas
Research techniques
Surveys
A/B, multivar. testing
ABOUT THE PROGRAM
Home page
Principles / pillars
Getting started
FAQ
Version history
Search results
Contact us
Getting started
Discussion
Gallery
PRACTICES
Accessibility
Prototyping
Performance
SEO
Design thinking
ABOUT THE TEAM
Team
Recruiting / jobs
LAYOUT SYSTEMS
Grids for sites
Grids for apps
Paneling/transitions
Responsive/breakpoints
Screen sizes
CODING
Style
Browsers & devices
Environments
Prog. enhancement
Version control
UTILITIES
Mixins
Helpers
Customize
Variables / tokens
YOUR NAME
OTHER?
DATEPARTS
PARTS WORKSHEET
34. 1. Irrelevant Categories: Draw a strong
line / X through categories irrelevant
to your system.
2. Relevant Categories: Circle the labels
of up to 5 categories most relevant to
your system.
3. Relevant Parts: Check up to 25 parts
most relevant to your system, across
any category.
4. Important Parts: Circle the checks of
the top 10 most important parts.
PARTS WORKSHEET
Color
Color
45. DO
Identify core ļ¬agship products
you bond together the most
Prioritize other products that matter
less to tier engagement
DO
Search Mail
Maps Chrome
Calendar News
Santa TrackerRemote
TERTIARY?
SERIOUSLY?REMOTE?
SECONDARY?
61. First things ļ¬rst: You must have
total support from the top.
[A Google-wide design initiative] required the
vision of a CEO who could rally the entire
company to make it happen.
@jonwiley
ā
62. CORPORATE HIERARCHY = ALIGNMENT!
DIGITAL? BRANDPRODUCT TECH
DOING SYSTEM WORK ALIGNING
63. Team Models for Scaling a
Design System
Evolving Past Overlords to Centralize or Federate
Design Decision-Making Across Platforms
http://bit.do/scaled-team-models
