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