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.
2. @ethanmuller #SparkboxUnConf First, what’s a design system?
3. @ethanmuller #SparkboxUnConf First, what’s a design system?
4. @ethanmuller #SparkboxUnConf First, what’s a design system?
5. @ethanmuller #SparkboxUnConf A design system contains both style guide and pattern library content.
6. @ethanmuller #SparkboxUnConf
7. @ethanmuller #SparkboxUnConf A style guide deconstructs an aesthetic to show you what makes it tick.
9. @ethanmuller #SparkboxUnConf A pattern library is a collection of UI chunks that can be stuck together to make websites, apps, etc.
11. @ethanmuller #SparkboxUnConf
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
13. @ethanmuller #SparkboxUnConf Big organizations have difficult problems.
14. @ethanmuller #SparkboxUnConf
15. @ethanmuller #SparkboxUnConf
16. @ethanmuller #SparkboxUnConf
17. @ethanmuller #SparkboxUnConf Breaking an existing product into components probably won’t make a system that serves everybody.
18. @ethanmuller #SparkboxUnConf This work needs to be done on the brand/organization level to be useful to everybody.
19. @ethanmuller #SparkboxUnConf Design systems should explain design.
20. @ethanmuller #SparkboxUnConf
21. @ethanmuller #SparkboxUnConf The important part isn’t the comp itself. It’s the decisions that made the comp.
22. @ethanmuller #SparkboxUnConf
23. @ethanmuller #SparkboxUnConf WHAT WHY
24. @ethanmuller #SparkboxUnConf
25. @ethanmuller #SparkboxUnConf
26. @ethanmuller #SparkboxUnConf These what/why combinations belong in your design system.
27. @ethanmuller #SparkboxUnConf Design systems should start really general.
28. @ethanmuller #SparkboxUnConf 1. Typography 2. Color 3. Buttons
29. @ethanmuller #SparkboxUnConf General concepts are more portable across different platforms.
30. @ethanmuller #SparkboxUnConf Invent design units other than components.
31. @ethanmuller #SparkboxUnConf
32. @ethanmuller #SparkboxUnConf The most common unit of design is components.
33. @ethanmuller #SparkboxUnConf Components don't have to be the only unit of design.
36. @ethanmuller #SparkboxUnConf Another unit of design: Skins skin { background color foreground color link color }
38. @ethanmuller #SparkboxUnConf Design systems should create clear contracts between design and development.
39. @ethanmuller #SparkboxUnConf Get creative about design → development.
40. @ethanmuller #SparkboxUnConf The End