Habilelabs-Logo
Blog

Things Every Designer Should Know about Atomic Design

November 18th, 2021 . 6 minutes read
Blog featured image

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 comprised 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

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 together. 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 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 this link.

Thank you folks for reading this blog! Hope you liked it and if you did, let us hear the sound of your claps.

If you want any help in building and designing your website or application, we are here to assist you. Feel free to reach out to us here.

Read More-

Author: payal
Share: