Slide 1

Slide 1 text

Growing the WordPress design system Tammie Lister

Slide 2

Slide 2 text


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.”

Slide 4

Slide 4 text

Why a design system?

Slide 5

Slide 5 text


Slide 6

Slide 6 text


Slide 7

Slide 7 text


Slide 8

Slide 8 text


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

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.”

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


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.” 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


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.”

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.”

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Thank you!