What are Atomic Design Principles, and Why Do We Use Them?

What are Atomic Design Principles, and Why Do We Use Them?
michael-signal@2x By Michael Signal January 27th 2020

What do chemistry and design have in common? A lot more than you’d think. 

Atomic design principles can help you create some incredible, structurally sound websites and apps.

So, let’s take our cues from chemistry and get a break down on why and how this works.

The Principles of Composition & Atomic Design

If you paid any attention in science class, or are somewhat of a pun connoisseur, you already know the basics – atoms make up everything. They combine to create larger molecules which then form a larger organism.

Atoms

These are recognized as the smallest building blocks of any kind of matter. Despite being made up of protons, electrons, and neutrons, as a general rule you cannot break them down any further without risking the loss of functionality.

Molecules

It takes two or more atoms to create a molecule. Depending on the combination of atoms involved, molecules serve different functions and can have varying properties. 

Organism

A combination of molecules allows an organism to function as a whole. The number of molecules and their intricacies then determine the complexity of a given organism.

And now that you’re familiar with the basics, let’s apply them to the glorious world of web design.

Applying the Atomic Design Principles

You can draw several parallels between the natural world and the world of design. At their cores, both can be observed as large entities that are built from smaller components. And so the key here is to remember that every large interface can be broken down into smaller blocks. 

Atomic design principles allow for this to happen at 5 stages. 

1. Atoms

As the core building blocks of a website or interface, the atoms here refer to the most basic of HTML or application elements. These include labels, buttons, tags, and other useful features.

2. Molecules

By themselves, atoms do not serve a solid purpose. Of what use is an input button without contextual atoms to pair it with? And so we pair and combine these atoms to create simple, but useful molecules in the form of search options.

3. Organisms

And now that you’ve created a few functional molecules, we must now combine them to serve a larger purpose together. These form key sections within the website.

As a client, you probably have a decent idea of what you’d like the organism to look like, but it takes a designer to understand the finer points (ie. the molecules, atoms) within the organism. 

4. Templates

So now that you have a few functional organisms, you need them to work together as a template. They are a group of organisms that provide a concrete structure to your website.

5. Pages

Pages are the most tangible of the lot. They serve a distinct purpose and allow users to put the true effectiveness of a website to the test.

The Perks of Using these Principles for Your Website

Designing your website or an app can often seem like an overwhelming task. How do you know where to start? Here’s where atomic design principles are a great tool to help achieve some structural direction without jeopardizing the details, or the big picture. 

Want to apply these principles to your own app or website? Get in touch with us for a FREE consultation and we’ll take it from there!

michael-signal@2x By Michael Signal

Michael is the creative brains of the company and he leads the UX and UI team at EB Pearls. He has experience of over 20 years in interaction design and have designed digital products for Fortune 50 companies all over the world.

Read more Articles by this Author