Blog Insights
Three Ways to Use a Design System
Design systems are a hot topic, yet there’s often confusion about what they are and how they are used. One explanation for this is that there are several ways to use design systems within the design process. In our What Is a Design System post, we define a design system as a series of components that can be reused in different combinations to build unique but consistent layouts. The four reasons for using a design system are scale, consistency, efficiency, and teamwork—all of which save time and money. Here are three ways to use a design system.
As a Template
What it is: A template for a website that can be used as a foundation for a website design system.
A template design system, as the name implies, is a way to create a foundational framework. The purpose of a template—design system is to create a shared language and defaults for developers and designers so they are starting from the same place. This use case solves the problem of having to recreate a set of elements from scratch each and every time. It can prove inefficient for designers and developers to both create assets such as buttons or card styles from scratch on every project. At Forum One, we use a set of Sketch files that have template components, typography, and a style guide that match the tokens of our development starter theme. Our designers modify the template to create website design systems for our clients.
Designers do not need to use all of the defaults in the template, but instead, only those that meet the needs of the website goals and structure. However, it is important to know what the defaults are in case the designer chooses not to modify the bullet styling, for example. The United States Web Design System is an example of a large scale templated design system that is modified and used for government websites. This design system is brand agnostic and can serve as a foundation for future work.
As a Custom Design
What it is: A system created for a specific brand unique to its needs and goals.
At its core, a design system is a Lego set that users can use to mix and match to create new pages on the website. Websites are candidates for a design system that is motivated by development and design efficiency, maintaining brand, and ensuring UI consistency. Gone are the days of old where designers are asking developers to create 10 different button styles without asking why (hopefully). A custom design system allows flexibility and longevity if executed well.
Conducting a design system audit is vital, once or twice a year is vital in ensuring that new type styles, color, and components, and styles that were added are working within the bounds of the initial design system. Even the most well-designed custom system cannot account for every scenario you will encounter if you are expanding your website’s capabilities. It is altogether too common for websites to become a conglomeration of styles where even the designers or content creators closest to the site aren’t certain of what style should be used when. As custom design systems evolve, active support is needed to help them grow and succeed. Like all uses, a custom design system will allow for long-term growth and brand fidelity if cared for and benefits from a set of guidelines that is revisited and updated regularly as part of the audit.
For Product Design
What it is: A system across a set of tools or products that ensures brand and user experience consistency.
Google Material Design and Apple’s HIG (Human Interface Guidelines) are perhaps the most well-known, in-depth, and earliest models for a product design system. Their design system was created to ensure consistency across a breadth of applications in the Gsuite and Apple’s IOS, explaining the extremely detailed documentation for both. The biggest difference between a website design system and a product design system is how often they are maintained. Neither Google nor Apple waits years to do a design audit. Instead, their design teams maintain, modify, and tweak their system every single day. The Google Material Design update announcement calendar goes back to April of 2015, which speaks to the value of gradually updating a design system as opposed to throwing everything out and starting over every few years.
Another way to think about product design is an app on your phone is a product but some apps are also websites such as Gmail. A simple way to use and think about this way of using a design system is that a product is something with a primary goal and function such as Gmail, Airbnb, or Dropbox, and these product design systems are being adjusted and enhanced regularly as opposed to a website that is often revised annually or not at all.
