Atomic Design: The advantages of an atomic web design strategy

Where are all my designers at?! This blog post is for you guys who may or may not know about the topic for today. Ever heard of atomic web design? This form of web design is relatively new to me, but I’ve done some digging and uncovered why atomic design is the secret methodology to cohesive, consistent design. Sounds like a secret I should be sharing with you all so let's get right into it.

alt

An introduction to Atomic Design

Fasten your seat belt because we’re blasting back into the past. Atomic Design gained inspiration from the world of natural science, believe it or not, so be prepared to have your high school memories triggered by this methodology. I apologize in advance.

Atomic design is like atomic theory

All organisms and complex structures are made up of molecules that are made up of atoms. Atoms are the basic building blocks of all matter which means that two or more atoms convulse to form molecules. Molecules, which are held together by chemical bonds, are much more tangible and are then assembled to make up organisms. At this point, all particles that have merged are now functioning as one single unit which can then be broken down into a finite set of atomic elements. Remember the periodic table? 

Periodic Table of the HTML Elements http://joshduck.com/periodic-table.html  | Periodic table, Periodic table of the elements, Web development design

Atomic design is built off the idea of simple molecules converging together to form a bigger component, or organism that can also be broken down similar to the elements in the periodic table. Instead, the interface of a website can be broken down into similar elements. The periodic table of HTML elements wonderfully displays how all applications are composed of the same HTML elements that designers use frequently. This is almost identical to organisms being broken down into elements that are showcased on the periodic table and were jammed into our heads years ago. Just how atomic elements have their structure, the atoms that make up the HTML table form a process known as atomic web design.

 

Breaking down the Atomic Design hierarchy

Atomic design is a methodology made up of five stages that work together to create the interface design process. Each stage is made of a group of components from the previous stage, allowing designers to think of web pages as a hierarchy of reusable contents.

 

1. Atoms

Webstacks subscribe button

Virtual atoms are what make up the systems created by designers. Anything that cannot be broken down further within the user interface is labeled as an atom. This includes but isn’t limited to input fields, text paragraphs, buttons, checkboxes, and any other atoms that you can think of. It’s important to remember that any atoms in the user interface that can combine to create a molecule will always be labeled as atoms.

 

2. Molecules

Webstacks subscriber molecule

As I mentioned before, molecules are made up of atoms that are bonded together. Anything in the user interface that is composed of atoms is labeled a molecule. The perfect example would be a blog subscription box that is made up of a field label atom, an input field atom, and the button atom.

 

3. Organisms

Webstacks blog subscriptionWe’ve reached the end of the atomic theory that I explained earlier. Organisms are groups of molecules that are joined together to form more complex beings. In interface terms, the organism is any design sequence that appears on website pages. Prime examples are headers and footers that consist of two or more molecules such as the infamous search bar.

 

4. Templates

Atomic web design template

Say goodbye to the Chemistry analogy! Templates consist of components that are strategically placed to articulate the content structure of the design. The header and footer organisms are placed into what would be the homepage template, joining other molecules and organisms that must function together effectively. Templates are effective because they ensure that the components of the design system that is being crafted look and function together as a whole. Think of atomic design templates as maps for the designer.

 

5. Pages

Atomic web design page

Once designers reach the last stage, they’re able to begin adding the contents of the page to see the final product. If the previous four steps were done correctly, then the final step gives designers the freedom to drop in images, text, and all that good stuff to give them an idea of what the UI will look like. It’s what users and stakeholders will see, and where all the previous components come together to form a beautiful user interface.

 

Why working from basic components is advantageous in Atomic Design

When you build something from scratch and evolve it into something granular, flexible, and effective, the feeling of success is unmatched. Feelings aside, working from the ground up means that you understand every component that was used and know what it takes to create a larger outcome.

 

Atomic web design allows designers to better understand their approach to interface design and apply bits of their approach to consistently build pages that function well. Below we list a few benefits of using the atomic web design methodology.

 

Mix and match components:

Like I just stated, working from basic atoms gives designers insight on where they can apply the same atoms to begin the building process on other pages across a website. What I mean by mix and match is giving designers a dose of creative juice to build pages using different components from other templates that can craft a better UI experience.

 

Reusability is key:

Being able to reuse basic components is a huge advantage in atomic web design. Recycling atoms saves designers time while upholding consistent habits across all website pages. The concept of reusability is heavily stressed in atomic web design.

 

Build dependable UI habits:

Being quick and efficient is something designers live by daily. Luckily, the atomic design structure pushes designers to adopt efficient processes and produce quick prototypes if needed. Designers can then use the list of atoms from stage one and build mock pages that can be customized to form the final product.

 

“The less I know the better”:

The fewer components a designer knows about, the more likely they will remain consistent when the creation stage begins. Designers are more likely to use what already exists than waste time to create something that may not even function well with a template or the context of the website. Having a small pool of atoms to grab from is important to move forward with the atomic web design process.

 

There are more benefits of atomic web design that we’ll get into in the future. But for now, I think the ones I have listed are enough to get you thinking about the atomic design methodology.

 

Atomic design is clean, simple, and flexible

atomic-design-process

Atomic web design may sound intricate at first and get you thinking about your high school Chemistry teacher. Once you’re able to get past those bumps in the road, it is hard to neglect how similar this web design approach is to atomic theory. The only difference is that atomic web design is meant to be clean, simple, and flexible for user interface designers. I don’t know of any other looming web design methodologies evolving in the design industry that you guys are using. If you know of any, please let us know! In the meantime, give the atomic design framework a shot.

Come back later

We hope this isn't the last time you visit our blog. Becoming a regular won't cost you a dime!
careers-image

Posts you might also like

Why Hubspot CMS is a no-code platform perfect for marketing teams
September 16, 2020
Why Hubspot CMS is a no-code platform perfect for marketing teams
How to find the optimal balance between UX design and SEO
September 10, 2020
How to find the optimal balance between UX design and SEO
Atomic Design: The advantages of an atomic web design strategy
September 8, 2020
Atomic Design: The advantages of an atomic web design strategy
Why hosting your website on Hubspot will resolve all your CMS troubles
September 3, 2020
Why hosting your website on Hubspot will resolve all your CMS troubles
3 problems with your CX strategy that you didn't know RevOps can solve
August 31, 2020
3 problems with your CX strategy that you didn't know RevOps can solve