UX CALENDAR – DECEMBER 12 – Principles of Atomic Design

Nowadays, we have a multitude of devices that exist. Smartphone, tablet, computer, television… The list is long (really long). It is therefore necessary to create interfaces that adapt to all these devices. Designers must therefore face up to these challenges.

On our beautiful blue planet, there are some truly amazing people, and Brad Frost is one of them. He doesn't tell you anything? He is largely the one who invented this concept, and we will see through this article, the different principles of Atomic Design.

The beginning

For several years now, we have been creating different things (moodboard, style guide), which allow us to facilitate the understanding of our designs, as far as designers are concerned. The same goes for developers, who have tools like Bootstrap, or Tailwind that make their work easier in the development of digital products. However, the problem arises when the designers and developers have to work together (the designers passing the models to the developer for example). Make the union between the design part and the technical part.

So what to do? 🤔

Ladies and gentlemen, this is where Atomic Design comes into play!

Illustration – Atomic Design

You remember, earlier, we talked about Brad Frost. Indeed, the latter invented this concept of molecules (in design), a bit like what we can see in Chemistry. So, there is no definition set in stone for Atomic Design, but if we can give a definition, it would be the following:

Atomic design refers to the fact of creating a system of parts that can be assembled with each other to create models that we can reuse endlessly, for our project. Thanks to this method, we will succeed in creating what we call a design system, which will therefore bring together all the elements used in our interfaces.

It's not clear ? Alright, let's take an example with Lego. They are made up of different parts. They all have different sizes, and different colors. But when you put them together, they can form elements that we all know (well, I think), like houses, ships, cars, or even robots. 

Another example, Russian dolls, which are series of decreasing dolls, one inside the other.

The ingenuity of our dear Brad is to gather the elements into 5 main categories, and they are classified according to their type and their complexity.

The 5 main categories

The 5 main categories of Atomic Design

atoms

This is the simplest element. Atoms are the foundation of this whole system. Typography, colors or even icons… It's an element that cannot be divided (and yes 1 divided by 1, that's still 1, and fortunately for that matter).

Illustration – Atoms

Molecules

It's starting to get interesting. Indeed, the molecules represent the group of atoms, which will allow us to obtain a first functional entity. Buttons, text fields, or even links are considered as molecules.Illustration – Molecules

The organisms

You may be beginning to understand why we mentioned chemistry earlier. Organisms will therefore be represented by a group of molecules. At this point, we can already see the interface taking shape. An article card or a search bar. So be careful, there may be specificities with the organizations (obviously, it's not very funny if there are no exceptions). In some cases, an organization may be composed of other organizations.

In some cases will you tell me?

GIF – Kermit: What?

I understand if you react like Kermit, don't panic, I'll explain it to you. For example, if we take a flow of articles, the latter can include both articles and advertisements, which will therefore themselves group together several molecules. I know your brain is racing, but don't worry, this is an exception.

Illustration – Organizations

The templates

And if we combine the organisms… It gives us templates. Indeed, they are the matrix of the page, because they will include a set of organisms. The template will specify where the different organisms are placed, but their state will depend on the context of the user, that is to say, where he is on the interfaces. The template can therefore vary depending on the context.

The pages

Here we are. The last category are the pages, and it represents a template according to the context of use. Our dear Brad, talks about “template instance”. We can say that she is unique. The Twitter homepage, on your smartphone, on the mobile app, on the mobile app after receiving a notification. You see, it changes, depending on the context.

The application of the principle

I admit it, I talked about designers and developers. But it must be said that today, in digital projects, we have a large number of stakeholders: UX Designer, UI Designer, Product Owner, Product Manager, Project Manager, Developer... The idea is that Atomic Design is beneficial for all project stakeholders, because they are the ones who will use our Design System.

Therefore, by using the Atomic Design method, we will standardize our interfaces, and have components that are consistent with each other, and at the same time, have a well-built Design System. 

Keep these 3 steps, illustrated in the diagram below, it should help you. 

Illustration – The 3 steps

1 – Take inventory: Getting acquainted with the project is an important thing. Indeed, we will be able to observe all the components, and sort them by type. Texts, icons, buttons, Inputs…
By doing this, we will see the 5 main categories appear (Atoms, Molecules, Organisms, Templates and Pages).

2 – Standardize: 6 size levels for running text? Standardize! Buttons with different margins? Standardize! You understand, your atoms must all be uniform, in order to have coherent molecules, and so on.

3 – Document/Communicate: Do not hesitate to expand your library of comments, explaining the different types of use. The more you document your library, the better project stakeholders will understand. Also, notify of changes (e.g. components that change), and notify stakeholders of the steps you take in the Design System.

My last words: atomic design and the design system are linked 

Complementarity. Indeed, we have seen it through the article. The atomic design and the design system are linked. By creating elements and molecular models (and reproducible, I know, that's a lot of “ands”), we speed up our design process. Not only do we speed up the process, but we make it efficient and consistent.

As you will have understood, in my opinion (and it is up to me of course), we must design our interfaces using components, thinking of “living” and “scalable”, and the method of Atomic Design helps us do this effectively.

So, are you convinced by Atomic Design? Brad Frost has released a very interesting book on this principle: Atomic Design – Brad Frost. I invite you to read it if you want to know more about it.

From the ends of the universe, I salute you!

GIF – Goodbye

 

 

Housmane KOITA, UI-UX Designer @UX-Republic

 

Our next trainings