Oct 31, 2020
Design System: What It Is And Why You Need One
What is Design System?
There are a lot of definition about Design System in the world. However, most of them share the similar idea.
One of them is:
A Design System is the single source of truth which groups all the elements that will allow the teams to design, develop and maintain the quality of the product.
Design Systems evolve constantly with the product, tools, and new technologies. They are a great resource to learn in creating better UX and UI.
Below are the quotes from professions who address the importance of design system and believe it works well.
“Without a shared design language and practices, collaboration is difficult.”
― Alla Kholmatova, Design Systems“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.”
― Alex Schleifer, Airbnb
Why do we use Design System?
So why do we use Design System? Some of the benefits are:
- Consistency
- Reusability and Speed
- Iteration of components over time — more thoughtfulness can be put into each component as they are refined.
- empowers non-visual designers to create beautiful things.
- helps designers and developers work better together — Design systems force designers to systematize their work, to think in components.
World’s Top 5 Design Systems
To help you understand the design systems more easily, a list of 5 examples have been gathered which will help you get inspired.
Here are the curated list of the world’s top design systems :
1. Google: Material Design System
Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Material Design is based on open-source code, facilitates collaboration between designers and developers, and helps teams quickly build products.
It was first introduced as a design language by Google in 2014. We are very familiar with this design system since most of the software we use in our daily lives follow this system — Gmail, YouTube, Google Drive, Docs, etc.
2. Apple: Human Interface Guidelines
Apple’s design system provides in-depth information and UI resources for designing great apps that integrate seamlessly with Apple products and services. It offers content by its own software — macOS, iOS, watchOS, and tvOS.Especially, you can watch numerous video sessions and tutorials for building user-friendly apps quickly and accurately.
3. Microsoft: Fluent Design System
Fluent is an open-source, cross-platform design system developed by Microsoft in 2017. It gives designers and developers the frameworks they need to create engaging product experiences — accessibility, internationalization, and performance included.
It includes instructions for the designs and interactions used within software designed for all Windows 10 devices and platforms. We are also very close to this design system since many Microsoft apps —Word and Excel, etc utilize Fluent UI functionality.
4. IBM: Carbon Design System
Carbon is IBM’s open-source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
The goals of the design system include improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.
5. Shopify: Polaris Design System
Polaris is a system launched by Shopify, a multinational e-commerce company with a namesake proprietary platform for online stores and retail point-of-sale systems. It aims to help designers and engineers to create user-friendly applications for Shopify merchants so that they can build better user experiences.
It offers detailed guidelines on not only typography, colors but also sounds and interaction states, etc.
Weaknesses of Design System
Design system has many advantages and is definitely worth using it. However, there are some limitations to it.
- Design systems constrain the designer’s creativity. — It is a set of rules which define what you are able to do and how you should design.
- Design changes very rapidly. — Some decisions are becoming not up-to-date anymore and it’s necessary to review a Design System after a while.
- Systems tend to become inflexible over time
The Take Away
Using Design systems has both pros and cons. However, the benefits of the design systems are too significant to ignore. Typically, it is easy to build one when starting a new product with minimum efforts. Even if the product is already up and running for a long time without a system, it would be worth investing time and money into building one.
Not only that, creating a thoughtful design system would be an essential part because you need to be aware of maintaining the Design system. This is because design system should adapt to the ever-changing, fast development cycles of product development.
Below are the talk from Hayley Hughes, an Experience Designer at Airbnb, which would be a great inspiration for getting insight of how the design system should be built. In this talk she explains how design systems can help businesses become more efficient, resourceful environments, as well as help designers, create a better user experience.
References
- Objectivity, The truth about design system
- Nathan Curtis, Defining design systems
