The list of the best systems built and maintained by the companies with best practices in the industry that you can use to learn from and inspire your designs.
Over the last few years, the scale and speed of designing an interface have significantly increased. There are millions of web and mobile applications, and those millions of websites or apps might have hundreds and thousands of screens. We need design systems to manage design at scale and streamline the process.
In this article, I want to start a dialogue around design systems. As companies worldwide continue to invest in digital transformations, they are finding that they need to shorten the time it takes to build new products. A Design System is one such resource that helps you do this efficiently across multiple touchpoints. So without any further delay, let’s quickly dive into it.
What is a Design System?
While researching for this article, I was looking for an exact and straightforward definition, but there are only some vague concepts floating around the internet. It seems to vary based on who you ask.
Down below are two definitions I think are most appropriate:
“The complete set of design standards, documentation, and principles along with the toolkit(UI patterns and code components) to achieve those standards.” (source: uxpin.com)
“Design systems are essentially collections of rules constraints in principles implemented in the design and code. These three attributes serve distinct functions and provide a coherent system at systemic order in systems for buttons to single-page applications.” (source: medium.muz.li)
In summary, a design system is a set of standards to manage design at scale by reducing redundancy and maintaining consistency.
1. Material Design
It is a treasure chest for simple, elegant design patterns and style guides. Developed by Google.
2. Fluent Design System
Microsoft developed the Fluent design system.
3. Atlassian
A design language to create simple, intuitive, and beautiful experiences.
4. Polaris
Polaris from Shopify. It integrates designer and developer workflow.
5. Human Interface Guidelines
Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.
6. Carbon Design System
Carbon is IBM’s open-source design system for products and digital experiences
7. Mailchimp
Mailchimp design system is playful and expressive
8. Audi
The user interfaces for Audi.
9. Airbnb Design System
Developed and maintained by Airbnb.
10. Lightning Design System
Ready-to-use HTML and CSS UI elements provide the foundation for Salesforce experience development.
What lessons can you take away from this? Assume you’re developing an e-commerce site with a dropdown menu for categories. Not sure what size your dropdown’s arrow should be or how far away from the text should be placed? You can learn how to accomplish it by looking at a pioneering shopping system like Shopify!
If you’d like to support me as a writer, consider becoming a Medium member. It’s just $5 a month, and you get unlimited access to Medium.
Much Love!
