Atomic design allows designers to think critically about each component of the design on its own and as part of a larger whole. Knowing the 5 stages of Atomic Design ensures that your designs are consistent and manageable. Keep reading to learn more!
Atomic Design: What is that?
I am pretty sure that more than one time when you are working on a project or product, you had discussions about Design Systems, Frameworks, or Components with fellow designers and developers. Therefore, I would like to recommend a great methodology for working with the development of these topics.
Atomic Design is a methodology created by Brad Frost. It helps us to build Design Systems with order and a clear hierarchy.
As you should know, Digital Products UI’s are created with components; if we analyze these components individually we can identify their basic elements. In brief, Atomic Design methodology shows us how to build up an entire Design System with these fundamental elements.
Stages in Atomic Design
Atomic Design methodology has five distinct levels:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Atoms
First, we have atoms, the smallest elements in our system. As an example, we have buttons, inputs, labels, avatars, spacing, titles, paragraphs, and other design elements on the style guide of a project. So, these elements are combined to create molecules, the next stage of the Atomic Design methodology.
Molecules
Also, there are molecules. In this stage, we can use a couple of atoms to create elements that are a little more complex with their own style and features. If we combine an avatar with a title or a paragraph with a button, we end up building a profile molecule with its own features.
Organisms
Then, we have organisms, which are built from our molecules. Is important to say that they are not complete design elements yet, but they help us create reusable components that we can apply across our Design System. If we combine navigation items with a logo and a search bar we will have built a header organism that can be used on every section of a website.
Templates
To illustrate this, we can see templates as “the structure” of our UI design or even as the blueprint for our final design. So, organisms like header, image carousel, and footer can be combined to build these templates. Also, they are reusable and can be used on any section of the website.
Pages
In the end, we have pages. Pages are the final stage of the Atomic Design methodology as they shape our final design. With applied real data your components could have variations that could impact their direct structure and the page’s structure. This is a great moment for adjustments on your components to make sure they are implemented in the correct way in spite of the variations they could have because of the real data used on our final project..
Benefits of applying Atomic Design
In sum, Atomic Design:
· Facilitates the Style Guides creation process.
· Speeds up prototyping thanks to developed components.
· Makes it easier to create new components from atoms and molecules with the same style and in a consistent way.
· Provides reusable components which contribute to a faster Design System implementation.
The MagmaLabs UX team has used this methodology on projects to build Style Guides and Design Systems and the results have always been scalable and consistent. If you have not used this methodology on a project yet, give it a go and decide if it is a good fit for you and your team.
Thanks for reading!
