Why Do You Need a Design System and How Your Customers Will Thank You For It

Surely by now you must have heard about design systems, which have been so in vogue for some time now, but if you want to know more about what they are, what advantages they bring, how they are built, and how they can help in the design and development of digital projects and products, we will explain it to you.

In the beginning, everything was dark…

Before the arrival of design systems, approaching the development of a product or a digital project was like being locked in a hamster wheel in which, sooner or later, some of these problems would always arise:

• The design becomes inconsistent and no one remembers why things are the way they are.
• Developers are uncertain about how some components work, so development is delayed.
• There is no clear documentation of what components are needed and how they behave, nor what rules govern them all (so in a “Lord of the Rings” way ?).

The day-to-day vortex swallowed us up and the products “seemed” consistent, although examples always appeared to show us the opposite.

…And then there was light

That same feeling of complexity and digital groundhog day must have lived in his skin Brad Frost when back in 2013 he launched Atomic Design, the ultimate solution against blobs ?. In his masterpiece, our friend Brad develops a methodology that simplifies the processes of design, development and subsequent maintenance of digital products.

He approaches a modular system of components by equating it with the most elementary concepts of chemistry:

• Thus, atoms are the minimal basic structure with different properties. Translated to the digital world, they are the basic elements: a color, a typography, an icon, an image, a link, etc. They are functional by themselves.
• By grouping the atoms together we form molecules that in our case would be more complex elements such as buttons, inputs, selects, etc. They begin to be more tangible and operational than atoms.
• At the next level of complexity are the organisms that would be the components of relatively complex UI, composed of groups of molecules and/or atoms and/or other organisms. These organisms form different parts of the structure of an interface such as the header of a web page, a form, a card, etc.

From here, we abandon the chemical terminology to go up in complexity:

• Templates: these are combinations of several organisms that solve a specific need by providing structure to the content. For example, the detail page of a product or the cart page of an online store.
• Pages: these are instances of the templates with specific content for each one of them.

Although this way of understanding the design of digital products was a substantial improvement, a design system is more than joining atomized components. We need to apply a set of rules that give it meaning as a “system”. Of course, here things get more complicated…

Design System Definition

Although there is no clear consensus, I have selected some of the many definitions that I found interesting to better understand the concept of a design system:

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”

Marco Suarez
Design System Lead at Invision

Closely related to the previous one we also find this definition:

“A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.”

Courtney Clark
Forum One Vice President

Both bring us closer to the idea that a design system is a set of reusable components that allow you to build applications in a scalable way.

Let’s move on to the next definition:

“A design system is a collection of rules, constraints, and principles, implemented in design and code.”

Sylvee L
Product Designer

From this definition, we are interested in highlighting those rules, constraints, and principles that must be present in both design and code. It is useless for the system to be aesthetically perfect if there is no coding that builds it, which brings it to reality.

What is a Design System?

A design system is a set of rules and standards that an organization’s team establishes internally and that allows them to work in an aligned way through a common language. Everyone involved in the product has to understand each other: from design to programming, through business (in the case of a product) or with the customer (of a project).

It is also a series of patterns that describe problems and solve them efficiently through a series of reusable elements in both design and code.

It is a way to build digital products in a more efficient and scalable way.

Design System vs. Style Guide

On many occasions, we can confuse design systems with style guides or component libraries, but there are some keys to differentiate them:

1. A design system is a living system, it evolves with the needs of the users, the market, the design… A style guide is a static document, usually delivered in pdf or at most, in the most modern versions, in HTML.
2. A design system is flexible, scalable, and covers new needs, while a style guide, once delivered, will probably be outdated.
3. A design system encompasses the entire ecosystem of a digital product (from graphic style to tone) as well as the company’s principles and values, whereas a style guide focuses primarily on branding.

Therefore, a design system is something alive, evolving, that must be taken care of and accompanied because it represents the central axis of a digital product seen as a unitary whole made by pieces that drink from the same source, in fact, design systems are also known as “One source of truth”.

Benefits Design System

Now that we know more about what a design system is, we can ask ourselves what benefits having one brings us. Here they are:

Consistency

Design systems ensure that the user experience with the brand is always the same. All components and elements have the same aesthetics and behave with the same patterns so that the user knows how an element works just by seeing it.

Efficiency

Design systems save time and money. Instead of creating components from scratch for each project or version of a product, designers and developers can reuse components, so times are shortened.

We can also say that with design systems we move from talking about a linear workflow to a more agile and collaborative one, where all members involved in product development, both on the design and development sides, work together in building the product.

To illustrate what we saw above about common language, let me give you an example: a new designer starts working in our company and has to deal with a design system. In a few minutes, he will know where to find a component or how to name and place a new one thanks to the fact that in a design system everything is standardized and documented.

Scalability

Design systems enable automation in the design process, which means that companies have the ability to grow products quickly with fewer resources. Less time is spent generating design and more time thinking about process improvements.

Now that we have a much better understanding of what a design system is and what benefits it brings, it’s time to get down to the business of building it. But I will talk about this in the second part of this article.

Don’t miss the second part of the Design System Manual!