A lightning talk by Ethan Muller, who is a designer/developer at
Let’s talk about design
systems for a little bit.
Slide 2
Slide 2 text
@ethanmuller
#SparkboxUnConf
First, what’s a design system?
Slide 3
Slide 3 text
@ethanmuller
#SparkboxUnConf
First, what’s a design system?
Slide 4
Slide 4 text
@ethanmuller
#SparkboxUnConf
First, what’s a design system?
Slide 5
Slide 5 text
@ethanmuller
#SparkboxUnConf
A design system contains both style
guide and pattern library content.
Slide 6
Slide 6 text
@ethanmuller
#SparkboxUnConf
Slide 7
Slide 7 text
@ethanmuller
#SparkboxUnConf
A style guide deconstructs an aesthetic
to show you what makes it tick.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
@ethanmuller
#SparkboxUnConf
A pattern library is a collection of UI
chunks that can be stuck together to
make websites, apps, etc.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
@ethanmuller
#SparkboxUnConf
Slide 12
Slide 12 text
“When you create a design system, you’re
not just creating reusable patterns—you’re
operationalizing how your company
approaches design.”
– Yesenia Perez-Cruz, Expressive Design Systems
Slide 13
Slide 13 text
@ethanmuller
#SparkboxUnConf
Big organizations have
difficult problems.
Slide 14
Slide 14 text
@ethanmuller
#SparkboxUnConf
Slide 15
Slide 15 text
@ethanmuller
#SparkboxUnConf
Slide 16
Slide 16 text
@ethanmuller
#SparkboxUnConf
Slide 17
Slide 17 text
@ethanmuller
#SparkboxUnConf
Breaking an existing product into
components probably won’t make a
system that serves everybody.
Slide 18
Slide 18 text
@ethanmuller
#SparkboxUnConf
This work needs to be done on
the brand/organization level to
be useful to everybody.
Slide 19
Slide 19 text
@ethanmuller
#SparkboxUnConf
Design systems
should explain design.
Slide 20
Slide 20 text
@ethanmuller
#SparkboxUnConf
Slide 21
Slide 21 text
@ethanmuller
#SparkboxUnConf
The important part isn’t the comp itself.
It’s the decisions that made the comp.
Slide 22
Slide 22 text
@ethanmuller
#SparkboxUnConf
Slide 23
Slide 23 text
@ethanmuller
#SparkboxUnConf
WHAT
WHY
Slide 24
Slide 24 text
@ethanmuller
#SparkboxUnConf
Slide 25
Slide 25 text
@ethanmuller
#SparkboxUnConf
Slide 26
Slide 26 text
@ethanmuller
#SparkboxUnConf
These what/why combinations
belong in your design system.
Slide 27
Slide 27 text
@ethanmuller
#SparkboxUnConf
Design systems
should start
really general.
Slide 28
Slide 28 text
@ethanmuller
#SparkboxUnConf
1. Typography
2. Color
3. Buttons
Slide 29
Slide 29 text
@ethanmuller
#SparkboxUnConf
General concepts are more portable
across different platforms.
Slide 30
Slide 30 text
@ethanmuller
#SparkboxUnConf
Invent design
units other than
components.
Slide 31
Slide 31 text
@ethanmuller
#SparkboxUnConf
Slide 32
Slide 32 text
@ethanmuller
#SparkboxUnConf
The most common unit of
design is components.
Slide 33
Slide 33 text
@ethanmuller
#SparkboxUnConf
Components don't have to be
the only unit of design.
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
@ethanmuller
#SparkboxUnConf
Another unit of design: Skins
skin {
background color
foreground color
link color
}
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
@ethanmuller
#SparkboxUnConf
Design systems should create
clear contracts between
design and development.
Slide 39
Slide 39 text
@ethanmuller
#SparkboxUnConf
Get creative about
design → development.