What is a Design System?
As part of a new project for Ecole 42, we worked with the product team to create a new Design System. But what is a Design System, and why did we decide to start from scratch? How can you convince your company, which is just starting out with a product approach, to use it ? We will answer all these questions in this article.
The aim of this article is not to explain in detail how to create a Design System, but to explain how it works, how it’s composed and how to manage its evolution.
Context
Today, 42 aims to revolutionize computer science and education with a unique model. This model is based on several criteria:
- Emphasizing inclusivity and the quality of higher education
- Allowing for free tuition fees
- Promoting peer learning
- Expanding a school into a global network with more than 50 campuses
- Orchestrating a complex computer system
In this vein, several user interviews were conducted, highlighting new objectives:
- Adapting the training to the future needs of the market
- Providing cutting-edge technologies to meet the needs of the next decade
- Improving the global experience through inter-campus collaboration and a common experience
- Emphasizing pedagogy and student success
The emergence of these different needs called for a renovation of the spirit of 42, leading to a reconfiguration of user interfaces. It is in this dynamic that we wanted to present to you the importance of a Design System.
What is a Design System?
A design system is a library of visual components but also codes to follow when designing a product. It’s a kit that will evolve over time. It offers a UX (User Experience) and UI (User Interface) reference for designers and developers.
What does it consist of?
The content of the design system depends on the company’s identity, its ecosystem, and its needs. However, we can find common elements:
- Color palette and associated rules (Colors)
- Visual principle around typography (Typography)
- Iconography and imagery (Iconography)
- Grids to structure elements and spaces (Grids and Spaces)
- UI components and patterns (Component Library)
- Accessibility and user experience rules (Accessibility)
- Templates (Templates)
Before discussing these categories, it’s important to note a few points. In order to facilitate understanding among each of the teams, it’s necessary to use a common nomenclature. For example, when we use text sizes or spacing, it would be wise to use sm, md, lg, xl, etc. Similarly, for colors, we will use the color name followed by a number according to its intensity (see example below).
Colors
Colors have a crucial role in a Design System. Indeed, they will impact accessibility, the product’s identity, and its communication. The color palette can be thought of in different ways, but it is most frequently constructed as follows:
- Primary / main colors
- Secondary colors / color scale 1
- Tertiary colors / color scale 2
- Informative colors / success and errors
Typography
Each Design System is composed of a type scale, that is, a scale that allows listing the different typographies used (if there are several) and defining the categories (titles, subtitles, links, etc.), sizes, and text spacings. This also allows having a coherent, readable, and accessible product on different screen sizes.
Iconography
Iconography both supports your designs (buttons, information, successes, errors, etc.) and accentuates your brand’s identity. It’s important to maintain a similar size and weight (that is, thickness) to achieve consistent content.
Grids and Spaces
Grids are used to structure and align texts and objects forming components and layouts. The transition between each breakpoint will be much simpler with the help of a grid, making the responsive cleaner and pixel perfect. Additionally, spacings are added to maintain consistency between each element by defining precise rules.
Component Library
Generally, components are a grouping of everything we have previously mentioned in terms of UI (colors, typography, iconography, etc.). Let’s take a simple example of a button: its creation requires text, a color, spacing, an icon, and rounded edges if our identity demands it.
After creating a component, it is common to subsequently create variants. These are variations of the component that represent its different states. For example, a button can be primary or secondary depending on its importance, it can have different states (default, hover, click), a variable size, or even the possibility of having an icon or not.
Accessibility
Design Systems are the best solution to create accessible content for people with disabilities. Right from the initial stages of creating a product, it’s crucial to ensure that it is viable for everyone. This is probably the most important part of a Design System. We will discuss the rules and best practices to follow later on.
For further information on the subject:
Templates
Now that the Design System has been created, it’s time for the screens. However, this phase leads to numerous iterations, and the Figma space can become overloaded with a number of mock-ups. As a result, we need to ensure that the team can easily navigate through them.
To facilitate exchanges between teams, it is preferable to indicate the status of screens/pages (to be done, in progress, done, to be reviewed, etc.). Finally, it’s important to provide complete and precise documentation to deliver a final Design System to developers. This can take the form of a brief description of the flow, or annotations on the screens.
The purpose of templates is to meet these different needs: to order, simplify and facilitate the handover between designer and developer.
How a Design System works?
There are several key stages to follow, from the birth of the project to its completion:
- Why do we need a Design System? What will it do?
- Carry out UI audits and talk to the users concerned to understand their needs and frictions.
- Look for solutions based on technological possibilities, budget, deadlines and priorities.
- Choose a vocabulary (nomenclature) that is easy for the whole team to understand.
- Build the Design System, iterate and test.
- Bring the Design System to life to meet new user and team needs.
Accessibility in a Design System
Accessibility means ensuring that products meet the needs and expectations of people with disabilities. It means taking into account all human diversity in terms of ability, language, gender, culture, age, etc. This is why a step such as the Design System, which “introduces” the design of a product, is crucial.
Accessibility rules frequently include :
- Colors for everyone
- Text sizes readable on all types of screens (desktop, mobile, tablet, etc.)
- Keyboard compatibility
- Available audio interface and adapted media (subtitles, translations, etc.)
- Wording adapted and comprehensible to all, describing certain actions
However, there are over fifty of them, each with its own importance and impact on your product. So don’t hesitate to check out the page below, listing all the accessibility rules 🙂.
What future for a Design System?
The Design System has been conceived, finalized, organized and completed with various templates, and complies with accessibility rules. What’s next? The work has really only just begun, because a Design System never stops evolving.
We’ve realized that it facilitates exchanges between each team, but this must remain valid for the weeks, months and years to come. That’s why it’s important to keep a close eye on its evolution, not to define it as “finished”, but to continue feeding it, while clarifying it for future handovers within the team.
Last but not least, the Design System is intended to help its users (designers, developers, marketing managers, etc.). It is by improving it and taking into account the various needs that we can provide a product that best meets consumer expectations.
