$30 off During Our Annual Pro Sale. View Details »

Growing the WordPress design system

Growing the WordPress design system

Talk at WCEU

Tammie Lister

June 10, 2022
Tweet

More Decks by Tammie Lister

Other Decks in Design

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