Design systems: Making design and code reusable, scalable and consistent

Design systems enable teams to design and develop better digital products faster. Why? Because reusing well-defined styles applied to components and patterns provides scalability and consistency. However, the main value of a design system is in supporting close teamwork and spreading the company’s values and principles across the team, which also translates into clear benefits for the user.

A common problem in design

If you work in or with UX design, with developers and designers on one or more teams, you’ve probably encountered the following problem:

Designers and developers spend a remarkable amount of time trying to figure out the standards for a simple element of a digital product, such as a button. Common questions are:

• Exactly what color is the button?
• How big does the text need to be if the button is to be used on a desktop screen, and how big if it is to be used on a tablet or mobile device?
• What is the spacing between the text and the container?

Designers and developers ask themselves these questions when creating their digital products and waste time searching for the style of an element or component. Naturally, they look for standards. This can easily pile up as they search for more complex components and patterns. This can lead to frustrations within the team, inconsistencies, and delays in design and development. The result: a digital product that is frustrating for the user, not to mention the cost to the company or organization producing the product because of this lost time.

What is a design system?

Or to put it another way, what is NOT a design system? It is certainly not software; it is not an application that can be installed, and it is not a project with a beginning and an end. So, what is it?

Let’s describe it as the way designers and developers work together with a shared vision, clear principles, and strong values. Working with a design system brings tangible benefits to companies and organizations, and therefore to all their users, be they customers, citizens or employees.

It is an ongoing project that enables companies and organizations to innovate and develop their digital products.

A design system comprises a collection of standardized, reusable components and patterns guided by a clear visual language. Let’s call this visual language a style guide. These components and patterns can be put together to create any number of websites and applications.

Each element, component, and pattern is designed and created once, the code matches the design, and together they represent the personality of the product brand. An optimized and consistent application or website brings clear benefits to users, such as fast learning, higher productivity, and fewer errors during use.

Key elements of a design system

Some other relevant topics in a design system are: 

• Design principles
• Visual language
• Standards and specifications
• Content: Editing & Tone
• Naming conventions & file structure
• Technology stack
• Tool set, assets & templates
• Accessibility standards & conventions
• Control & Methodology

One designer = one solution

While development is way ahead in inventing ways to reuse components, design struggles to scale the applications it supports – why? Because custom applications are usually designed for each specific solution. Designers are very interested in solving problems and tend to develop specific solutions. This is a good trait, don’t get me wrong, I am a designer myself.

It becomes problematic when these specific solutions become more extensive, apply to multiple products or multiple teams. Then scaling issues arise such as inconsistencies that slow down the design and development process and become difficult to maintain over time.

If there is more than one designer in your organization, you can start building a design system now. Even if there is only one designer, he/she can start down the path of building a design system. This means you can adopt a design system mindset or philosophy, a specific approach to structuring your design and organizing

Design System Philosophy

One way to change the structure of the design and enable component reuse is to make it scalable by applying the atomic design philosophy on which design systems are based.

Atomic design uses a practical analogy from chemistry:

The atomic analogy would break the design down into its individual elements that are still functional, such as a button.

Then you can combine these atoms into smaller groups that work together, these are called molecules. Think of an input field.

Organisms are a bit more complex, and they combine molecules and/or atoms; an example might be a header.

Then there are templates and pages that are outside the analogy, but still used by Atomic Design

Atomic structure simply illustrated after Brad Frost:

Atomic Design is helpful in defining the components, but it is only one way to describe the elements of a design system. It is not necessary to use the same terminology and exact naming for elements and components, but it is important to use the same principle and understand how it works. You can also use reusable building blocks or another analogy like Lego bricks.

Design systems summary

Key benefits and values of using design systems in the creation of digital products are:

• Reuse well-defined styles in elements, components, and patterns that provide scalability and consistency for digital products
• Improving consistency = improving the quality of the user interface = improving the usability of the digital product
• Foster a shared vision within the team
• Make the design and development process more focused and efficient 
• Establish and document a common vocabulary, a visual language, to provide clear and recognizable, easy-to-use guidance
• Save time searching for components and specifications on how to use them
• Providing users with a well-designed and optimized digital product that improves learnability, brand awareness, and error reduction.

Author:  Laura Chavarria

Keen Design

Keen Design ist eine reine UX Agentur und bietet seit 2003 maßgeschneiderte UX Lösungen auf großen Projekten, u.a. für das Redesign der Online-Steuererklärung in den Niederlanden. Wir bieten Unternehmen UX Services, mit denen Innovation ermöglicht, Digitalisierung vorangetrieben und User Journeys hochwertig erlebbar werden. Damit sind wir Vorreiter bei den spezialisierten UX Lösungen. Keen Design hat UX-Design-Spezialisierungen in verschiedenen Branchen entwickelt und dedizierte Geschäftseinheiten für den Finanzsektor, Software, den öffentlichen Sektor und das Gesundheitswesen eingerichtet. Weitere Informationen unter www.keen.design