Design Systems: What Are They and How Can Products Benefit from Using Them
What is a design system?
A design system is a library of standard, extensible components that create a consistent visual language paired with accompanied defined behaviors for each component. Components are individual elements that stem from the atomic design methodology. They can be used as building blocks to assemble a user interface to be used across multiple applications, devices, screen sizes, and mediums.
Material design is an example of how components are paired with design specifications, defined with expected behaviors and guiding principles on usage (see figures 1 – 3). From there, a design system uses these standard components to build patterns such as inputs, buttons, navigations, error states, etc.
Why do design systems matter?
Design systems create a unified experience across platforms, devices and enterprise suites of applications. They create a strong, extensible base through a modular approach using consistent components and defined behavior. The design system creates consistency and standards which matters for both usability and brand standards.
Consistent design patterns become recognizable when used repeatedly. In contrast, without a design system in place, when unique user interface elements are constantly introduced, cognitive load increases in parallel. Forcing the user to encounter new ways to take the same action forces them to interpret UI elements rather than focus on the task they are trying to complete. By reusing the same components consistently in the UI, the UI then becomes easier to understand and use which also decreases user training time for applications.
Standard behaviors for these elements are also important regarding usability. If elements across pages look visually unified but have slight nuances in their behavior, unexpected interactions can cause confusion. Defining not only the visual language, but documentation around component behavior, interactions, and guiding principles of usage is what sets a design system apart from a style guide or UI pattern library. See figure 4 below for an example of how material design provides usage guidelines.
Additionally, design systems keep brand standards intact. Colors, typography, horizontal and vertical spacing and rhythm, and numerous other design components can be iterated and mutated over time. The various iterations of design existing together can alter brand image in a negative light if your website or application appears disheveled with all these inconsistencies.
How do design systems help product development?
Design systems create an optimized environment for product development. They allow for quicker prototyping by using existing components and faster development time by developing the components and their respective behaviors once and then reusing them. In turn, this fosters faster product iterations when combining these factors and also reducing design and development debt.
Rapid prototyping while still maintaining consistency is possible when using a design system. Once a base system has been created, the components can feed a global symbol library in sketch and shared via the design system manager. As the design system evolves, updates can be pushed to the design manager and components in prototypes will be updated as long as the link is maintained to the global symbol. When a team of designers that may work on entirely different applications for the same brand work off the same global design system library, it ensures consistency across applications.
Design systems also reduce design and development debt. Instead of designing for a specific feature or an immediate use case only, a design system creates a language meant to be reused across applications. Once the system is built and coded, its elements can be reused to reduce technical overhead.
The reusable principle of design systems makes it easily scalable. Since a design system is a collection of reusable components, these components can be extended to any team or application. It scales design and development efforts through the reuse of these components. However, the scalability is not limited to the visual design or development efforts. There are standards and documentation in a design system around usage and behavior which will guide the intended user experience and remain intact when scaled.
Design systems are a powerful tool to help businesses scale with a solid foundation to reduce future design and development costs as well as support a consistent and positive user experience within the usage of their products.