The term ‘Atomic Designs’ has, of course, been inspired by Chemistry, and it introduces a new methodology for creating modular design systems, scalable and reusable components, and systems.
Usually, a designer designs web pages, but Atomic Design is the foundation of designing systems of components.
As we enter the Atomic Design modules, here are the five stages that we need to understand first-
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Moving down the list, the designs get more complex and advanced. So, when we come to pages, we have a fully designed web page.
Atomic Design Methodology
Atomic design methodology is not exactly a linear step-by-step process, but a phenomenal understanding of UI elements in terms of small units (atoms) and their collection. It was introduced by Brad Frost.
We have all read in chemistry that matter is composed of atoms. An atom is the smallest unit inside an element, and when 2 or more elements come together, they form a molecule.
So, how do you relate these chemical terms in Atomic Designs?
Let’s jump into the details -
- Atoms
An atom, as we understand from Chemistry, is the smallest unit of matter.
Here, atoms are the smallest and simplest meaningful elements of the user interface design, i.e. icons, labels, classes, buttons, inputs, etc. and when combined, they define functioning units, iconography and typography.
When you closely look at a page, you can easily break it down into several atoms. They are the most basic components of a design and can’t be split any further.
Left on their own, the atoms do not define a specific functionality and only when grouped together are able to depict the bigger picture.
- Molecules
When two or more atoms bond together, they form a molecule. A molecule is therefore the most fundamental unit of the UI design that adds functionality to the page.
Molecules are simple, reusable, functional, and portable components that define the context of atoms in user interfaces.
In simple words, molecules are atoms stitched together to define a singular functionality. For instance, the search navigation is a molecule that consists of these atoms — search icon, input field, a label, and search button.
- Organisms
An organism is further a combination of two or more molecules joined together and a relatively complex UI component. Organisms add to the solid base of the design and provide more distinct functionalities to the interface.
The organisms collectively demonstrate the role of smaller units like atoms and molecules in the broader aspect of the design. They are standalone components that can function independently without relying upon any other components and can be called several times once built.
The end result of a molecule might not interest you, but organisms are the first sign that your design is beginning to take a spectacular shape and delivers a profound visual effect.
- Templates
A template is a group of organisms combined. It is the concrete form of a layout of a page that sets standards for the page template which will remain the same even when you make changes in the content inserted there in terms of placement, size, font, etc.
Basically, it’s the stage just before your final page comes into action. Templates are what can be considered as the backend layout of the page before putting the content.
- Pages
All components checked, and the representative content put in place — this is what the final page looks like!
A page is the final stage of the design. It is what the user sees and experiences in the end. Here you see everything at once. All data, images and components are placed together to form a design that meets your goals and defines the purpose of your website.
Benefits of Atomic Designs
The Atomic Design methodology is a smarter way for creating intuitive web designs, interfaces and systems when compared with the conventional designing process. Though it needs more thinking and creativity, the smooth process afterward and the end results you get are worth it.
Let’s get a quick look at the benefits of using atomic designs while building your website -
- Easy to re-use
While breaking down complex design components into basic units, it becomes very easy to reuse them. You have the whole lists of atoms, molecules and organisms, and you can just put them whenever and wherever required.
It becomes super easy to determine where to use them in the site, and you can just mix and match them in different ways to create diverse components. It comes in handy when you need to navigate between components and UIs.
- Faster prototyping and updating
With atomic designs, you need to incorporate all your atoms and molecules inside the style guide before start designing your website. Once it’s done, you can easily mock up the pages, as all you have to do is to pick and drop these elements from your list and use them wherever required.
All the efforts are needed during defining the atoms and molecules and afterward, it becomes a piece of cake.
If you have some updating to do, you do not have to go through the entire site for small changes, instead, you need to find only those atoms which need updating. This helps you quickly update atoms throughout all pages, as once you update certain components in your list, the changes are carried out across all similar instances.
- Code consistency and reusability
These automatically designed pages are far easier to code than those created with conventional design methods. Once you define the atom and molecule elements, you can reuse the same code for every element across all pages. This way, you can easily see and identify what this particular code means, and where and why to use it.
This leaves so much space for consistency and the code, thus, delivered is easier to read and systematic.
- Diverse options for customization
You have a long list of atoms, molecules and organisms inside your style guide, which leaves you with many options already. And if you want other elements, you can just customize the existing elements to get the results you desire.
There is no need to waste your time creating new atoms for the same instance, so, you can just tweak through the already available elements and create newer atoms out of those.
Think about all the possible elements you can create this way!!
Summing up-
The Atomic Designs are more of a mental understanding of design elements on a cohesive level. It enables you to infuse your abstract ideas on-screen in real-time.
It lays out a clear architecture that helps team members and clients to actually see every step of the designing process. Especially when it comes to building complex design systems, the Atomic Design principles can ease the workflow to a great extent.
Want to know more about atomic designs? Check the link here.
Thank you folks for reading this blog! Hope you liked it and if you did, let us hear the sound of your claps 😉.