Subscribe to our Newsletter

Get articles, advice and tips about:

You can read more about our privacy policy and how we use your personal data here.

Design Systems

All About Design Systems

by Frida Nyvall

The term “Design System” has become increasingly accepted as an official description of an organization’s overall graphical identity and technical implementation.

This article is for those who want to know more about Design Systems, why they have become popular, when they should be used and how they work.

What is a Design System?

Design Systems have become more and more important with the rise of web applications and web-based software services. Larger web apps and digital products are often constructed by putting together smaller components to form a complete experience.

To keep the design, branding and user experience consistent throughout the product, setting up specific rules to describe how components should be built and look have proven very effective. These unified rules constitute the design system.

“Design System” is a comprehensive description, encompassing concepts such as Brand Guidelines, UI Components and Pattern Library.

In practice, Design Systems are often set up as digital documentation – for example, a website where the organization regularly publishes updates on graphics, components, and functionality.

Several leading tech companies like Google, Microsoft and IBM have made their design systems publicly available, however, design systems are not just relevant to IT companies. The website adele.uxpin.com lists public design systems. On the list are companies from widely different industries – for example, Royal Canin and Financial Times.

How do Design Systems work?

Design Systems help companies and organizations gain control of all parts of a digital product. The Design System helps keep the design, communication, and branding coherent across all platforms.

At the same time, the Design System serves as a resource for the future. The documentation makes it easier for everyone involved to find, understand and adding to the product. By being able to reuse concepts and components, a lot of time can be saved.

Why use a Design System?

Why do companies and organizations like Barclays, Financial Times and IBM invest in Design Systems? The biggest reason for investing in a Design System is to profit from the time and resource savings made available by the investment in the long run.

The scope in terms of work and effort setting up a Design System varies with the needs of the organization. If the organization is large, and need to control a multitude of sub-departments or units, be prepared to take the task seriously to make the most of the Design System.

I wish I knew right at the beginning of the project the amount of effort we had to put into such a creation: I never, ever would have created something so big with so few resources.

Matteo Gratton,
VP Experience Designer, Barclays Corporate Bank.
Read the article

When to use a Design System?

Design Systems are used to achieve uniformity in an organization’s production and communication. Having clear guidelines written down in the form of a living digital documentation is something that most products and organizations can benefit from.

Design Systems are particularly effective for organizations with multiple branches, who want to grow in a scalable manner or is using a block structure. The most classical example is perhaps a digital product consisting of individual modules that are combined to form the end product and is built using a framework tool like React, Angular or Vue.

Note that as the list of public Design Systems shows, Design Systems are very relevant and useful for organizations outside of the IT sector as well.

However, smaller organizations that have a more fickle identity and orientation (meaning it is often changing drastically), may have less to gain for investing in a full-scale Design System.

Want to Know More?

For those who want to dig deeper into the subject of Design Systems, we recommend the (free) book ”Design Systems Handbook” published by inVision.

Need help setting up a Design System or thinking about how a Design System could support your business? Please contact us at info@redonion.se.

Tags

More posts

img

Improving the Editing Experience with CSS Blend Modes

img

How to Choose the Right E-Commerce Solution

img

Shopify vs. Squarespace vs. Wix