What Is a Design System and When to Create One
Throughout my continuing journey as a designer I have started to notice several companies are creating what they call design systems. Some people also like to refer to them as design languages, visual languages, or human interface guidelines. Google has Material Design, Apple has created their Human Interface Guidelines, last year Salesforce put together their Lightning Design System, and Airbnb has recently put together a visual design language for their design team. I became curious as what a design system is and why these companies have started to create and document them. Below I’ve broken down my research into a few sections: what is a design system, what are the benefits, and when it is and isn’t beneficial to create one.
What exactly is a design system?
One way to look at a design system is as a style guide but a step further. A style guide provides you with guidelines on colors, typography, patterns, photography, and visuals. A design system provides all those guidelines but rather than providing them as individual pieces, a design system explains how all those guidelines will be applied and work together as components. These components are not only documented from a design perspective, but they are also documented from a developer perspective. As the design of each component is explained, a sample of code is provided along with it. This way not only will the design components be consistent throughout the product, so will the codebase.
Ultimately, a design system provides a unified set of UX, UI, and visual design rules and promotes harmony across different platforms such as Android, iOS, and Desktop thus creating consistency. These rules provide a unified language for the designers and developers to communicate with.
What are the benefits of creating a design system?
Shared Vocabulary Between Designers & Developers
Misunderstandings can occur if everyone is not sharing the same language. This can cause confusion and take time to get everyone on the same page. By having a shared design system or language established, all designers, developers, and team members involved on a project can ensure they are using the same language. This is not the only reason, but one of the strongest reasons why Spotify and Airbnb decided to create their own design systems.
“Visual language is like any other language. Misunderstandings arise if the language is not shared and understood by everyone using it. As a product or team grows, the challenges within these modalities compound.” — Karri Saarinen, Principal Designer at Airbnb
Helps Onboard New Designers and Developers
The documentation of a design system helps onboard new designers and developers to a project by allowing them to become fluent in the design principles, patterns, and terminology more efficiently than if they were to learn them from their team members, design files, and/or using the product.
Saves time
Having a shared language amongst all team members involved can help save time in making sure everyone is aligned, there is no miscommunication, and not having the same questions asked over and over again. There is always one source of truth to reference.
Consistent Design Across Multiple Platforms
The creation of a design system requires to define the rules of how the design will be used across platforms, thus creating a consistent design no matter what platform the user may be using the product on.
For example, this can be seen easily across various Google products such Gmail, Google, or Youtube. They all use Google’s Material design and have a consistent and familiar feel. Whenever using these products I can tell from the design I am using a Google Product.
Apple also provides this distinction as well. My Macbook and iPhone that I use daily both follow the same design patterns, especially throughout all the apps. Even the Apple watch, despite how small it is, follows the same design patterns and interactions as all Apple products.
Enhances User Experience
By having a consistent design system across platforms, this enhances the user experience by creating harmony. A consistent use of colors, patterns, and interactions across different platforms creates a sense of familiarity and security to your users. A great example of this is Starbucks. No matter where you are in the world, Starbucks always feels familiar to the Starbucks you see at home.
Is it always beneficial to create a design system?
Large established companies that provide their app on multiple platforms tend to benefit the most from creating a well-documented design system due to their size and complexity. A design system provides a single source of truth given the number of employees, teams, and products the company may need to regulate.
On the other hand, if you’re a company with a single product that is very straight forward, it might not make sense to create a design system because there is less to regulate in terms of designs and less to communicate to your small team.
Creating a design system takes time and once it is “complete” it requires maintenance and will need to be iterated upon. This can be overbearing, especially when working on short-term projects. What can be utilized instead is either current successful designs systems for short term projects or front-end frameworks that have a minimal visual design that can be touched up to create a unique look and feel.
Takeaways
Overall, a design system can be a great addition to a company and its product(s). It provides consistency amongst designers & developers, consistency across platforms, and provides the user a sense of familiarity and security while using a product. For smaller teams and projects the time for creation and maintenance of a design system may be better spent working on the product. Lastly, even though it’s great that design systems create a set of rules and consistency, never be afraid to design solutions outside of the documented patterns as that allows for innovation.
Below are several links to well documented design systems:
