Slide 1

Slide 1 text

DUSTIN YOUNSE But they are complex. And also hard. DESIGN SYSTEMS AREN’T HARD OPENJS 2020

Slide 2

Slide 2 text

WHO’S THIS GUY? @milsyobtaf from the internet I’ve worked on large websites since 2008 I’ve worked with “design systems” since we called them “swatches” and “style tiles” Currently in Design Engineering at Indeed, a job that comes with the greatest laptop sticker

Slide 3

Slide 3 text

WHAT IS A DESIGN SYSTEM?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Organizations which design systems … are constrained to produce designs which are copies of the communication structures of these organizations." CONWAY’S LAW

Slide 6

Slide 6 text

Your website is a manifestation of your organization’s problems “UNCLE” DAVE RUPERT’S LAW

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

WHAT ISN’T A DESIGN SYSTEM?

Slide 9

Slide 9 text

A FIGMA LIBRARY

Slide 10

Slide 10 text

WHAT ISN’T A DESIGN SYSTEM?

Slide 11

Slide 11 text

A REACT COMPONENT LIBRARY

Slide 12

Slide 12 text

WHAT ISN’T A DESIGN SYSTEM?

Slide 13

Slide 13 text

AN EXTERNAL WEBSITE PROMOTING YOUR DESIGN SYSTEM

Slide 14

Slide 14 text

THESE ARE ARTIFACTS - NOT THE SYSTEM

Slide 15

Slide 15 text

SO… WHAT IS A DESIGN SYSTEM?

Slide 16

Slide 16 text

AN AGREEMENT ON HOW DIGITAL PRODUCTS ARE MADE

Slide 17

Slide 17 text

DESIGN SYSTEM AGREEMENTS User Interface Design: how a digital experience looks Interaction Design: how a digital experience feels Content Strategy: how a digital experience sounds Documentation: how a digital experience is crafted

Slide 18

Slide 18 text

⌛ DESIGN SYSTEMS TAKE TIME

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

⌛ DESIGN SYSTEMS TAKE TIME AND THEY TAKE MONEY

Slide 21

Slide 21 text

WHY BOTHER WITH A DESIGN SYSTEM?

Slide 22

Slide 22 text

DESIGN SYSTEMS ARE ALL ABOUT SCALE Interface Design at scale Interaction Building at scale Content Creation at scale

Slide 23

Slide 23 text

DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your team knows how a thing should be built, they can just build it.

Slide 24

Slide 24 text

DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your team knows how a thing should be built, they can just build it. #1 Support Request: How do I do X?

Slide 25

Slide 25 text

DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your team knows how a thing should be built, they can just build it. #1 Support Request: How do I do X? #2 Support Request: Why do I do X?

Slide 26

Slide 26 text

A DESIGN SYSTEM IS A SERVICE NOT A PRODUCT

Slide 27

Slide 27 text

YOU NEED TO ANSWER QUESTIONS, NOT WRITE CODE

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

IF YOU ONLY HAVE THE TIME OR THE MONEY FOR ONE ARTIFACT, WRITE DOCUMENTATION

Slide 30

Slide 30 text

DESIGN SYSTEM DOCUMENTATION If a Design System is made up of agreements, you need to write those agreements down.

Slide 31

Slide 31 text

DESIGN SYSTEM DOCUMENTATION If a Design System is made up of agreements, you need to write those agreements down. If you have the budget, hire a Service Designer.

Slide 32

Slide 32 text

DESIGN SYSTEM DOCUMENTATION If a Design System is made up of agreements, you need to write those agreements down. If you have the budget, hire a Service Designer. Should change as often as necessary.

Slide 33

Slide 33 text

DESIGN SYSTEM HELPS EVERYONE

Slide 34

Slide 34 text

ACCESSIBILITY AT SCALE Buttons that work as buttons

Slide 35

Slide 35 text

ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links

Slide 36

Slide 36 text

ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion

Slide 37

Slide 37 text

ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE

Slide 38

Slide 38 text

ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE Form fields that accept accented characters

Slide 39

Slide 39 text

ACCESSIBILITY AT SCALE Buttons that work as buttons Links that work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE Form fields that accept accented characters Right-to-left text presentation that just works

Slide 40

Slide 40 text

IF YOU DO NOTHING ELSE

Slide 41

Slide 41 text

WRITE DOCUMENTATION

Slide 42

Slide 42 text

HIRE A SERVICE DESIGNER WRITE DOCUMENTATION

Slide 43

Slide 43 text

DESIGN SYSTEMS ARE HARD

Slide 44

Slide 44 text

DESIGN SYSTEMS ARE HARD AND THAT’S THE WORK

Slide 45

Slide 45 text

- Why Every Design System Needs a Service Designer - Conway’s Law / Uncle Dave's Law - Anatomy of a Design System - Design System Checklist - How the Right Design System Streamlines a Large Organization’s Digital Development RESOURCES