What is a Design System?

Design Systems: Essential Components

A design system consists of several components integrated smoothly to run like clockwork. This systematic design approach includes guidelines, principles, philosophies, code and templates or example content. Together, these components form the ‘single source of truth’ that includes all elements that teams require to design, realise and develop digital products together.

  • Atoms (building blocks) – This is comprehensive documentation including examples of use for user interfaces and standardised typographies (templates). It describes things like colours, fonts, iconography, layout and interaction patterns.

  • Modules/pattern library – The atoms are combined into modules, components and templates, a library of pre-defined UI components that are usually available as code snippets or designs.

  • Principles (rules) – The stipulation of design and interaction/animation rules and rules for technical implementation. These serve as guidelines for decisions and help ensure a consistent and user-friendly user experience. Principles may cover the application of typography rules, colour schemes or interaction patterns.

  • Documentation (style guide) – This explains how the design system is to be used so it will be applied in a uniform way across the whole company. As well as the design and development process, this also covers the location, tools and use of the component library.

Good to know: Every design system can be enhanced with individual components, depending on the requirements. It is also possible to individually adapt the contents of the components.

“Design systems often contain design information as a style guide; colours, typography, and styles used throughout the UI elements. The collection of standards, principles and consistent UI elements makes the design system valuable as a single source of truth for the entire organization.”

Robert Gourley

In the video below, Vy Alechnavicius answers general questions about a design system.

Why Use a Design System?

As mentioned before, design systems include visual elements such as colours, fonts and icon sets, as well as interaction patterns and user flow diagrams. At its core, a design system accelerates the process from a draft to the final product and the evolution of the respective design; reusable elements are always on hand and do not have to be designed from scratch for every project. Even though this may sound strange, the design fades into the background a little, and the design process comes into focus. Designers can concentrate more on the functionalities (logic) of a planned human-machine-interaction and spend less time on the appearance defined by the design system.

It is important to not treat the design system like a hard and fast set of rules, but as a living library including software-based development tools (Adobe Creative Suite, Figma, etc.). The design system evolves continually to live up to the needs of users and customers – all based on a human-centred design approach. A design system also evolves continually to keep up with technological developments and constant progress.

Advantages at a Glance

  • Frees up design and development capacities

  • Standardised language in teams involved

  • Accelerates workflows, faster implementation of projects

  • Creates visual consistency for products and user interfaces

  • Quick and easy familiarisation with respective systems

  • Scalable thanks to modularity

  • Central design templates, usually with search function

Contact for your Digital Solution with Unic

Book an appointment

Are you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.

Jörg Nölke
Gerrit Taaks
Gerrit Taaks

Contact for your Digital Solution

Book an appointment

Are you keen to talk about your next project? We will be happy exchange ideas with you.

Melanie Kluhe
Melanie Klühe
Stefanie Berger
Stefanie Berger
Philippe Surber
Philippe Surber
Stephan Handschin
Stephan Handschin