What is a Design System?
A design system describes a collection (called a ‘library’) of reusable components, guidelines and standards. This library defines the look and feel of a product or brand and how it interacts with the world. It enables designers to harmonise draft designs for digital products and services based on clear rules, standards and general principles. It is a key part of UX design and development in general and helps companies adhere to consistent style and interaction guidelines. Employees use different applications, data and sources defined as part of the 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 appointmentAre you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you.
