Engage 2019: Building a design system to modernize Connections
0 likes413 views
A design system is a cohesive collection of components, patterns, and guidelines tailored to an organization's needs, promoting efficiency, consistency, and familiarity across digital products. It simplifies communication and collaboration between teams, enabling maintainable and scalable solutions. Companies invest in design systems to enhance user experience, reduce bottlenecks, and encourage a shared design language while also addressing customization and branding considerations.
Engage 2019: Building a design system to modernize Connections
- 2. What is a design system and why do I want one?
- 3. • What is it • Why • How do I get started
- 4. “Shared (design) language” “a series of components that can be reused in different combinations” “Styleguide” “Library of reusable components and patterns” “a set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product”
- 5. Bootstrap
- 6. Material
- 7. A design system is your organizations design language mixed with conventions. Its built for your particular needs
- 8. Lightning Design System (Sales Force)
- 10. DLS (AirBNB)
- 11. Carbon (IBM)
- 13. So, Why are all these companies investing in design systems? Efficiency • Creates a unified language so anyone can talk about it. • Developers and product owners becomes lego builders. • Reduce bottlenecks. • Maintainable and scalable.
- 14. So, Why are all these companies investing in design systems? Familiarity • Human minds crave consistency. We are pattern machines. • A user can use previous experience (aka what they learnt elsewere)
- 15. How
- 17. Is it a cost or investment? Make sure you know what you are purchasing Ergonomics Branding
- 18. Don’t fight the system Some people have a very strong opinion of how they want things to look and behave. In general it is a bad idea to try to change the behavior and general layout of the system.
- 19. Review your existing systems. Screenshot components and patterns and lay them out on a board.
- 21. Categorize them and try to pick one pattern and stick to it save/cancel, dialogs, tabs, search…
- 23. Name patterns and components to get a common naming scheme. Helps a lot in communication and documentation. Look at existing design systems for inspiration
- 25. Decide beforehand what you want to customize. Skinning can be very addictive
- 26. Start with low hanging fruits. These will get you a long way • Colors • Typography • Buttons
- 27. Continue with iconography. Ideally, You want all icons to look and mean the same between all your applications. (We struggle with this)
- 28. If possible, use a CSS preprocessor that allows you to use variables. Or use CSS Custom Properties (“CSS Variables”) Define variables for all colors and font properties
- 29. :root { --button-background-color: green; --button-text-color: white; --font-weight-bold: 700; } .my-button { padding: 4px 8px; background-color: var(--button-background-color); color: var(--button-text-color); font-weight: var(--font-weight-bold); }
- 30. Style leakage • When doing overrides, be aware of style leakage. • Pay attention to all declarations you’re NOT setting