Creating consistency with Design Systems - and saving costs

A consistent brand presence, greater efficiency in design and development, and high scalability are the impressive advantages of a design system. Find out here how you can establish this way of working in your company.

Kathrin Köhler Experience Design Director (UI)
15.07.2024 10 min reading time

Content

  1. What is a design system?
  2. Excursus: Atomic Design
  3. Components of a design system
  4. Advantages at a glance
  5. Design system vs. pattern library
  6. Developing design systems
  7. Best practice examples

Designers and developers know the problem: with every new product, platform or project developed by a company, the challenges also grow. Constantly changing requirements in terms of technology, usability and strategy mean that designs quickly become outdated and confusing. Without structured processes, "Frankenstein products" are created that are reminiscent of a patchwork.

This is where design systems come into play. They offer a systematic solution by linking all elements in a logical sequence and allowing them to be updated globally. This allows teams to access standardized basic elements in real time and work together more efficiently. Design systems are revolutionizing the industry and making the classic relaunch superfluous.

Linear vs. iterative development process; source: "What is a Design System" by Vachhar/Maritan

What is a design system?

A design system is a collection of guidelines, best practices, components, and elements. It enables consistent and efficient designs to be created and maintained for an organization across all teams, platforms, and products.

It serves as a central reference for design decisions and helps to define and standardize the visual aesthetics, the behavior of user interfaces and the digital brand identity. In this way, a design system supports the company's goal of creating a seamless experience for users across all touchpoints.

Overview of the architecture of a design system

Excursus: Atomic design as a methodological basis

Brad Frost first presented the "Atomic Design" concept back in 2013. This is a modular approach to web development that is based on the periodic table of elements. Today, this approach serves as a methodological basis for design systems.

Frost divides web design into five levels:

  • Atoms: UI Core Components that cannot be broken down further. These include HTML tags, form elements, and buttons.
  • Molecules: Consist of multiple atoms that are combined to create simple UI components, for example, form label, search input, and button can be combined to create a "search form molecule".
  • Organisms: are made up of molecules and atoms. This results in complex components and modules, such as a header bar with logo, navigation, and search field.
  • Templates: Page layouts that define the placement of organisms and demonstrate the underlying content structure as well as the function of all elements in the context of the layout.
  • Pages: Page templates that show a user interface with real representative content in different variations.
Interaction of atoms, molecules, organisms, templates and pages; source: Brad Frost

Components of a UI/UX design system

A design system encompasses all aspects of design and brand experience development in a company for platforms, products, or services. The following components are interlinked:

  • Design guidelines: Rules and principles to define the design of user interfaces. Design guidelines specify how fundamentals (e.g. colors, typography, grid and motion) are used and define the visual aesthetics of layout principles and UI patterns.
  • Component Libraries: A collection of reusable tokens, styles, and UI core components (e.g. buttons, input fields, and tabs) that are consistently designed and structured according to current best practices.
  • Templates & Pages: Style sheets for different types of page types or product flows. They show the design and development teams how the developed elements can be used in combination with each other. This ensures that the design remains consistent across different parts of a project.
  • Brand Resources: Integration of brand assets such as logos, icon system and illustrations, as well as guidelines on how to use them in context.
  • Documentation: A comprehensive guide to using the design system. The documentation contains tutorials, design and code examples and explanations on the correct implementation of design elements.
  • Governance: A process for capturing feedback given by designers, developers and other stakeholders to continuously improve the design system. This can include feedback loops, surveys, reviews, or other communication channels.
Listing of the components of a design system; source InVision

Design Systems: The invisible hero behind successful products

A design system brings numerous advantages that optimize the entire development process and increase the quality of the results.


1. Consistency across different products

A design system ensures a standardized appearance and user experience across all of a company's products and platforms. This strengthens the brand identity and creates trust among users.


2. Facilitated collaboration between design and development

When creating the design system, designers and developers agree on a common language, clear guidelines, and structure. This speeds up the everyday development process immensely, improves communication and minimizes misunderstandings. For example, designers can communicate their visions precisely, while developers have concrete, reusable components to hand.


3. Increased efficiency in the development process

The reuse of design modules and standardized code components significantly reduces development time. Teams can concentrate on innovative and cross-platform solutions instead of dealing with recurring tasks. The rapid integration of new requirements, such as a switch to barrier-free web design, is thus significantly simplified.


4. Error reduction and quality improvement

Design systems minimize the likelihood of errors as tried and tested components are used. This leads to higher product quality and stability as much less time has to be spent on troubleshooting.

Cost efficiency and maintenance effort - when is a design system worthwhile?

You don't get all this for free: a design system requires a high initial investment and additional ongoing maintenance. It is worthwhile if the initial and ongoing costs are exceeded by the design and development work saved. This is regularly the case when projects are large, complex, and long-term and require many recurring design elements. In such scenarios, the investment is quickly amortized by the improved efficiency and quality of the results, making a design system a sensible and economical decision.

Efficiency of design systems in correlation to time utilisation; source: Ben Callahan

Do I need a design system?

Is the initial outlay for a design system in your organization worth it? Talk to us directly or simply find out with our decision flow!

The difference between design system and pattern library

A design system and a pattern library are tools used in software development to promote the consistent and efficient design of user interfaces. Although they have similar goals, there are fundamental differences between them:

design system pattern library

Scope and purpose

