5 Major Elements of Atomic Design

As the internet has evolved over the past few decades, the ways we interact with it and what we expect from it has changed as well. While the internet of yesterday was visually the wild west, today’s websites and apps have high expectations to live up to. Your interface must be easy and logical to navigate, or the visitor will just move on. People no longer have the patience for confusing website experiences.

One of the most important keys to a good interactive experience is design consistency. There’s nothing more frustrating to an end-user, developer, or designer than an app or website with an inconsistent visual language. For the end-user, design inconsistencies make a website or product confusing to use, sometimes to the point that they give up completely. To a front-end developer, inconsistencies can mean having to code and recode different variations of what is fundamentally the same thing, leading to hours of wasted time. For the designer, it can also mean a massive headache, trying to reconcile the visual differences between various components into a cohesive, uniform design system.

One of the more effective solutions to this problem is the advent of Atomic Design, a design and development methodology created in 2016 by web designer Brad Frost. It’s an elegant system that’s surprisingly easy to integrate into your team’s web design workflow, as long as it’s part of the design process from early on.

The elements (wink) of an Atomic design are broken down into five categories: Atoms, Molecules, Organisms, Templates, and Pages.

1. Atoms

An Atom is the most basic building block of every design. Every tiny individual object in a design is an Atom, which will be repeated and rearranged to create a greater design. Buttons, form elements, headers, links, and text blocks are all Atoms in your design.

2. Molecules

A Molecule is a combination of Atoms that creates a larger component in your design. For example, say your website footer includes a newsletter signup form. That is a Molecule, that in the example is comprised of a headline, an email address form field, a label for that field, and a submit button.

3. Organisms

Next up we have Organisms. Organisms are combinations of Molecules that create a larger section of the site or app. The footer in this example is an organism, comprised of the email signup molecule, and let’s say a footer menu and legal information. Other Organisms in the design would include the header of the site, the sidebar, image galleries, and content areas.

4. Templates

This is what most people are familiar with. Who doesn’t love a good template? When you combine together multiple Organisms to create an entire section of the website, it is called a Template. The Template doesn’t include the site content, just the layout itself that the content will eventually go into. A contact Template, for example, might include a header Organism, a footer Organism, an intro text Organism, and a contact us form Organism.

5. Pages

Finally, in the end, we have the Page. As you’ve probably guessed at this point, the Page is the ultimate marriage of the Template and the actual content (text, images, etc) that the end-user will see.

Breaking your design into a series of smaller repeating parts like this creates consistency, simplifies the design and development processes, and makes creating a clear and flexible style guides a breeze. Every individual visual element on a site is well thought out and notated, which should make your designers, devs, and end-users happier people.

Want more content like this delivered to your inbox? Sign-up for Blue Acorn iCi’s monthly newsletter.

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi