Using Atomic Design in modern web development

Default avatar.
April 20, 2016
Using Atomic Design in modern web development.

If there’s anything I’ve learned working for a tech company, it’s that in order to build a website—a really amazing, beautiful and high-functioning website—a multitude of different talents and elements have to come together and work in harmony. Sometimes it can feel like working on the Tower of Babel: one person is sifting through a palette of hex codes, the guys across the room are rattling off an alphabet soup of different coding acronyms, and the account manager is next to me on the phone explaining how to use a content management system to a customer, all while I’m trying to write this article in plain English.

All of those elements need a way to come together without anything getting lost in the cacophony, and there’s a relatively new concept that has really helped us work better as a team: designers, developers, testers…everyone.

It’s called Atomic Design.

What is Atomic Design?

The components of Atomic Design were derived from designer Brad Frost’s fascination with chemistry; atoms being the smallest unit, bonding into molecules, which in turn form more complex organisms, eventually creating all matter in the universe.

So, if we’re in the International Space Station, looking down at the entire project as a whole, here’s the completed homepage art for a recent project we applied Atomic Design to, Route 93 Pizza Mill:


Route 93 Pizza’s homepage consists of all of our elements as a unified, functional website. Now, if we place the site under a microscope, we can see its granular components:

Atoms: Below are the atoms for Route 93 Pizza Mill’s website. The atoms are the basic building blocks, such as tags, form labels, buttons, color palette and fonts. Although not very useful on their own, atoms are your preliminary reference point — the beginnings of your creation.


Molecules: molecules are where atoms are put to work—where the completed website design starts to feel tangible. In the molecules for Route 93, you can see the color palette, fonts and iconography come together into form fields, image overlays and buttons. They are, as Frost puts it, your tool to “do one thing and do it well.”


Organisms: by the time we arrive at organisms, we can create the entire footer for Route 93. It combines all of the aforementioned components into a workable, aesthetic website.


The Interface Inventory: now that we’ve got all of the ingredients, we need a tangible menu on which to arrange them into something digestible; a document that contains all of the above elements as a readable, usable resource—an interface inventory.

While some organizations call this a Pattern Library or Style Guide and use Interface Inventory specifically to refer to an audit they’ve done on an existing website, we use the term Interface Inventory for our own projects (as well as audits of other sites) as part of a continual evaluation process.

Because the workflow of Atomic Design somewhat mimics a chicken-or-egg-type dilemma, the interface inventory usually takes form somewhat organically after the creation of the home page and one other page of the website, but not too long after that. As these two initial pages take shape, the designer ensures the elements on both are consistent. For all pages thereafter, they then have the ability to draw from the inventory. This produces a canonical source for how visual styles should be applied throughout the project, a literal common language, in plain English, of hex codes, button styles, padding widths, etc. to which developers—and the entire team—can refer to.

By designing an Interface Inventory with the Atomic Design process, we can start with primitive modules and assemble them into completed elements. This process improves efficiency, communication among team members, and produces a more beautiful website overall.

What Atomic Design does for us

Atomic Design both helps us to discover solid “truths” about the project’s design we are working on, as well as creating a common vocabulary between its artistic and technical aspects. It encourages a more robust system overall that improves UX and provides a methodology so designers can adhere to the component-based guidelines of the developers while maintaining creativity.

Naturally, developers code from the ground up whereas the approach of an artist usually begins in a more nebulous form, which then solidifies into a functional webpage after some molding. Atomic Design encourages—and requires—designers to work from the ground up as well, to make all of the interface’s components consistent and purposeful at the lowest possible level.

The establishment of this common language, represented by the Interface Inventory, ensures designers and developers are not inventing new solutions to problems that have already been solved. For example, if a new contact form is added to a project, the styles needed to create that form already exist and can easily be employed to build the page, deeming it unnecessary for the designer to put forth additional effort. It doesn’t necessarily take work away from the designer, but instead makes it easier for developers to quickly build solutions rather than requiring the designer to mock up every page—or organism—first. The designer’s role is then shifted to something more like art direction after the pages have been built. These tangible “truths” also eliminate the need to use the designer as a referee. Questions such as, “is this design choice intentional?” or, “which color should we use on this particular element?” as well as last minute changes or additions to a page are answered by the Interface Inventory.

The common language carries on into quality assurance as well. When testing a webpage for both content and functionality, I pull the Interface Inventory up in my screen as a guide. Although foremost a designer tool and secondly a developer tool, it allows everyone on the team to participate with confidence in conversations about design and consistency as we make sure our sites are impeccable and ready to hand over to the client.


In order to ensure the proper execution of a project, especially some of the larger ones we often find ourselves tackling, communication is key; if you’re shouting an array of different ideas across the room at each other, nothing feasible will ever come of it. Atomic Design helps to act as a translator for these different departments and the “languages” that go with them to maintain consistency in design. It establishes a modular resource for the team, allowing for coherency and results in efficient turnaround, fewer mistakes and a more polished finished product.

Mira Brody

Mira Brody is a copywriter and editor at Montana web design firm JTech Communications, where she's a member of the custom web development team providing technical writing and creating brand personas for a diverse array of clients.

Popular Posts

Read Next

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…