We’ve written about atomic design quite a bit over the years. Lately, we’ve been talking more about design systems, and figured we’d take the opportunity to share information on the difference between atomic designs and design systems.

Atomic design describes a method of breaking a site’s visual design down into its smallest parts, which are then standardized and built back up into increasingly larger, reusable objects. Atomic design is sometimes also called component-based design, where the various reusable objects are called components. 

In an atomic design, the design is broken down into the following categories (or kinds of components):
 

1. Atoms 
2. Molecules 
3. Organisms 
4. Templates 
5. Pages 

Atoms represent individual design principles or basic HTML elements. This individual component might be a button, header text, or other items that “can’t be broken down any further without ceasing to be functional.” (Source: Brad Frost)

Molecules are the ways that atoms are combined. A molecule might be a form paired with a button, or another reusable component that may appear multiple times across the site.

When multiple molecules are combined, they form an organism, which is a more complex part of the UI interface. An example of an organism might be a content grid, a menu, or a footer.

A template is just what it sounds like: a grouping of organisms that is reused on pages across the site. Templates allow a modular approach to content structuring, which has several benefits. First, it can cut down page creation time for content authors, and a template that has been constructed by an experienced web design agency will also flow naturally as windows and screens are resized, giving you peace of mind around your responsive design. 

Lastly comes a page, which is a combination of templates that are populated with real content. On the page, all of the different levels of design come together into a finished product.

All of the site's different components are drawn from the same codebase or repository, called a pattern library. The pattern library is usually hosted in another system, such as Pattern Lab, which hooks into your CMS through a module, plugin, or API. A well-constructed pattern library will integrate with your content and publishing workflows, and will act as a living style guide for your digital platform. Atoms, molecules, organisms, and templates are each built in the pattern library, and then rigorously tested for responsiveness, functionality, and accessibility by a cross-disciplinary team. The end result is a series of components that can be reused to construct pages and content, and are all maintained and updated in a single place.

Note: As a philosophy, atomic design translates the ideals of modular design into the world of web and digital development. (This is why the design philosophy is also sometimes referred to as “modular design.”) Modular design is a longstanding method of design for the real-world that breaks objects down into reusable and combinable parts. This simplifies the manufacturing process and keeps costs low while still allowing for customization. From Wikipedia, just a few examples of products and industries that rely on modular design include computers, solar panels, wind turbines, elevators, furniture, looms, pipe organs, electric power distribution systems and modular buildings, among many others. 

So, if atomic design is the web design version of a modular design, what happens when that web design needs to be referenced by something in the real world, such as a kiosk? This is where a design system comes in.

Design systems are different from atomic designs in several key ways. The simplest way of defining a design system is “a framework for making design decisions.” A design system guides visual designs beyond just the website by providing digital templates that align with your platform’s design. A design system will help you standardize on colors, fonts, and layouts: it’s like a branding guide, but with components (including atoms, molecules, organisms, and templates) that your team can use on systems beyond your digital platform.

The best designs and design systems are constructed by teams that understand the technology that will be running their designs. After all, a web app behaves in different ways than a powerpoint, and a digital kiosk offers much different functionality from a mobile contact form. It’s important to make sure that your design system will work well across all the different screens, devices, and technologies that will draw on it, which is why it's important to have digital design experts on your team or work with an experienced digital design and development agency.

To learn more about our design system expertise, or for help with crafting a new presence that spans multiple digital touchpoints and channels, contact us. Our creative and digital development team is here to help you.