10 Best Design Systems and How to Learn (and Steal) From Them
What is a design system anyway?
A Design system is a series of reusable elements that allow teams to design and develop a product following predetermined standards. A design system is the visual foundation of a company’s products and is key to attracting users.
For UX designers, design systems are a great way to maintain consistency within a design and across products.
Why do companies create them?
A design system gets created in collaboration with an entire product team (programmers, engineers, designers, product managers, C-suite team, etc.)
Ideally, they come together as a committee to work on it; take inventory of all their current digital product assets (colors, logos, headers, footers, forms, code, etc), and attempt to come to some consensus about how things ought to be designed, coded, presented and talked about.
It’s their master plan, the source of all truth, and a reference to ensure everyone who works on their product is always on the same page, consistent, and in agreeance with the way things should be.
What you can learn from them
In short Everything
They are designed by the best of best designers in the world, it’s a course in itself that is available online (that’s also Free Too)
Say you’re designing an e-commerce site and the menu needs a dropdown for categories. Not sure what size your arrow should be on the dropdown, how far away from the text to place it, or what it should look like when it’s fully expanded? You can look to a shopping system pioneer like Shopify to see how they do it!
Here is our top 10 list (in no particular order) of the greatest of the greats:
1. Google Material Design System
2. Apple Human Interface Guidelines
3. Microsoft Fluent Design System
5. US Web Design Government Design System
