Why do you need a design system and how your clients will thank you for it(I)
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.
At first everything was dark…
Before the arrival of design systems, approaching a digital product or project was like being stuck on a hamster wheel in which, sooner or later, some of these problems used to appear:
- The design becomes inconsistent and no one remembers why things are as they are.
- Developers are uncertain 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 all (so in “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 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 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 leave the chemical terminology to climb steps in the degree of complexity:
- Templates: they 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 check-out 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…
Some definitions
Although there is no clear consensus, I have selected some of the many definitions that I found interesting to better understand the concept of 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 us to build applications in a scalable way.
Let’s move on to the following 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 is aesthetically perfect, if there is no coding that builds it, which brings it to reality.
And so, what is a design system?
We could say that a design system is a set of rules and norms that an organization’s team establishes internally and that allows them to work in an aligned way through a common language (which Danny Saltaren always speaks of). Everyone involved has to understand each other: from design to programming, through business (in the case of a product) or with the client (in the case of a project).
It is also a series of patterns that describe problems and solve them efficiently through a series of reusable elements both in design and code.
It is a way to build digital products in a more efficient and scalable way.
So, is a design system the same as a style guide?
On many occasions we can confuse design systems with style guides or component libraries, but there are some keys to differentiate them:
- 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.
- A design system is flexible, scalable, and meets new needs, while a style guide, once delivered, is likely to be out of date.
- A design system includes the entire ecosystem of a digital product (from graphic style to tone) as well as the principles and values of the company, while a style guide focuses primarily on branding.
Therefore, a design system is something alive, that evolves, that must be cared for and accompanied because it represents the central axis of a digital product seen as a unitary whole made of pieces that drink from the same source, in fact, to the design systems are also known as “One source of truth”.
Advantages:
Now that we know more about what a design system is, we can ask ourselves what benefits it brings us, well, here they go:
- 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 product version, designers and developers can reuse components, so times get shorter.
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 the common language, I 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.
Once we already know much better what a design system is and what advantages it brings us, it is time to get down to work to build it. But I will talk about this in the second part of this article.
