Everything you need to know about Atomic Design

Today, I would like to describe in more detail the methodology of atomic design, which has been accompanying designers for almost a decade. The interface design has been related to the world of nature, more specifically chemistry, and described as a methodology by Brad Frost. This concept is very interesting because it allows for the creation of repeatable elements and reusable libraries.

The world of chemistry and interface design.

The periodic table is an organized collection of chemical elements that exist in nature. Elements can combine, forming chemical compounds — one of the most well-known combinations of these elements is water. In the case of water, hydrogen (H2) combines with oxygen (O2) to form the formula H2O. Brad Frost compared elements to the building blocks that make up an interface. And this comparison is extremely accurate, although, of course, it doesn’t always have to hold, it will be particularly important when creating very large and extensive projects.

The structure of Atomic Design.

It is a design methodology that starts with the atom, which is presented as the smallest element of an interface. An example of an atom is a button. Two or more atoms together form molecules — if one of your atoms is a button, another is an input field, and the third is a header, then combining them allows you to define a form. Several connected molecules make up a larger organism. If you gather several form molecules and place a step/progress bar molecule (an informative/progress bar) at the top, you’ll get a ready-made wizard that guides the user step by step to the goal. If we have organisms, their group is managed by a template, which in turn creates the pages of a website.

Atoms.

Just as in nature, in interfaces, atoms are the basic building blocks. In the case of the natural world, these are the components that makeup matter. Atoms are for us HTML tags such as form labels, input fields, or buttons. At the same time, atoms can contain more abstract elements such as color palettes, fonts, and even more invisible aspects of the interface, such as animations. However, we must take into account that the form label, input field, or button alone are not very useful, but when combined in the form of molecules, they can create useful entities.

MOLECULES.

In chemistry, molecules are formed by combining atoms into groups and are the smallest elements of compounds. This is well illustrated by hydrogen in chemistry, as its occurrence in nature is possible in the form of a molecular structure H2, consisting of two atoms. The resulting molecules have individual properties. In interface design, molecules can serve as the backbone of our design systems. In this case, a molecule can be a form label or an input field. Importantly, although molecules are more complex elements, they are typically simple combinations of atoms that can be reused.

ORGANISMS.

Organisms are created by groups of molecules connected, building a relatively complex, distinct part of the interface. When we see a created organism, we see a specific structure, we see that the final interface is starting to take shape. Organisms can consist of similar and/or different types of molecules. For example, a masthead (advertising/banner space visible immediately upon entering the website) can consist of different elements, such as a logo, main navigation, search bar, and list of social media channels.

Creating organisms from molecules makes it possible to use portable reusable components.

TEMPLATES.

Templates mainly consist of groups of organisms connected to create pages. This is where we begin to see the reference to the final project and start to see things like layout in action. Templates are very concrete and provide context for all those slightly abstract molecules and organisms. A template can resemble a project wireframe, and at this stage, we have a very clear picture of our actions that we can present to our clients.

PAGES.

The final stage of atomic design is the creation of pages, which contain specific instances of templates. This is the moment of creation when the so-called placeholder content is replaced with actual, representative content. This approach aims to present an accurate image of what the user will eventually see. Pages are the highest level of fidelity to the design and, considering that pages are the most tangible stage, most designers spend the most time perfecting them because they are more engaging.

Atomic Design — Benefits

Now that I’ve presented all the elements of atomic design to you, it’s time to talk about the benefits it brings. As you might expect, Atomic Design requires a lot of planning and effort to create a whole system. That’s why I believe that understanding the benefits of atomic design is very important.

Firstly, with atomic design, we build a system that is based on components. By breaking down these components into their basic building blocks (atoms), it’s easier to see the potential for mixing and matching selected atoms and creating new molecules or organisms. The second advantage is easier style creation. The premise is simple: all atoms and molecules are created at the beginning, which means that they can all be included in a style guide and used throughout the project. Importantly, the style guide helps to create a consistent design at every stage. Atomic design is also notable for its simple and intuitive layout, but not only is simplicity a benefit — so is the speed of prototyping and updating components and the ability to quickly reorganize a website. With a defined list of atoms, creating page layouts is simply faster and easier. If an update is required, all atoms, molecules, or entire organisms can be changed at once. The modular file structure is another advantage. In this type of design, easily readable code is also important and is more consistent than traditional code. Predefined atoms are used to create website layouts, making it easier to check which components were used in different parts of the site.

In summary: Atomic Design is a really interesting methodology that designers can implement in their projects. This design approach may not always be the most appropriate, especially for smaller projects. However, it certainly makes it easier to implement components in CSS, HTML, and JS code, as well as manage and deploy new websites. The decision of whether to use atomic design in your project, as always, is up to you.