Design Systems 🆕
Learn about the underlying tech stack, components and code behind design and how to take things from static to implementation.
Chapters
Design Systems 101
This video is an introduction to design systems and how you can learn and steal from them by downloading them, studying their atomic components and using them to speed up your own work. Design systems are comprehensive collections of guidelines, components, and assets that help teams maintain consistency in their products. Studying these systems offers valuable insights into effective design practices. (Featured as part of the Google UX Certificate Course)
Resources
📓 Exercise: Explore the design systems below and start to familiarize yourself with thier structure, components, elements and attributes.
-
Google Material Design System
Google's Material Design provides a unified experience across platforms and devices. It includes resources like layout principles, color schemes, typography, and components.
Material Design →
-
Apple Human Interface Guidelines
Apple's guidelines emphasize clarity, simplicity, and depth, offering insights into themes, user interaction, and visual design principles tailored for Apple platforms.
Apple HIG →
-
Microsoft Fluent Design System
Microsoft's Fluent Design focuses on creating inclusive, adaptable designs, covering aspects like color, typography, motion, and responsiveness.
Fluent Design →
-
Atlassian Design System
Atlassian provides tools for creating intuitive and user-friendly interfaces, with comprehensive guidelines on branding, components, and design patterns.
Atlassian Design System →
-
Uber Design System
Uber’s system highlights motion and accessibility, detailing their approach to color, typography, iconography, and user interactions.
Uber Design System
-
Shopify Design System (Polaris)
Shopify’s Polaris provides guidance on design principles, components, and content to ensure a consistent and cohesive user experience across e-commerce platforms.
Polaris →
-
IBM Carbon Design System
IBM’s Carbon Design System offers a robust framework for building products with consistent user experiences, featuring components, patterns, and accessibility tools.
Carbon Design System →
-
Mailchimp Design System
Mailchimp’s system emphasizes simplicity and clarity, providing resources on components, typography, colors, and how to design for their platform.
Mailchimp Design System →
-
Salesforce Lightning Design System
Salesforce’s Lightning Design System provides the tools and guidelines needed to create applications that adhere to the Lightning design style, with an emphasis on tokens and patterns.
Lightning Design System →
-
Help Scout Design System
Help Scout’s system focuses on visual elements, content style, and product design to create a consistent and user-friendly experience for their platform.
Help Scout Design System →
📔 Read the full article / video transcription here