What is Atomic Design

Brad Frost uses this definition:

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

From all the different approaches that are there in the world of UX design, atomic design is all about using a scientific approach to the interface, applying a framework that comes chemistry. Interesting, right?

Let's talk about chemistry a bit. Remember those chemistry classes and how we learned that everything is made of molecules working together?! Every single thing on this planet is made of atoms, each having its own role and importance. 
These atoms working together represent molecules so then molecules can form organisms. 
Atomic Design uses that point of view and applies it to digital products. If we take for example a sign up form. In this kind of approach, components are considered to be atoms and the form is the molecule. The whole page is a living organism.
By using this approach we can create scalable systems, reusable components and design systems.

Let’s talk about the five levels in atomic design:

Other known as the building blocks of universe, in UI design terms they represent the smallest entity in elements and can’t be broken down any further. Just like atoms and crucial impact on the molecule and organism as a whole, components should be considered the same - each of them has its own importance and can be seen as a function of the page. Every single component has its value and impact on the page.

By having such a thorough look at each component, team members have the opportunity to make a list that includes all the atom components of the product, working as an inventory. Then they can go back as many time as needed to look at it for references.

Chemistry speaking, molecules are formed by atoms bonded together and demonstrate new properties. They’re the smallest piece of a complex. Design speaking - well, it’s the same, only now you think of simple UI elements that function together as a whole. Let’s take for example form labels, search inputs or buttons. They aren’t really that useful on their own, but if we bring them together they can do some pretty cool stuff. When having to deal with a group of components, teams have problems like empty or negative space along with the need to grow these elements together so they can make sense to the user and be useful to them. They should be designed in conformity with other design concepts.

Let’s talk about few concepts that are about creating molecules:

Visual Hierarchy: is about arranging elements in a visual way that shows their respective importance. This way the user can understand information easily. Thing with more importance look bigger and brighter, and the others are placed in the background.

White space: is the blank space between design elements. It can help establishing a pretty good visual hierarchy. However, white space isn’t necessarily white, it can be any other color or background image.

Hick’s law: this is concept that states the more choices users have to choose from, the more time it’ll take for them to do it. This points that more stimuli isn’t always good and it encourages designers to prioritize things.

The Gestalt law of proximity: states that components that are placed close to each other look like form a group. Even if their shapes, sizes and other properties are very different, they will appear as a group.

All these concepts are related to Atomic Design since they are really helpful to designers when it comes to creating component molecules in a way that users can understand and have a good experience with.

Our molecules that we just created, joined together create an organism. These organisms, or most of them, function independently, without relying on other elements. For example: sidebars, forms, navigations and popups. When we get to this part of design, we can finally see our interface taking its form and shape.

This part can be pretty confusing, mostly because we ditch the chemistry analogy which is a smart thing to do. When we put things together and present our designs to users or clients, we want to use design terms so we can have a more understanding and productive talk.
Templates are made of group of organisms that form pages. It’s the stage when we can see our design come together and in actions. Templates don’t have real content but they articulate the design’s underlying content structure. This approach can be very practical for products that expand constantly since templates help designers create new pages quickly and keep consistency throughout these pages.

Pages are instances of templates that demonstrate the final look with actual content and it is the highest level of fidelity. At this phase the established designs get built on templates and slowly the templates form the actual pages. As the fidelity grows, other factors come into play. For example all the placeholder content must give real content, then the design team must start user testing to see if their molecules and organisms are working as expected to.

Using atomic design helps you create a style guide. It also helps make development more efficient and effective.
Everyone on the team is on the same page and also helps site owners to maintain consistency as their website grows. Atomic design makes life easier for everyone, and websites better. It is a brand new approach to UX design but it gives us a whole new way to look at components and their groups.