Atomic Design is one of the methods used to optimize the design of a product. This method helps the design to be uniform, clear and especially the ability to edit and improve easily.

What is Atomic Design?

Atomic Design is an interface design method that prioritizes designing individual components and combining them together, rather than designing the whole page.

Atomic Design is divided into 5 main elements:

1. Atoms

Atoms: are the steps to build the smallest blocks (eg buttons, textarea, input, radio, label, etc …). They may also contain abstract elements such as colors and fonts.

2. Molecules

Molecules: Molecules are groups of Atoms grouped together, which are external elements such as units (for example, an input field and a button can be combined into a search box). Molecules can be simple or complex, built for reuse or for single use only.

3. Organisms

Organisms: Similar to Molecules, Organism is composed of a set of Molecules. (Example: Page headers can combine from a logo, navigation bar and search box)

4. Templates

Templates: A combination of organisms to form pages.

5. Pages

Pages: is a page made up of Templates. In this step we can see if our templates with requirements are right and sufficient. If not, you can go back to steps 1, 2, 3 and 4 to edit as needed.

Why Atomic Design?

1. Ability to mix & match components

Imagine we have 3 Homepage, Blog and Article pages and all use green blocks for the same purpose. So it is time consuming to sit and repair all 3 files separately. Atomic born to solve this problem, we will create Atom and edit it into Molecules and including Organisms. This means we can create elements that are easily reuseable

2. Easy to understand layout

With Atomic Design, stakeholders like marketing or code team can easily visualize the components of their products and can follow them smoothly. This also makes the interaction between the design team and the dev team easier than just the usual styleguide.

3. Edit or delete element more easily

Components are created, pages using instances are taken from these components on their sites. So when there is a change, we just need to modify the component so every instance will change as well. Similarly, with unwanted components removed, it can easily be removed. This saves us effort like never before. Imagine we have 100 levels and 100 elements on the button. Customers request to change the color, change the fontweight that we go into each editing screen, there is no end of the day!

To learn more about Atomic Design, you can refer to the following links Atomic Web Design and Patternlab

Above is the article to learn about Atomic Design, in the next section, I will put into practice to apply the theory into practice. And I will also spend another article for Dev Team when using Atomic in code! See you in the following article!