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

Design Systems

  • 2,704