Atomic Design — fundamental principles

Atomic design is a great idea that you can implement in your project from the very beginning. It has a direct impact not only on the visual layer but also on technical solutions that make the work of the design team easier.

The creator of the Atomic Design methodology, which was created in 2013, is Brad Frost. The goal is to provide guidelines for building or designing interfaces and systems in an organized, hierarchical way.

General assumptions of Atomic Design

To understand the subject, we must refer to the world of nature, specifically chemistry, in which we will find an explanation and answer to the question of what the individual elements described in Atomic Design are. The atom is the basic building block of matter. The universe is made up of atomic elements (we know them from the periodic table or Mendeleev’s table), which are the building blocks of everything around us and have specific properties that allow them to combine to create larger molecules. Molecules also combine to create complex organisms, which in turn create all the matter in the universe. Brad Frost has related the elements of the chemical world to interfaces and has noticed that interfaces can also be broken down into a very similar set of finished elements. This means that we can break down entire interfaces into basic building blocks that help create design systems and start working on them to create larger components or pattern libraries. In reference to the world of matter, Atomic Design has distinguished such elements as atoms, molecules, organisms, templates, and pages.

For whom is Atomic Design?

Atomic Design is particularly useful for complex websites that have a lot of information. Thanks to the atomic design, it is possible to reuse a huge number of elements, and a change at the atom level has an effect on all pages of the site and in all elements where the selected atom has been used.

Is Atomic Design necessary

With Atomic Design, it is possible to create whole components that should be functional, and useful, but also visually pleasing. The atomic design allows for easier navigation between the parts and the whole of our UI. Importantly, atomic design is not linear design, so we cannot design buttons in isolation from other elements. Atomic Design helps create UI as a cohesive whole, not isolating individual elements.

What do we gain from implementing the Atomic Design approach?

We get the ability to create design systems based on a clear methodology. Clients and the entire design team can better understand the concept of design systems because, with Atomic Design, they can see the individual steps. With it, we can create systems that are consistent and scalable, while also showing the final context of the work. By assembling individual elements into larger molecules, organisms, or pages, we create a system from the beginning, rather than choosing samples of individual elements after creating a specific component.

Below, I present to you some of the most important reasons why it is worth deciding on this method of design.

1. The ability to mix and match components
2. Easy creation of style sets
3. Simple, intuitive layout
4. Code consistency
5. End of pixel-perfect design
6. Rapid prototyping
7. Free updating of components and reorganization of the website
8. Modular file structure