Published 7 Aug, 2020 5 minutes of reading
“How can you design for everyone without understanding the full picture?”
As designers, our day-to-day work is challenging at some stages more than others, and even more so when we have a new project or first join a team. This is always where our initial questions start to pop up: where are the graphic inputs, the guidance? Why do I see so many inconsistencies? If you work in this industry, then you've experienced this.
With my current team at Modyo, known as the "lab", we wanted to solve this problem. We set out to create a design system (more on this later) that would make work easier for all of us. We wanted a design system that would allow us to have consistent, scalable products and would also benefit the company.
I wrote this article to share our work methodologies with other designers; I want to explain how we went from a design system to atomic design, and to show the process, its benefits and give recommendations.
From the beginning
Since the digital world took off, work productivity has accelerated, processes have become more efficient, as has the search to reduce the number of errors. The result is a greater focus on consistency.
Consistency and development of digital products are based on components. The purpose of these components are to reuse them over and over again.
Today, there are several "component sets" more commonly known as frameworks, such as Foundation or Bootstrap. Each of them share many similar, reusable components, such as forms, buttons, cards, dropdowns, etc. This saves time and reduces developer frustration.
For interface designers, style guides and component libraries in general address branding, fonts, colors, grids, components, etc. It should be noted that the main idea of a style guide is to generate consistency throughout the brand or product.
If we join the concepts together and work from a framework plus a style guide, we start to approach what a design system is.
“A design system is a systematic approach that outputs the building blocks for designing in a scalable and sustainable way”
- Shane Williams
So then, what is it?
It is a set of interconnected, reusable components with rules that make up a digital product. That is, the combined repetitive elements create an interface and the rules allow us to know how to use and share those elements.
The main idea is also to be able to generate a bridge between design and development, thus enabling coherent visual experiences across all devices and platforms.
The positive thing about having a design system is that it allows products to scale, be consistent, be efficient and enable collaborative work.
Great, isn't it?
Atomic Design & Design Systems
“Atomic Design is a methodology devised by Brad Frost that explains how to apply a mental model to create a Design System efficiently.”
An analogy commonly used to explain this concept is to build with Legos, or too, from the world of chemistry.
Each elementary part of a Lego is analogous to an atom: it is the basic and minimum unit of a composition. Let's say you're trying to build The Iron Throne in Game of Thrones (I love the show) out of Legos, and it requires different blocks that can be combined in order to build it and, you know what? The same Lego blocks can be used to build the Great Hall or the entire Red Fortress. This Lego building analogy allows us to understand how a design system works based on atomic design.
How do you build one?
Atoms
These are the smallest building blocks of a project. Individual legos. Text styles, buttons, icons, input fields, check boxes, etc. These elements cannot be divided into smaller parts without losing their use (for example, why would you need a button without a label or an icon?)
Molecules
These are more complex forms consisting of several atoms.
Sometimes the molecules are already functional elements that could be placed anywhere on the page and work by themselves. Usually, however, they must be part of an organism to have any real value.
Organisms
Truly functional parts of a page, made up of groups of atoms and molecules. Many organisms function on their own, without relying on other elements on the page. They are usually large components, such as navigation, sidebars, forms, pop-ups with lots of data, etc.
Templates
These are pages with no real content. They combine organisms in a proper website design.
Pages
These are instances of templates. Placeholder content in the template is replaced with real content for users to read. Pages that are derived from the same template may vary depending on the amount of content you may have.
Design Results
Given everything mentioned, not only from the theoretical point of view, but also in the practical one, we have been evolving our creation process in our design system and similar artifacts, bringing us the following results:
-
Consistent and easily digestible designs
-
Team organization
-
Applied principles of atomic design
-
Efficient workflows (in the design and implementation process)
-
Formation of a universal language among team members, customers and users
Recommendations
Share
Building a design system requires a lot of time and effort. Involving others helps us to constantly improve workflow, feedback and decision making.
Giving the design system a presence and a name
When a design system has reached sufficient maturity to be used, it needs a name or presentation such as a cover. By having a name, people will be able to remember it more easily and start sharing it. Many times even the colors, typography and shapes provide this differentiating factor for each design system.
Establish a process
A design system will grow too large for one person to maintain. That's why as a design team you must work together under one language.
This will establish a process, divide roles and allow other collaborators such as developers and PMs to contribute easily and smoothly.
Be patient and try again and again
At first it was difficult for us as designers to systematize a process, but after holding on, being patient and trying again and again we are on the right track.
As designers, we started to get results by creating hi-fi prototypes with more speed, as well as learning more about Figma.
What we still need is to learn and collaborate more with our development teams in order to have every piece of code correlate with the system in the future.
“When we systematize operations, we liberate our creativity.”
Thank you for reading.
