Technical insights - Atomic web design provides maintainable and robust design systems
Standardization via an atomic design helps to break down the complex UI of a website into distinct levels. This approach creates consistency throughout the process, and supports flexibility and responsiveness.
The web designer Brad Frost developed the Atomic Design and its methodology ( to read more click here). It breaks down the UI into 5 levels:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
In order to create a consistent atomic code structure and design layout, the elements of a website (e.g. buttons, icons, media, text…) must be predefined and scaled relationally for their function, looks and behaviors (permutations) starting with the smallest fragments.
Website elements such as buttons, card tags or media images are all examples of atomic elements. Molecules can be built by predefined atoms, or can themselves contain other molecules. Components are built from molecules and atoms. These then create the building blocks which bring page templates to life.
A standardized atomic web design reduces high variation of inconsistencies in the UI code, which reduces the probability for bugs. At the same, time it decreasing troubleshooting effort to decipher and fix the cause of technical issues.
At Littleshovels, we follow this atomic approach from design to UI and implement this atomic structure into the Content Management System (CMS). This enables the framework for a standardized authoring experience, which eases authoring effort and maintains a consistent design and codebase - from frontend to backend.