Der amerikanische Webdesigner/Developer Brad Frost hat dieses Konzept eingeführt. Dabei hat er sich einer Analogie zur Chemie bedient und sein Konzept in mehrere individuelle Bereiche unterteilt. Ähnlich den Atomen sollen sich durch Atomic Design einzelne Elemente zu immer größeren Elementen zusammensetzen lassen, bis am Ende ein ganzes System (in unserem Fall eine Webseite) entsteht.

Folgende Atomic-Design-Bereiche gibt es:

• Atome: Atome sind die kleinsten Basiselemente des Systems. Ein Atom stellt im Falle eines Web-Interfaces einen HTML-Tag dar. Beispielsweise ein Inputfeld, Button oder Label. Gleichzeitig kann ein Atom aber auch etwas Abstraktes wie eine Schrift, eine Farbe oder eine Animation sein. Alleine für sich hat so ein Atom meistens keinen großen Nutzen. Allerdings kann eine Auflistung der Atome eine grobe Übersicht über das Design geben.
• Moleküle: Moleküle sind gruppierte Atome und stellen die kleinste Einheit einer Verbindung dar. Diese können auch eigene Eigenschaften wie z.B. die Anordnung der einzelnen Atome annehmen. Ein Button, ein Label und ein Inputfeld sind für sich alleine gesehen nicht sehr nützlich. Zusammengesetzt können sie jedoch z.B. ein Suchformular ergeben.
• Organismen: Organismen sind gruppierte Moleküle, die ein Modul oder eine Sektion eines Interfaces ergeben. Organismen können aus mehreren gleichen oder verschiedenen Molekülen bestehen. Beispielsweise kann ein Header-Organismus aus verschiedenen Molekülen wie der Navigation, einem Suchformular und einem Logo bestehen. Die gleichen Moleküle könnten aber auch in einem anderen Organismus wie z.B. dem Footer oder einer Sidebar vorkommen und mit weiteren Molekülen ergänzt werden.
• Templates: Templates setzen sich aus Gruppen von Organismen zusammen. Sie zeigen schon ein konkretes Bild von dem, was am Ende entsteht – z.B. eine Startseite. Hier wird jetzt auch das Konzept der Chemie-Analogie aufgegeben, da in dieser Stufe des Prozesses ein allgemein verständliches Konzept aufgegriffen wird. Templates sind bereits sehr konkret und liefern den Kontext für die verschiedenen Moleküle und Organismen. Es werden also alle Module zusammengesetzt und mit Platzhalter Inhalt befüllt. Ab dieser Stufe haben Layout und Design bereits Form angenommen und liefern einem Kunden wichtige Informationen über Aussehen und Gesamtwirkung des Webdesigns.
• Seiten: Seiten sind spezifische Beispiele von Templates. Hier wird der Platzhalter-Inhalt durch kontextbezogenen Inhalt ersetzt, um so ein Bild zu erzeugen, das letztendlich auch der Benutzer zu sehen bekommt. In dieser Phase wird die Effektivität des Designsystems getestet und gegebenenfalls angepasst. Hier sollten auch die Moleküle, Organismen und Templates nochmals auf den realen Kontext hin angepasst werden.

Je nach Kunde und Projekt arbeiten wir mit Atomic Design, um schnelle und effiziente Ergebnisse zu erzielen. Modulbasiertes Design erzeugt ein einheitliches Bild auf jeder Seite und ermöglicht es die Kommunikation zu verbessern. So bekommt jeder Teil einer Webseite einen konkreten Namen und Sie und wir wissen immer über welchen Teil der Seite wir gerade sprechen.