Everything you need to know about Design Systems
By: Audrey Hacq
Tags: Atomic Design, Design Systems, Methodology, UX, Component Libraries

What’s inside?

The fundamental purpose of a Design System is to facilitate the work of the teams. So the first question we need to ask ourselves is not “What should I put inside my Design System?” but “Who is going to use it and how?”.

Once our target is defined and we have a first idea of what is already in place in the company (What is working or not? Which is the level of maturity of the teams about this subject? What are the existing tools?…), it will be easier to know where to start.

#1. Purpose and shared values

Where are we going? Why? And How?

Before starting anything, it’s essential to align teams around a clear set of shared goals. It will help to build a vision and making sure everyone looks in the same direction. These goals will evolve with time and it’s normal. We just have to make sure that changes are broadly communicated.

As for the values, they are like great ideals that will guide our choices, according to the brand objectives. We need to make sure that what we’re designing does not differ from these key values.

Beside these brand and product values, we could also define some team values that will bring each collaborator around a shared state of mind.

#2. Design Principles

Design Principles: A collection of Design Principles and methods

First thing to keep in mind: Design principles are so much more than just the visual aspect of a product…

Design principles are the guiding sentences that helps the teams to reach the purpose of the product thanks to the design.

They will help the teams to make meaningful Design decisions.

I will take the example of Medium. One of their Design principles is “Direction over choice”. Thanks to that principle, instead of designing a regular text editor with unlimited choices of colours and fonts, they opted for a simpler one. That allows the author to focus on the content of his article rather than on its visual aspect.

Design Principles must guide design choices

#3. Brand identity & language

Shopify brand identity

The identity should be defined in line with the strategy and the objectives of the brand. Alla Kholmatova speaks about the “perceptual patterns” that she lists as follow:

Colours

Fonts

Spaces

Shapes

Icons

Illustrations

Photographies

Animations

Voice and tone

Sounds

All of this forms the alphabet of the Brand.

It’s a good starting point but that’s surely not enough to speak a language! We have to go further to use this alphabet to compose some words and then associate these words to obtain sentences that make sense. These brand elements will need some rules which will be, in a way, the grammar and the conjugation of the System.

In our Design System, it’s materialized by guidelines, do’s and don’ts and “good examples” of use.

Examples of Identity Guidelines ©Backelite

This will ensure the design teams use the “right combinations” of this language, those who make the brand so unique and recognizable.

#4. Components & patterns

Components & Patterns are at the heart of the System. All the previously mentioned elements will help us to create them and deliver a consistent experience.

The components are our LEGO blocs. They’re used in Sketch by designers, and directly in the code by developers. Their functional behaviour must be specified.

As for the patterns, they are the building instructions that will allow us to use these components in a logical and consistent way, across all the products.

In the image below, we can clearly see that a component will be specified with technical and functional documentation, whereas a pattern will give recommendations about how to use it:

Pattern vs component ©Nathan Curtis

If you wonder which component you should develop first for your system, you can run a component prioritization workshop.

Best practices

Besides the documentation, that is often directly linked to the System, best practices will accompany teams in a larger and more transversal way.

The idea is to dig into the general best practices and extract only those who make sense, based on the product and the level of maturity of the teams.

Best practices will help the teams to form and develop their technicals skills.