Was ist Atomic Design?
Wie baust du eine Website, die auf 50 Seiten gleich aussieht und trotzdem schnell wächst? Nicht Seite für Seite, sondern aus Bausteinen. Genau das ist der Gedanke hinter Atomic Design.
Der US-Webdesigner Brad Frost hat die Methode am 10. Juni 2013 in einem Blogbeitrag vorgestellt und 2016 in einem Buch ausgebaut, das online frei lesbar ist. Sein Leitsatz, von Stephen Hay übernommen: Wir gestalten keine Seiten, wir gestalten Systeme aus Komponenten.
Das Bild dafür kommt aus der Chemie. Aus wenigen Atomen entstehen Moleküle, aus Molekülen größere Organismen. Übertragen auf eine Website: Aus Knopf, Feld und Beschriftung entsteht ein Suchformular, aus Suchformular, Logo und Menü ein Seitenkopf.
Die fünf Stufen
Stufe
Beispiel
Atome
Button, Eingabefeld, Beschriftung
Moleküle
Suchfeld aus Beschriftung, Feld und Button
Organismen
Seitenkopf mit Logo, Menü und Suche
Templates
Seitengerüst mit Platzhaltern
Pages
fertige Seite mit echten Inhalten
Atome sind laut Frost die Grundbausteine jeder Oberfläche. Für sich allein sind sie wenig nützlich. Moleküle sind einfache Gruppen, die zusammen eine Aufgabe erfüllen. Organismen sind größere, eigenständige Abschnitte.
Ab hier wechselt Frost bewusst die Sprache. Templates setzen die Bausteine in ein Layout und zeigen die Struktur des Inhalts. Pages sind konkrete Seiten mit echten Texten und Bildern. Erst dort zeigt sich, ob das System trägt — etwa wenn eine Überschrift doppelt so lang ist wie geplant.
So setzt du es ein
Der beste Einstieg ist eine Bestandsaufnahme, die Frost „Interface Inventory“ nennt. Du machst von jeder Art Baustein deiner Website einen Screenshot und sortierst sie: alle Buttons, alle Formulare, alle Überschriften. Für eine erste Runde setzt Frost 30 bis 90 Minuten an und nennt 16 Kategorien zum Sortieren.
Das Ergebnis ist meist ernüchternd: fünf Sorten Buttons, drei Grautöne, Formulare mit unterschiedlichen Abständen. Genau daraus entsteht deine Liste der Atome und Moleküle — und damit die Grundlage für eine Komponentenbibliothek.
Lohnt sich das? Zahlen speziell zu Atomic Design gibt es nicht. Zum Nutzen von Design-Systemen allgemein hat Figma 2019 gemessen, dass Designer damit eine Aufgabe 34 % schneller lösten, laut Figma die Obergrenze. Die Schattenseite zeigt eine Umfrage der Agentur Sparkbox von 2021: 44 % der befragten Inhouse-Teams kämpften damit, dass ihr System im Alltag überhaupt genutzt wird.
Häufige Fehler
Fehler 1 · Die Begriffe für Pflicht halten
Frost selbst nennt Atomic Design kein starres Dogma. Wenn dein Team mit „Basis, Bausteine, Abschnitte“ besser klarkommt, nimm das. General Electric hat sich laut Frost eigene Stufen-Namen gegeben.
Fehler 2 · Endlos über Schubladen streiten
Ist die Kontaktkarte ein Molekül oder ein Organismus? Diese Debatte frisst Zeit und bringt nichts. Frost räumt selbst ein, dass Benennen schwer und unvollkommen ist. Wichtig ist, dass jeder den Baustein findet.
Fehler 3 · Methode mit Werkzeug verwechseln
Atomic Design ist ein Denkmodell, kein Programm. Das Original-Werkzeug Pattern Lab von Frost und Kollegen wurde im Mai 2026 archiviert und bekommt keine Updates mehr. Die Methode lebt in Figma, Storybook oder deinem Website-Baukasten weiter.
Fehler 4 · Aufbauen, aber nicht pflegen
Die schönste Ordnung zerfällt, wenn niemand sie pflegt und jeder doch wieder eigene Varianten baut. Frost widmet der Pflege ein eigenes Kapitel. Leg fest, wer neue Bausteine aufnimmt.
Atomic Design und verwandte Begriffe
- Design-System: das ganze Regelwerk. Atomic Design ist eine Methode, es zu ordnen.
- Komponentenbibliothek: die fertigen Bausteine. Atomic Design kann ihre Ordnung vorgeben.
- Design Token: Farben, Abstände, Schriftgrößen als benannte Werte. Frost zählte Farben und Schriften 2013 noch zu den Atomen, heute liegen sie meist als Tokens darunter.
- Styleguide: beschreibt Regeln fürs Aussehen. Atomic Design beschreibt den Aufbau.
Häufige Fragen
Lohnt sich Atomic Design für eine kleine Website?
Als Denkweise ja, als großes Projekt meist nicht. Schon eine Stunde Bestandsaufnahme zeigt dir, welche Bausteine doppelt und dreifach vorkommen. Die volle Ordnung in fünf Stufen lohnt sich eher bei größeren Websites oder Teams.
Muss ich Atom, Molekül und Organismus sagen?
Nein. Brad Frost erlaubt ausdrücklich eigene Namen. Entscheidend ist die Idee: kleine Teile, die sich zu größeren zusammensetzen.
Ist Atomic Design veraltet?
Nein. Das Original-Werkzeug Pattern Lab ist zwar archiviert, die Methode steckt aber in fast jedem modernen Design-System. Frost sagte 2023 in einem Vortrag, sie sei stärker denn je.
Was ist der Unterschied zum Design-System?
Das Design-System ist das ganze Paket aus Regeln, Bausteinen und Pflege. Atomic Design ist eine Methode, die Bausteine darin zu ordnen.
