Emma Wedekind
UX Engineer @ LogMeIn
Design Systems
@emmawedekind
Hello world
I'm Emma
Software Engineer @ LogMeIn
Co-Host @ Ladybug Podcast
Founder of Coding Coach
@emmawedekind
Systems are in the world all around us.
Our products are no exception.
@emmawedekind
The Internet was not originally built for large-scale social and enterprise applications.
@emmawedekind
Webpages
Bookmarking
Pagination
@emmawedekind
We don't develop websites as full pages anymore.
@emmawedekind
Webpages !== Reusability
@emmawedekind
Components === Reusability
@emmawedekind
@emmawedekind
The way in which we design and develop products is shifting to components.
@emmawedekind
We all think about the world in different ways...
inconsistent user interfaces.
and this leads to
@emmawedekind
Design Systems
@emmawedekind
Design Language
UI Kit
@emmawedekind
Design Language
UI Kit
Component Library
Style Guide
@emmawedekind
Design Language
UI Kit
Component Library
Style Guide
Design System
@emmawedekind
Brand identity
@emmawedekind
Accessibility
@emmawedekind
Consistency
@emmawedekind
Trickle-down updates
@emmawedekind
Responsiveness
@emmawedekind
Onboarding
@emmawedekind
Flexibility
@emmawedekind
Design & development speed
@emmawedekind
Time
@emmawedekind
Ever-evolving
@emmawedekind
Maintenance
@emmawedekind
Investment
@emmawedekind
Design systems fail from a lack of team buy-in.
@emmawedekind
Centralized model
The design system is governed by a centralized, core team.
@emmawedekind
-
Define the foundation & identity of the design system
-
Have veto power over the system
-
Manage & create the UI kit, component library, & style guide
@emmawedekind
@emmawedekind
@emmawedekind
Distributed model
The design system is built and maintained by those using it.
@emmawedekind
-
Empowers individuals to make decisions
-
Design decisions aren't concentrated; they're influenced by many vantage points
-
Progress isn't hindered if someone is unavailable
@emmawedekind
@emmawedekind
@emmawedekind
Hybrid model
Combines the centralized and distributed models.
@emmawedekind
@emmawedekind
@emmawedekind
Design systems aren't necessarily meant for you.
@emmawedekind
"If a design system is by a company, then it's for the company. It might also be open source, but any ol' random developer who wants to use it isn't the target audience."
@emmawedekind
@emmawedekind
Padding
Margin
Border radius
Background color
Font size
Font family
@emmawedekind
Hover
Focus
Active
Disabled
@emmawedekind
Primary
Secondary
Tertiary
@emmawedekind
Primary
Secondary
Tertiary
Primary with icon
Secondary with icon
Tertiary with icon
@emmawedekind
Light theme
Dark theme
@emmawedekind
Large
Small
Normal
@emmawedekind
Padding
Margin
Border radius
Background color
Font size
Font family
Hover
Focus
Active
Disabled
Primary
Secondary
Tertiary
Primary with icon
Secondary with icon
Tertiary with icon
Light theme
Dark theme
Large
Normal
Small
@emmawedekind
Team member: $100/hr
200 total work hours
Designer + Engineer + QE
@emmawedekind
$20,000
@emmawedekind
$1 Million
@emmawedekind
You need a design system.
@emmawedekind
Design Language
The set of standards which guide the creation of a suite of products underneath a brand.
@emmawedekind
Foundation
UI Kit
@emmawedekind
Accessibility
Brand
Color
Typography
Grid
Spacing
Motion
Icons
Content
@emmawedekind
Component Library
Coded components which turn the design language and UI Kit into living, breathing code.
@emmawedekind
@emmawedekind
@emmawedekind
Style Guide
Documentation for the design language, UI kit, and component library.
@emmawedekind
Establish your design principles
@emmawedekind
"Bold, optimistic, and practical"
@emmawedekind
Start with your purpose
@emmawedekind
UI Audit
@emmawedekind
Prioritization
@emmawedekind
Does this request embody our design principles?
Does this request require a lot of design / development effort?
Does this request come with a high risk to the success of our product?
Does this request coincide with our product roadmap?
Does this request require a lot of maintenance?
@emmawedekind
Does this request improve the user experience of our products?
Does this request have a high level of confidence or will we need to revisit it again in the near future?
Is this request technically feasible?
@emmawedekind
Impact
Identity
Confidence
@emmawedekind
Maintenance
Risk
Effort
Opposition metrics
Adoption metrics
Design
@emmawedekind
Build
@emmawedekind
We must meet teams where they are today.
@emmawedekind
Test
@emmawedekind
Document
@emmawedekind
Release
@emmawedekind
Accessibility
Interaction
Context
Completion
Content
Customization
Resolution
@emmawedekind
Design checklist
Accessibility
@emmawedekind
Interaction
@emmawedekind
Context
@emmawedekind
Completion
@emmawedekind
Content
@emmawedekind
Customization
@emmawedekind
Accessibility
Responsiveness
Completion
Customization
Error handling
Browser compatibility
@emmawedekind
Development checklist
Accessibility
@emmawedekind
Responsiveness
@emmawedekind
Completion
@emmawedekind
Customization
@emmawedekind
Error handling
@emmawedekind
Browser compatibility
@emmawedekind
Resolution
@emmawedekind
Properties
Code Snippets
Interactive Example
Context
@emmawedekind
Documentation checklist
Properties
@emmawedekind
Code snippets
@emmawedekind
Interactive example
@emmawedekind
Context
@emmawedekind
A component is considered stable if it has met all of the requirements for design, engineering, & documentation.
@emmawedekind
Starting for scale
@emmawedekind
Educating before you build
@emmawedekind
Not discussing workflow
@emmawedekind
Not recording decisions
@emmawedekind
Component Libraries
@emmawedekind
Elements
Components
Buttons, text fields, radio buttons
Modals, accordions, sidebars
@emmawedekind
You might not need a design system
@emmawedekind
Thank you
@emmawedekind
Design Systems
By Emma Wedekind
