Slide 1
Slide 1 text
Growing the
WordPress design
system
Tammie Lister
Slide 2
Slide 2 text
Hi
Slide 3
Slide 3 text
“The generally-accepted definition of a design system
is that it’s the outer circle—it encompasses pattern
libraries, style guides, and any other artefacts. But
there’s something more. Just because you have a
collection of design patterns doesn’t mean you have a
design system. A system is a framework. It’s a
rulebook. It’s what tells you how those patterns work
together.”
adactio.com/journal/13844
Slide 4
Slide 4 text
Why a design
system?
Slide 5
Slide 5 text
Communication
Slide 6
Slide 6 text
Quality
Slide 7
Slide 7 text
Standards
Slide 8
Slide 8 text
Empowering
Slide 9
Slide 9 text
Why a
WordPress
design
system?
Slide 10
Slide 10 text
Easing
contribution
Slide 11
Slide 11 text
Remaining
competitive
Slide 12
Slide 12 text
Providing a
foundation
Slide 13
Slide 13 text
The
WordPress
design system
so far
Slide 14
Slide 14 text
Organic system
Slide 15
Slide 15 text
The roots
Slide 16
Slide 16 text
Governed
The pattern library process is built in to
your org
Automatic
The pattern library is part of your app
build process
Manual
The pattern library has code snippets
Static
A static PDF of your brand guidelines
Inconsistent
The absence of a design system
medium.com/slalom-build/a-maturity-model-for-design-systems-93fff522c3ba
Slide 17
Slide 17 text
“If we consider a “system” as a combination of parts
working together, and “design” as the plan of look
and function of something….It’s not a component
library you assemble like a puzzle and arrive at a
consistent layout. A design system indeed has a
presentation aspect, but it is also about function and
integration. It is about experience.”
smashingmagazine.com/2022/02/recipe-good-design-system/
Slide 18
Slide 18 text
User types
Slide 19
Slide 19 text
Beyond core
Slide 20
Slide 20 text
Within the system
Slide 21
Slide 21 text
Extending the
system
Slide 22
Slide 22 text
Themes as
design systems
Slide 23
Slide 23 text
Client design
systems
Slide 24
Slide 24 text
Issues
Slide 25
Slide 25 text
“Several people of several teams are in charge of the
system. The adoption of the system is quicker because
everyone feels involve but it also needs team leaders
that will keep an overall vision of it.”
medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9
d03be6a0
Slide 26
Slide 26 text
Hidden
knowledge
Slide 27
Slide 27 text
Out of sync silos
Slide 28
Slide 28 text
It grew from
one need
Slide 29
Slide 29 text
Presuming
Slide 30
Slide 30 text
System extenders
Slide 31
Slide 31 text
Building on the
system
Slide 32
Slide 32 text
The extending
dream
Slide 33
Slide 33 text
The shipping trap
Slide 34
Slide 34 text
“A design system needs support and love to be
nurtured and to grow. It also needs investment.”
24ways.org/2017/why-design-systems-fail
Slide 35
Slide 35 text
The future
Slide 36
Slide 36 text
Take stock
Slide 37
Slide 37 text
Grow foundation
Slide 38
Slide 38 text
“But it turns out a design system can't be perfected in
solitude because it's rooted in human relationships. It
serves as a mirror for the company, a reflection of the
dynamics at play between designers, engineers,
product managers and even customers…We began to
treat the design system as a cultural project instead of
a technical one.”
figma.com/blog/pairing-is-the-key-to-evangelizing-your-design-system
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Thank you!