Atomic Design zerlegt jede Website in fünf Ebenen, vom kleinsten Button bis zur fertig gefüllten Seite. Brad Frost übertrug 2013 das Bild aus dem Chemieunterricht auf die Oberflächengestaltung: Atome verbinden sich zu Molekülen, Moleküle zu Organismen. Die Methode macht aus Ihrer Oberfläche ein Baukastensystem statt seitenweiser Handarbeit.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Viele Websites wachsen über Jahre zu einem Flickenteppich: Jede neue Seite bringt einen eigenen Button, ein leicht anderes Formular, eine abweichende Überschrift. Spätestens beim Redesign rächt sich der fehlende Bauplan, weil niemand mehr weiß, welche Komponente an welcher Stelle im Einsatz ist. Atomic Design liefert die Ordnung, die aus verstreuten Einzelteilen ein wartbares System macht.
Das Wichtigste in Kürze
- Atomic Design gliedert Oberflächen in fünf Ebenen: Atome, Moleküle, Organismen, Templates und Seiten.
- Der Ansatz stammt vom Frontend-Entwickler Brad Frost, der ihn 2013 im Blog beschrieb und 2016 als Buch veröffentlichte.
- Der Nutzen liegt in wiederverwendbaren Bausteinen: ein Element einmal ändern, überall greift die Anpassung.
- Die fünf Ebenen sind kein starrer Ablauf, sondern ein Denkmodell, das Teil und Ganzes zugleich sichtbar macht.
Was ist Atomic Design?
Atomic Design zerlegt jede Benutzeroberfläche in fünf aufeinander aufbauende Ebenen: Atome, Moleküle, Organismen, Templates und Seiten. Der Frontend-Entwickler Brad Frost stellte den Ansatz im Juni 2013 in einem vielbeachteten Blogbeitrag vor und baute ihn 2016 zum Buch „Atomic Design“ aus. Den vollständigen Ansatz beschreibt das eBook von Brad Frost, das kapitelweise frei im Netz steht.
Den Namen borgte Frost aus der Chemie. So wie sich in der Natur Atome zu Molekülen und Moleküle zu größeren Organismen verbinden, lassen sich Oberflächen in eine überschaubare Zahl von Grundbausteinen zerlegen und daraus beliebig kombinieren. Ein Button, ein Eingabefeld, eine Beschriftung: solche Atome sind die kleinste sinnvolle Einheit, die sich nicht weiter aufteilen lässt, ohne ihre Funktion zu verlieren.
Der Ansatz beantwortet eine Frage, an der große Websites regelmäßig scheitern: Wie bleibt eine Oberfläche über hunderte Seiten hinweg konsistent? Ein Design-System aus klar benannten Bausteinen liefert die Antwort. Die Nielsen Norman Group definiert ein Design-System als vollständigen Satz von Standards, der Gestaltung über wiederverwendbare Komponenten und Muster im großen Maßstab steuert.
Frost formulierte den Ansatz aus einem konkreten Ärger heraus. Moderne Teams gestalten längst keine einzelnen Seiten mehr, sondern Systeme aus Bausteinen, die sich je nach Bildschirm und Inhalt neu zusammensetzen. Der klassische Entwurf jeder Seite als eigenes Bild in Photoshop passte nicht mehr zu dieser Realität. Atomic Design gab dem Bauplan hinter den Seiten einen Namen und eine Ordnung, an der sich Design und Entwicklung gemeinsam ausrichten.
Zu den Atomen zählen dabei nicht nur sichtbare Elemente, sondern auch die unsichtbaren Grundlagen einer Marke. Farben, Schriftgrößen und Abstände gehören ebenso zu dieser untersten Ebene wie der eigentliche Knopf. Genau diese Trennung zwischen Grundwerten und daraus gebauten Komponenten macht das Modell so anschlussfähig für Design-Systeme.
Atomic Design überträgt das Baukastenprinzip der Chemie auf Oberflächen. Fünf Ebenen von Atomen bis zu ganzen Seiten ersetzen das seitenweise Gestalten durch ein wiederverwendbares System.
Wie bauen Atome, Moleküle und Organismen aufeinander auf?
Jede Ebene fasst die Bausteine der Ebene darunter zu einer größeren Einheit zusammen: Atome bilden Moleküle, Moleküle bilden Organismen, Organismen füllen Templates, und Templates werden zu fertigen Seiten. Die Hierarchie liest sich von unten nach oben, vom kleinsten Teil zum kompletten Auftritt.
Atome sind die elementaren Bausteine der Oberfläche: ein Label, ein Eingabefeld, ein Button, dazu abstrakte Grundlagen wie Farben und Schriften. Für sich genommen bleiben diese Teile oft nutzlos, ähnlich einem einzelnen Wasserstoffatom im Reagenzglas. Moleküle entstehen, sobald sich mehrere Atome zu einer Einheit mit eigener Aufgabe verbinden. Ein Suchformular aus Label, Eingabefeld und Button ergibt zusammen eine Funktion, die kein Atom allein erfüllt.
Organismen setzen Moleküle und Atome zu einem eigenständigen Abschnitt der Oberfläche zusammen. Ein Website-Kopf aus Logo, Navigation und Suchformular bildet einen solchen Organismus, der auf vielen Seiten identisch wiederkehrt. Mit dieser dritten Stufe entsteht zum ersten Mal ein Bereich, den ein Besucher als zusammenhängendes Element wahrnimmt.
Templates heben die Sicht auf die Seitenebene. Sie ordnen Organismen zu einem Layout an und zeigen die Struktur des Inhalts, noch ohne echte Texte und Bilder. Seiten schließlich sind konkrete Templates, gefüllt mit realem Inhalt: dieselbe Startseiten-Vorlage, einmal mit den tatsächlichen Schlagzeilen und Produktfotos bestückt. Auf dieser letzten Stufe prüfen Teams, ob das System auch mit echten Inhalten funktioniert.
Solche Bausteine wandern heute in gemeinsame Bibliotheken. Kopierbare React-Komponenten zum Einbauen statt Installieren zeigen den Molekül- und Organismus-Gedanken im Alltag: fertige Elemente, die ein Team einmal gestaltet und danach überall einsetzt. Der Sprung von der Theorie zur Bibliothek ist damit kleiner geworden, als er lange wirkte.
Der Reiz der Hierarchie liegt in ihrer Wiederholung. Ein einmal definierter Organismus wie die Fußzeile erscheint auf jeder Seite in identischer Form, weil alle Seiten auf denselben Baustein zugreifen. Ändert ein Team später die Kontaktadresse in dieser Fußzeile, steht die neue Angabe augenblicklich im gesamten Auftritt.
- Atome: unteilbare Grundelemente wie Button, Label oder Farbe.
- Moleküle: kleine Gruppen von Atomen mit einer eigenen Aufgabe.
- Organismen: zusammenhängende Abschnitte wie ein kompletter Seitenkopf.
- Templates und Seiten: das Layout-Gerüst und die mit echtem Inhalt gefüllte Fassung.
Was bringt Atomic Design für Ihre Website?
Atomic Design spart Zeit und sichert Konsistenz: Weil jeder Baustein nur einmal existiert und überall wiederverwendet wird, greift eine Änderung am Button sofort auf allen Seiten. Aus vielen Einzelbaustellen wird eine zentrale Quelle.
Der größte Gewinn liegt in dieser einen Quelle der Wahrheit. Ändert ein Team die Grundfarbe oder den Abstand eines Buttons an zentraler Stelle, zieht die Anpassung durch jede Seite, die den Baustein verwendet. Doppelte Pflege an dutzenden Stellen entfällt, und die typischen Abweichungen zwischen Unterseiten verschwinden.
Auch die Zusammenarbeit profitiert. Design und Entwicklung sprechen über dieselben benannten Bausteine statt über vage Seitenbeschreibungen. Ein neues Teammitglied versteht die Oberfläche schneller, weil das Vokabular aus Atomen, Molekülen und Organismen jede Komponente eindeutig verortet.
Auch das Tempo steigt spürbar. Eine neue Kampagnenseite entsteht nicht mehr aus dem Nichts, sondern durch das Zusammensetzen bereits gestalteter Organismen. Was früher Tage an Abstimmung kostete, schrumpft auf wenige Stunden, weil die Bausteine samt Verhalten und Varianten schon feststehen.
Wie weit dieses Baukastendenken inzwischen reicht, zeigt der Blick auf die Maschinen. Eine aktuelle Untersuchung dokumentiert, wie sich zwanzig etablierte Design-Systeme für KI-Agenten öffnen, damit Software dieselben Komponenten nutzt wie menschliche Nutzer. Die Grundordnung dahinter bleibt die von Frost beschriebene Hierarchie.
| Kriterium | Seite für Seite | Atomic Design |
|---|---|---|
| Änderung an einem Button | auf jeder Seite einzeln | einmal zentral, wirkt überall |
| Konsistenz | hängt an der Disziplin | im System verankert |
| Neue Seite bauen | von Grund auf | aus vorhandenen Bausteinen |
| Einarbeitung | Suche im Seitenwust | klares Bauteil-Vokabular |
Wie tragfähig das Prinzip ist, zeigen die großen Referenzsysteme der Branche. Google pflegt mit Material Design eine offene Komponentenbibliothek, IBM setzt auf sein System Carbon, und auch Atlassian sowie die US-Regierung betreiben eigene Baukästen nach demselben Muster. Alle bündeln geprüfte Bausteine an einem Ort, statt jede Anwendung neu zu gestalten.
Der Nutzen wächst mit der Größe des Projekts. Eine Landingpage mit drei Abschnitten braucht kein Atommodell. Sobald jedoch mehrere Menschen an einer umfangreichen Oberfläche arbeiten, zahlt sich die anfängliche Ordnungsarbeit aus.
Ein Baustein, eine Quelle: Der zentrale Nutzen von Atomic Design liegt in wiederverwendbaren Komponenten und einheitlichem Vokabular. Der Aufwand rechnet sich mit der Größe des Projekts, nicht auf der Einzelseite.
Jeder Button hat genau eine Quelle, und eine einzige Änderung dort schlägt auf die ganze Website durch.
— Michael Dobler, Herausgeber Dr. Web
Wie führen Sie Atomic Design praktisch ein?
Beginnen Sie mit einem Inventar aller bestehenden Bausteine, benennen Sie diese nach den fünf Ebenen und pflegen Sie sie an einer zentralen Stelle, etwa in einem Design-Tool oder einer Musterbibliothek. Der Einstieg braucht keinen einzigen Zeilencode.
Sammeln Sie zuerst in einem Interface-Inventar alle Knöpfe, Formulare und Textbausteine, die auf Ihrer Website bereits vorkommen. Meist tauchen dabei drei Varianten desselben Buttons auf, die niemand bewusst angelegt hat. Dieser Kassensturz zeigt oft schon, wie viel Redundanz sich über die Jahre angesammelt hat.
Für den Aufbau des Systems entwickelte Brad Frost gemeinsam mit Dave Olsen das quelloffene Werkzeug Pattern Lab. Das Programm verschachtelt die Bausteine nach dem Prinzip russischer Matrjoschka-Puppen: Ändert ein Team ein Atom, aktualisiert sich jedes Molekül und jeder Organismus, der darauf zugreift. Visuell orientierte Teams bilden dieselbe Hierarchie stattdessen in einem Design-Tool ab.
Als Werkzeug eignet sich jedes Programm, das Komponenten und Varianten kennt. Neben dem Marktführer Figma steht mit Penpot eine quelloffene Alternative bereit, die Teams selbst hosten und damit die Kontrolle über ihre Bausteine behalten. Zentral bleibt weniger das Programm als die konsequente Benennung.
Ein zweiter Baustein der Praxis sind Design-Tokens, also benannte Werte für Farben, Abstände und Schriftgrößen. Statt einer nackten Farbnummer notiert das Team einen sprechenden Namen wie „farbe-primaer“ und ändert den Wert an einer einzigen Stelle. Wechselt die Marke später von Grün auf Blau, genügt eine Anpassung am Farb-Token, statt hunderte Fundstellen im Code zu durchsuchen. Wir raten davon ab, die fünf Frost-Begriffe sklavisch zu übernehmen: Viele Teams ersetzen „Atome“ durch „Elemente“ oder „Basics“, und Frost selbst hält die Benennung ausdrücklich für verhandelbar.
Ein Baukasten lebt von seiner Pflege. Ohne klare Zuständigkeit franst jedes System mit der Zeit aus, weil einzelne Teams eigene Varianten anlegen. Erfolgreiche Design-Systeme benennen deshalb feste Verantwortliche und dokumentieren zu jedem Baustein, wann und wie er einzusetzen ist. Diese Dokumentation entscheidet oft stärker über den Erfolg als die reine Zahl der Komponenten.
Wo liegen die Grenzen des Atomic Design?
Atomic Design lohnt sich vor allem für große, langlebige Projekte; für kleine Websites, starre Einzelseiten oder Teams ohne gemeinsame Pflege-Disziplin überwiegt der Aufwand den Nutzen. Das Modell ist ein Angebot, kein Gesetz.
Frost selbst warnt vor einem Missverständnis: Die fünf Ebenen sind kein linearer Ablauf, den ein Team Schritt für Schritt abarbeitet. Alle Ebenen existieren gleichzeitig, das Modell dient als gedankliche Landkarte, nicht als Projektplan. Frost betont ausdrücklich, Atomic Design sei kein linearer Prozess.
Ein zweiter Einwand betrifft den Aufwand. Ein Baustein-System aufzusetzen und zu pflegen kostet anfangs Zeit, die sich erst bei ausreichender Größe zurückzahlt. Kleine Websites mit wenigen Seiten fahren mit einem schlanken Styleguide oft besser als mit dem vollen Fünf-Ebenen-Apparat.
Auch die Benennung sorgt in der Praxis für endlose Debatten. Ob ein Seitenkopf nun ein Organismus oder schon ein Template sei, lässt sich lange diskutieren, ohne dass die Antwort das Ergebnis verbessert. Atomic Design regelt zudem nur die gedankliche Gliederung, nicht die technische Umsetzung in CSS oder JavaScript, wie Frost ausdrücklich klarstellt.
Hinzu kommt eine menschliche Hürde. Ein Baustein-System entfaltet seinen Nutzen erst, sobald alle Beteiligten den Baukasten wirklich verwenden, statt am System vorbei eigene Lösungen zu bauen. Diese Disziplin lässt sich nicht per Werkzeug erzwingen, sie braucht Einarbeitung und die Bereitschaft, gewohnte Abläufe umzustellen.
Ein einfacheres Komponentendenken ohne die volle Fünf-Ebenen-Sprache reicht für viele Projekte. Bei nur einer Handvoll wiederkehrender Bausteine genügt oft eine schlichte Komponentenbibliothek samt knappem Styleguide, ohne jeden Knopf einer atomaren Ebene zuzuordnen.
Atomic Design ist ein Denkmodell, kein Pflichtprogramm. Der Aufwand lohnt sich bei großen, wachsenden Oberflächen, während kleine Seiten mit einem einfachen Styleguide schneller ans Ziel kommen.
Glossar: 12 wichtige Fachbegriffe zu Atomic Design
Atom
Das Atom ist die kleinste Einheit im Atomic Design. Dazu zählen einzelne HTML-Elemente wie Button, Label oder Eingabefeld sowie abstrakte Grundwerte wie Farben und Schriften. Ein Atom lässt sich nicht weiter zerlegen, ohne seine Funktion zu verlieren.
Design-System
Ein Design-System bündelt Komponenten, Muster und verbindliche Standards einer Marke an einem Ort. Das System sorgt dafür, dass Gestaltung über viele Seiten und Teams hinweg einheitlich bleibt. Atomic Design liefert die Ordnungslogik für ein solches System.
Design-Token
Ein Design-Token ist ein benannter Wert für eine Gestaltungsgröße, etwa eine Farbe, einen Abstand oder eine Schriftgröße. Statt fester Zahlen im Code verweisen Bausteine auf den Token. Eine Änderung am Token wirkt sofort überall dort, wo er verwendet wird.
DRY-Prinzip
Das DRY-Prinzip (Don’t Repeat Yourself) fordert, jede Information nur einmal festzuhalten. Im Atomic Design bedeutet das: Ein Baustein existiert genau einmal und wird wiederverwendet. So bleiben Änderungen an einer Stelle konzentriert.
Komponente
Eine Komponente ist ein wiederverwendbarer Baustein der Oberfläche, unabhängig von der Frost-Ebene. Meist meint der Begriff Moleküle und Organismen. Komponentenbibliotheken sammeln solche Bausteine für den wiederholten Einsatz.
Molekül
Ein Molekül verbindet mehrere Atome zu einer Einheit mit einer eigenen Aufgabe. Ein Suchformular aus Label, Eingabefeld und Button ist ein typisches Beispiel. Erst im Molekül werden die einzelnen Atome praktisch nutzbar.
Organismus
Ein Organismus setzt mehrere Moleküle und Atome zu einem eigenständigen Abschnitt der Oberfläche zusammen. Ein Seitenkopf aus Logo, Navigation und Suchformular gilt als klassischer Organismus. Solche Abschnitte kehren auf vielen Seiten identisch wieder.
Pattern Lab
Das Pattern Lab ist ein quelloffenes Werkzeug von Brad Frost und Dave Olsen zum Bau atomarer Design-Systeme. Das Programm verschachtelt Bausteine nach dem Matrjoschka-Prinzip, sodass Änderungen an einem Atom automatisch nach oben durchschlagen.
Seite
Die Seite (englisch Page) ist die oberste Ebene im Atomic Design und zeigt ein Template mit echtem Inhalt. Auf dieser Stufe prüfen Teams, ob das System auch mit realen Texten und Bildern funktioniert. Seiten sind konkrete Instanzen, keine Vorlagen mehr.
Styleguide
Ein Styleguide dokumentiert Farben, Schriften und Gestaltungsregeln einer Marke. Er bleibt schlanker als ein vollständiges Design-System und reicht für kleine Projekte oft aus. Atomic Design geht darüber hinaus, weil die Methode die Bausteine selbst liefert.
Template
Ein Template ordnet Organismen zu einem Seitenlayout an und zeigt die Struktur des Inhalts, noch ohne echte Texte. Das Template macht sichtbar, wie die Bausteine im Zusammenspiel wirken. Gefüllt mit realem Inhalt wird aus dem Template eine Seite.
Wireframe
Ein Wireframe ist ein grober Entwurf einer Oberfläche ohne fertige Gestaltung. Er klärt Anordnung und Hierarchie, bevor Farben und Details folgen. Im Atomic Design entspricht diese Skizzenphase am ehesten der Template-Ebene.
FAQ: Atomic Design: So gestalten Sie Ihre Website modular
Wer hat Atomic Design erfunden?
Atomic Design stammt vom Frontend-Entwickler Brad Frost. Er beschrieb die Methode erstmals im Juni 2013 in einem Blogbeitrag und veröffentlichte sie 2016 als eigenständiges Buch mit dem Titel Atomic Design.
Was ist der Unterschied zwischen einem Molekül und einem Organismus?
Ein Molekül verbindet wenige Atome zu einer kleinen Einheit mit einer Aufgabe, etwa ein Suchformular. Ein Organismus ist größer und setzt mehrere Moleküle und Atome zu einem eigenständigen Abschnitt zusammen, zum Beispiel einem kompletten Seitenkopf aus Logo, Navigation und Suche.
Ist Atomic Design dasselbe wie ein Design-System?
Nein. Atomic Design ist eine Methode, um Oberflächen gedanklich zu ordnen; ein Design-System ist das konkrete Ergebnis aus Komponenten, Mustern und Standards. Atomic Design liefert die Struktur, nach der ein Design-System aufgebaut wird.
Brauche ich Pattern Lab, um Atomic Design zu nutzen?
Nein. Pattern Lab ist das von Brad Frost mitentwickelte Werkzeug, aber kein Muss. Dieselbe Hierarchie lässt sich in Design-Tools wie Figma oder Penpot oder in gängigen Komponenten-Bibliotheken abbilden.
Eignet sich Atomic Design auch für kleine Websites?
Nur eingeschränkt. Der Aufwand für ein Baustein-System rechnet sich vor allem bei großen, wachsenden Oberflächen. Für kleine Websites mit wenigen Seiten reicht oft ein schlanker Styleguide.
Lässt sich Atomic Design mit Figma umsetzen?
Ja. Figma bildet Komponenten und Varianten ab und eignet sich damit gut für Atomic Design. Quelloffene Alternativen wie Penpot funktionieren ebenso; entscheidend ist weniger das Programm als die konsequente Benennung der Bausteine.
Quellen
- Brad Frost | Atomic Design (Inhaltsverzeichnis, eBook) | https://atomicdesign.bradfrost.com/table-of-contents/ | besucht am 13.08.2026
- Brad Frost | Atomic Web Design (Blogbeitrag, 10. Juni 2013) | https://bradfrost.com/blog/post/atomic-web-design/ | besucht am 13.08.2026
- Brad Frost, Dave Olsen | Pattern Lab (Atomic Design, Kapitel 3) | https://atomicdesign.bradfrost.com/chapter-3/ | besucht am 13.08.2026
- Nielsen Norman Group | Design Systems 101 | https://www.nngroup.com/articles/design-systems-101/ | besucht am 13.08.2026
