Growing the WordPress design system

Talk at WCEU

Transcript

1. Growing the
   WordPress design
   system
   Tammie Lister
   

   View Slide

2. Hi
   

   View Slide

3. “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
   

   View Slide

4. Why a design
   system?
   

   View Slide

5. Communication
   

   View Slide

6. Quality
   

   View Slide

7. Standards
   

   View Slide

8. Empowering
   

   View Slide

9. Why a
   WordPress
   design
   system?
   

   View Slide

10. Easing
    contribution
    

    View Slide

11. Remaining
    competitive
    

    View Slide

12. Providing a
    foundation
    

    View Slide

13. The
    WordPress
    design system
    so far
    

    View Slide

14. Organic system
    

    View Slide

15. The roots
    

    View Slide

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

    View Slide

17. “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/
    

    View Slide

18. User types
    

    View Slide

19. Beyond core
    

    View Slide

20. Within the system
    

    View Slide

21. Extending the
    system
    

    View Slide

22. Themes as
    design systems
    

    View Slide

23. Client design
    systems
    

    View Slide

24. Issues
    

    View Slide

25. “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
    

    View Slide

26. Hidden
    knowledge
    

    View Slide

27. Out of sync silos
    

    View Slide

28. It grew from
    one need
    

    View Slide

29. Presuming
    

    View Slide

30. System extenders
    

    View Slide

31. Building on the
    system
    

    View Slide

32. The extending
    dream
    

    View Slide

33. The shipping trap
    

    View Slide

34. “A design system needs support and love to be
    nurtured and to grow. It also needs investment.”
    24ways.org/2017/why-design-systems-fail
    

    View Slide

35. The future
    

    View Slide

36. Take stock
    

    View Slide

37. Grow foundation
    

    View Slide

38. “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
    

    View Slide

39. View Slide

40. Thank you!
    

    View Slide