A design system is a comprehensive collection of guidelines, best practices, components, and resources that defines not only the visual design, but also the behavior of user interfaces and the brand identity. It serves as a central reference for the entire design of an organization or project.


A pattern library (component library) is more specific and usually focuses on the collection of reusable design patterns and components. It can be part of a design system or exist as a stand-alone tool that only focuses on the reusability of design elements.

Contents

In addition to one or more pattern libraries, a design system often also includes design guidelines, style templates, brand resources, and comprehensive documentation.


A pattern library focuses mainly on the collection and documentation of individual UI components, patterns and their variations.

Area of application

A design system provides a comprehensive guideline for the design of user interfaces in different applications or products of an organization.


Depending on its scope and purpose a pattern library may be less flexible and may offer fewer customization options Especially at team, platform, and product level, pattern libraries contain application-specific solutions that cannot be transferred universally.

design system

Scope and purpose

A design system is a comprehensive collection of guidelines, best practices, components, and resources that defines not only the visual design, but also the behavior of user interfaces and the brand identity. It serves as a central reference for the entire design of an organization or project.

Contents

In addition to one or more pattern libraries, a design system often also includes design guidelines, style templates, brand resources, and comprehensive documentation.

Area of application

A design system provides a comprehensive guideline for the design of user interfaces in different applications or products of an organization.

pattern library


A pattern library (component library) is more specific and usually focuses on the collection of reusable design patterns and components. It can be part of a design system or exist as a stand-alone tool that only focuses on the reusability of design elements.


A pattern library focuses mainly on the collection and documentation of individual UI components, patterns and their variations.


Depending on its scope and purpose a pattern library may be less flexible and may offer fewer customization options Especially at team, platform, and product level, pattern libraries contain application-specific solutions that cannot be transferred universally.

To summarize: A design system offers a comprehensive and strategic approach to design management, while a pure pattern library focuses on the practical collection and documentation of reusable design patterns.

Nevertheless, pattern libraries are an essential component of design systems and are therefore built up as a basis in the first steps of systems and continuously developed further during the process.

Developing a design system in 6 steps

Developing a design system varies in scope and structure depending on the size of the company, its focus and its objective. Design systems can be started small and gradually expanded. It is important to integrate all stakeholders in the process right from the start in order to take their needs into account.

These 6 steps are important when developing a design system:

Icon Analyse

1. Needs analysis and objectives

First, the existing designs, user feedback, and the company's brand guidelines are analyzed to understand the specific needs and tasks of the individual teams and to define the vision and long-term goals of the design system.

Icon Grundlagen

2. Design & Development

The basic elements are used to determine the look and feel of the design system. These include colors, typography, iconography, shapes, motion, grid, and sample layouts. Clear design principles are defined that serve as a guideline for the entire system. These reflect the values and goals of the brand, provide an overarching framework and at the same time offer the teams the freedom to create emotional designs within their own applications. Pattern libraries are also created and reusable design components based on the identified basic elements are developed.

Icon Dokumentation

3. Documentation

Comprehensive documentation for the design system will be created, including instructions on how to use the various components, design principles, brand identity guidelines, CSS styles, and other relevant information.

Icon Feedback

4. Feedback, testing, and iteration

The design system is tested both internally and with real users. Feedback is collected from various stakeholders and iterated based on this in order to continuously improve the system.

Icon Implementierung

5. Implementation and training

The design system is implemented in all relevant products and platforms, ensuring that all team members have access to it and use it consistently. Training and support is provided to team members to ensure they can use the design system effectively. This includes designers as well as developers and other stakeholders who work with the system.

Icon Wartung

6. Maintenance and scaling

A design system is not a static artifact, but must be continuously maintained and updated to keep pace with ever-changing requirements and trends. It must be ensured that the design system is scalable and can keep pace with the growing and changing needs of the organization. This includes adding new components and guidelines to the system as well as adapting to new platforms and products.

A well thought-out design system can increase efficiency, improve consistency and speed up the development of new products. It is an important part of a successful design strategy.

5 good examples of design systems

The following examples of well thought-out design systems show how efficiency and innovation are given equal consideration.

  • 1. Material Design from Google

    Google's Material Design system has already undergone its third major update and was one of the first publicly accessible design systems. The focus here is clearly on product development and you can rely on the latest UX findings and technical innovations being integrated into the system in a timely manner.

  • 2. Carbon from IBM

    Carbon is an open source design system from IBM that is customized for enterprise system applications. The focus is on modularity and data visualization in IBM's wide range of enterprise-level digital products.

  • 3. Atlassian

    Atlassian develops various collaboration platforms, such as Jira and Trello, with a strong focus on agility, flexibility and efficiency. Atlassian's design system offers important principles for effective teamwork, with a focus on simplicity, efficiency and user-centered design.

  • 4. Lightning from Salesforce

    Salesforce offers cloud solutions, CRM, customer service, and automation and has developed Lightning, a design system that is particularly useful for the development of business apps.

  • 5. Reshaped

    The design system Reshaped was developed for scaling and product development in React and Figma. Attention was paid to a balanced relationship between flexibility and regulation. It has comprehensive and clear documentation of the core components.

Important questions and answers

Would you like to know more? Then please get in touch.

Kathrin Köhler Experience Design Director (UI)

Your message has been sent

Thank you for your message! We will get in touch with you as quickly as possible!

Back to Insights Back to Top