Designing with Design Systems

After this brief talk, you’ll know the difference between design systems, style guides, and pattern libraries. You’ll also be aware of some common pitfalls of design systems. Finally, you’ll learn how design and development teams can work together to build more than just components.

Transcript

1. A lightning talk by Ethan Muller, who is a designer/developer at
   Let’s talk about design
   systems for a little bit.
   

   View Slide

2. @ethanmuller
   #SparkboxUnConf
   First, what’s a design system?
   

   View Slide

3. @ethanmuller
   #SparkboxUnConf
   First, what’s a design system?
   

   View Slide

4. @ethanmuller
   #SparkboxUnConf
   First, what’s a design system?
   

   View Slide

5. @ethanmuller
   #SparkboxUnConf
   A design system contains both style
   guide and pattern library content.
   

   View Slide

6. @ethanmuller
   #SparkboxUnConf
   

   View Slide

7. @ethanmuller
   #SparkboxUnConf
   A style guide deconstructs an aesthetic
   to show you what makes it tick.
   

   View Slide

8. View Slide

9. @ethanmuller
   #SparkboxUnConf
   A pattern library is a collection of UI
   chunks that can be stuck together to
   make websites, apps, etc.
   

   View Slide

10. View Slide

11. @ethanmuller
    #SparkboxUnConf
    

    View Slide

12. “When you create a design system, you’re
    not just creating reusable patterns—you’re
    operationalizing how your company
    approaches design.”
    – Yesenia Perez-Cruz, Expressive Design Systems
    

    View Slide

13. @ethanmuller
    #SparkboxUnConf
    Big organizations have
    difficult problems.
    

    View Slide

14. @ethanmuller
    #SparkboxUnConf
    

    View Slide

15. @ethanmuller
    #SparkboxUnConf
    

    View Slide

16. @ethanmuller
    #SparkboxUnConf
    

    View Slide

17. @ethanmuller
    #SparkboxUnConf
    Breaking an existing product into
    components probably won’t make a
    system that serves everybody.
    

    View Slide

18. @ethanmuller
    #SparkboxUnConf
    This work needs to be done on
    the brand/organization level to
    be useful to everybody.
    

    View Slide

19. @ethanmuller
    #SparkboxUnConf
    Design systems
    should explain design.
    

    View Slide

20. @ethanmuller
    #SparkboxUnConf
    

    View Slide

21. @ethanmuller
    #SparkboxUnConf
    The important part isn’t the comp itself.
    It’s the decisions that made the comp.
    

    View Slide

22. @ethanmuller
    #SparkboxUnConf
    

    View Slide

23. @ethanmuller
    #SparkboxUnConf
    WHAT
    WHY
    

    View Slide

24. @ethanmuller
    #SparkboxUnConf
    

    View Slide

25. @ethanmuller
    #SparkboxUnConf
    

    View Slide

26. @ethanmuller
    #SparkboxUnConf
    These what/why combinations
    belong in your design system.
    

    View Slide

27. @ethanmuller
    #SparkboxUnConf
    Design systems
    should start
    really general.
    

    View Slide

28. @ethanmuller
    #SparkboxUnConf
    1. Typography
    2. Color
    3. Buttons
    

    View Slide

29. @ethanmuller
    #SparkboxUnConf
    General concepts are more portable
    across different platforms.
    

    View Slide

30. @ethanmuller
    #SparkboxUnConf
    Invent design
    units other than
    components.
    

    View Slide

31. @ethanmuller
    #SparkboxUnConf
    

    View Slide

32. @ethanmuller
    #SparkboxUnConf
    The most common unit of
    design is components.
    

    View Slide

33. @ethanmuller
    #SparkboxUnConf
    Components don't have to be
    the only unit of design.
    

    View Slide

34. View Slide

35. View Slide

36. @ethanmuller
    #SparkboxUnConf
    Another unit of design: Skins
    skin {
    background color
    foreground color
    link color
    }
    

    View Slide

37. View Slide

38. @ethanmuller
    #SparkboxUnConf
    Design systems should create
    clear contracts between
    design and development.
    

    View Slide

39. @ethanmuller
    #SparkboxUnConf
    Get creative about
    design → development.
    

    View Slide

40. @ethanmuller
    #SparkboxUnConf
    The End
    

    View Slide