Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Growing the WordPress design system

Growing the WordPress design system

Talk at WCEU

Tammie Lister

June 10, 2022

More Decks by Tammie Lister

Other Decks in Design


  1. Growing the WordPress design system Tammie Lister

  2. Hi

  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
  4. Why a design system?

  5. Communication

  6. Quality

  7. Standards

  8. Empowering

  9. Why a WordPress design system?

  10. Easing contribution

  11. Remaining competitive

  12. Providing a foundation

  13. The WordPress design system so far

  14. Organic system

  15. The roots

  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
  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/
  18. User types

  19. Beyond core

  20. Within the system

  21. Extending the system

  22. Themes as design systems

  23. Client design systems

  24. Issues

  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
  26. Hidden knowledge

  27. Out of sync silos

  28. It grew from one need

  29. Presuming

  30. System extenders

  31. Building on the system

  32. The extending dream

  33. The shipping trap

  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
  35. The future

  36. Take stock

  37. Grow foundation

  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
  39. None
  40. Thank you!