Photography from Studio Republic®

UX & UI Explained: Atomic Design

Atomic Design it’s not exactly something new, especially in the world of Front End Development Community.

Now you are wondering…What is Atomic Design?

Atomic Design is a Component Design Methodology created by Brad Frost, an American Design who has been involved in awesome projects like This is Responsive and Styleguide.io.

How does it work?

It’s basically a methodology composed by 5 hierarchical stages, to create UI Design Systems.

• Atoms (Small element such as Labels, Buttons or Input’s);
• Molecules (Group of Atoms like a Search Bar, composed by an Input, a Label and a Button);
• Organisms (Group os Molecules that form a distinct and relatively complex part of the interface. For example: Search Bar + Navigation = Navbar/Header);
• Templates (Responsible for the structure of a Page where we distribute the Components giving shape to the Layout and defining templates to be reused);
• Pages (Specific instances of the templates that shows what the UI looks like with real representative content).

Image from https://en.ippon.tech/

In conclusion, methodologies like Atomic Design can improve and help us a lot in our daily workflow and clearance in order to identify and solve problems.

Check out Atomic Design System to learn more about the subject: https://atomicdesignsystem.com/

Thanks for reading!