The challenge
Atomic Design is a methodology by Brad Frost that details how to create and maintain a robust design system based on a hierarchy of elements. It describes how the smallest elements of the design system, like form labels, inputs, and buttons, are combined into larger molecules and organisms, all the way up to full pages.
Building a component library based on Atomic design provides content creators much flexibility to combine atoms, molecules, and organisms into complete novel layouts of their own making. And all that without being constantly dependent on developers or designers.
There are, however, several significant drawbacks to adoption. Among them the complexity of assembling each larger component from its tiny building blocks and a lack of guardrails for content editors to ensure a consistent look & feel.
Consider how you'd compose a classic hero banner for your landing page. In Atomic Design jargon, that's an organism:
It will likely have a full-width row element, which in turn contains two column elements:
The left column contains three rows. The first two hold simple atoms: a label for the title and a text area for the body below. The third and lowest row has one or more buttons or links.
The right column will contain an image or perhaps a video.
Thinking through the above example takes most people a couple of minutes to process. To translate the look you want into an actual structure, you have to be highly proficient in what tools are available to you - and all the ways they can be configured and put together.
On the other hand, going with a more rigid system could mean you have a simplified hero component with several predefined variants. This approach trades design flexibility with ease of use and ensures true-to-brand page designs. Over time, this system's rigidity may become the major complaint of content editors.
If you want to learn more about how to implemenet an Atomic Design-inspired system in practice, coupled with a Headless CMS to store your content, with a focus on actual usability and discoverability by the content team, get in touch with us and we'll jump on a call to guide you through it.
