Atomic Design: The 5 Amazing Stages

What is Atomic Design?

The concept of Atomic Design was introduced by Brad Frost. The best thing about Atomic Design is that it allows the designers to create modular designs. This design also guides the designers to build an interface design system more deliberately and with clear order and categories.

Why it is called “Atomic Design”?

The name “Atomic Design” is originated from Chemistry and the study of the compositions of the matter. The idea about the universe is that the universe is made up of different smaller particles. these particles are called Periodic Elements, in the field of Chemistry. the idea is that these elements are basic building blocks of everything around us.

In the field of Chemistry, all these elements can be identified on the basis of their peculiar properties. Oxygen and Hydrogen have their own independent properties. After the combination of different atoms, come the molecules. These molecules have different properties based on the properties of the atoms which made these molecules after the combination. An example of a common molecule is a water molecule which is made up of two Hydrogen and one Oxygen molecule.

The very concept of the combination of different elements to create different molecules, motivate us to build the different design on the basis of the same concept. This concept provides us a guideline to construct the design systems and pattern libraries.

The elements of Atomic Design

There are five basic stages in this design system. Each stage is dependent on the previous, which acts as an aggregate of items from the previous stages.

1) Atoms

The has been considerable talk about atoms that these are the very basic building blocks of the entire system. We have elements in Chemistry like Oxygen, Hydrogen, and Nitrogen but when this concept comes to the Design field then we have buttons, inputs, labels, and some other amazing things, according to the choice of the designer, which can elevate the stunning beauty of the whole design. All these different elements combine to give us a wonderful picture of the design. The best example which is very fitted in this sense is the “Iconography”.

2) Molecules

In this stage, there is a combination of different independent atomic design elements each having its amazing and individual features including properties, style, and format. All these elements produce a whole effect. Let’s take the example of the Avatar atom. In this, we have to combine the different name and title labels with the avatar atom. After the combination of these elements then comes a result in the form of a wonderful profile molecule.

There is no doubt that, like Chemistry, we can combine the same elements in different ways for producing some elegant design. Designers must bear in mind that at this stage the grouping is still a relatively simple collection.

3) Organisms

In this stage, the basic collections at the previous stages become more complex. Take an example of the “profile” molecule. In the previous stages, it was a simple molecule with the avatar and a pair of label elements. When this comes at this stage then there is an addition of the other things including an app header for a profile page, complete with navigation, a background cover photo, and some other molecules. After this, there is our header system is the final shape. We have to bear in mind that the organism is not yet completed rather it is a component that can be reused across designs or layout templates.

4) Templates

It is the most important stage in the Atomic design methodology. It is a stage where we start to curate our organisms and other elements into a coherent design system. We have seen in the Organism stage that elements began forming into a template of blocks that can be used across a variety of pages. We have to bear in mind that even at this stage they are still the elements and there is not any real data. We can say that it is much like a wireframe.

Now our template will include a statistics organism showcasing some details about the profile and this could include some taken actions, skill levels, etc. At the bottom, there will be a contact organism. After using this process, we can have a template for pages. Designers must bear in mind that this template is reusable across our application.

5) Pages

This is the final stage of the Atomic Design and at this stage, there are different instances of templates. There is not possible to create the pages for every instance rather it is very interesting and easy to have a few variations.

The change in the date can cause a change in profile information and languages can also impact the template design. This page allows us to make several adaptations to the templates. In some instances, it is not possible to use all organisms in a template. The choice is of the designer and according to the needs. You can adjust the parts of the templates.

All the designers must bear in mind that it is the stage where all the stakeholders or clients do their review of the design because it is such a stage where every piece of information is gathered.

Applying Atomic Design

It is very easy to start the Atomic Design. The very idea is to start from the small elements to templates and pages. You should start by mapping out the foundational elements, or atoms, which will be helpful in your design. There is an available free UI kit which is a great place to start because there are already some atomic elements available that can be customized. From this, you start by building atoms into molecules and then adapting different arrangements. The choice of organization of elements, molecules, and organisms is up to you and according to the needs of the project.