--- title: "Atomic Design" url: "https://www.insideuxdesign.com/de/glossar/atomic-design" language: "de" description: "Was ist Atomic Design? Die fünf Stufen von Brad Frost einfach erklärt, mit Beispiel und Praxistipps. Lies, wie du Oberflächen aus Bausteinen baust." published: "2026-10-14T15:19:56+02:00" updated: "2026-10-14T15:19:56+02:00" --- # Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. - **Buchstabe:** A - **Englischer Begriff:** Atomic Design UX-Glossar · engl. Atomic Design # Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. Stell dir vor, ein Online-Shop ist über ein paar Jahre gewachsen. Inzwischen gibt es elf verschiedene Buttons, drei Varianten des Suchfelds und zwei Arten von Produktkarten. Niemand weiß mehr genau, welche davon die richtige ist, und jede neue Seite wird fast von Grund auf neu gestaltet. Genau gegen dieses Durcheinander hilft Atomic Design. ## Einfach erklärt Atomic Design ist eine Methode, mit der du Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufbaust. Ein Vergleich aus dem Alltag: Mit einer Kiste Legosteine baust du ein Haus, ein Auto oder ein Raumschiff. Die Steine bleiben dieselben, nur ihre Kombination ändert sich. Die Methode stammt vom US-amerikanischen Webdesigner Brad Frost. Er stellte die Idee 2013 bei einem Website-Projekt vor und beschrieb sie 2016 ausführlich in seinem Buch „Atomic Design“, das online frei lesbar ist. Der Name kommt aus der Chemie: Atome verbinden sich zu Molekülen, Moleküle zu größeren Organismen. So wie sich alle Materie auf eine begrenzte Zahl von Elementen zurückführen lässt, lässt sich auch eine Oberfläche auf eine begrenzte Zahl von Grundbausteinen zurückführen. ## Die fünf Stufen - **Atome:** die kleinsten Elemente wie ein Label, ein Eingabefeld oder ein Button. Zerlegst du sie weiter, verlieren sie ihre Funktion. - **Moleküle:** einfache Gruppen aus Atomen, die gemeinsam eine Aufgabe erfüllen, zum Beispiel ein Suchformular aus Label, Eingabefeld und Button. - **Organismen:** größere Bereiche aus mehreren Molekülen, etwa der Kopfbereich einer Website mit Logo, Navigation und Suche. - **Templates:** Seitenvorlagen, die Organismen anordnen und die Struktur einer Seite zeigen, ähnlich einem [Wireframe](https://www.insideuxdesign.com/de/glossar/wireframe). - **Seiten:** Templates, gefüllt mit echten Inhalten. Hier zeigt sich, ob das System auch mit langen Namen, fehlenden Bildern oder vielen Einträgen funktioniert. Wichtig: Frost beschreibt Atomic Design sinngemäß nicht als Ablauf, den du Schritt für Schritt abarbeitest, sondern als Denkmodell. Du betrachtest eine Oberfläche gleichzeitig als Ganzes und als Sammlung von Teilen. Mehr dazu im Artikel [Was ist Atomic Design?](https://www.insideuxdesign.com/de/blog/was-ist-atomic-design). ## Ein Beispiel Zurück zum Online-Shop. Vorher gestaltet das Team jede Kategorieseite einzeln. Ändert sich die Farbe für Buttons, muss jemand zwanzig Screens durchgehen und findet trotzdem nicht alle Stellen. Nachher gibt es einen einzigen Button als Atom. Die Produktkarte ist ein Molekül aus Bild, Titel, Preis und diesem Button. Das Produktraster ist ein Organismus aus vielen Karten. Eine Änderung am Button wirkt sich überall aus, und neue Seiten entstehen schneller, weil das Team vorhandene Bausteine kombiniert, statt neu anzufangen. ## Häufige Missverständnisse Atomic Design ist nicht dasselbe wie ein [Design System](https://www.insideuxdesign.com/de/glossar/design-system). Ein Design System umfasst neben Komponenten auch Regeln, Tonalität und Dokumentation. Atomic Design ist eine Art, die Komponenten darin zu ordnen. Außerdem musst du die Begriffe aus der Chemie nicht übernehmen. Entscheidend ist die Idee, vom Kleinen zum Großen zu denken. ## In der Praxis - **Starte mit einer Bestandsaufnahme.** Sammle Screenshots aller Buttons, Formularfelder und Karten. Doppelte Varianten fallen so sofort auf. - **Teste Bausteine mit echten Inhalten.** Eine Karte, die mit Blindtext gut aussieht, kann mit einem langen Produktnamen auseinanderfallen. - **Fang klein an.** Ein paar sauber gepflegte Komponenten bringen mehr als eine riesige Bibliothek, die niemand nutzt. Wie das gelingt, zeigt der Artikel [Design Systems für kleine Teams: Wann es sich lohnt und wie du klein anfängst](https://www.insideuxdesign.com/de/blog/design-systems-fuer-kleine-teams). ## Verwandte Begriffe [Design System](https://www.insideuxdesign.com/de/glossar/design-system), [Wireframe](https://www.insideuxdesign.com/de/glossar/wireframe), [Prototyp](https://www.insideuxdesign.com/de/glossar/prototyp), [Gestaltgesetze](https://www.insideuxdesign.com/de/glossar/gestaltgesetze) ## Quellen - [Brad Frost: Atomic Design, Chapter 2: Atomic Design Methodology. Brad Frost, 2016](https://atomicdesign.bradfrost.com/chapter-2/) - [Brad Frost: Atomic Design, Foreword. Brad Frost, 2016](https://atomicdesign.bradfrost.com/foreword) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion) [ ### Dark Patterns Dark Patterns sind Gestaltungstricks, die Menschen zu Entscheidungen drängen, die sie eigentlich nicht treffen wollen, etwa versteckte Kündigungen oder vorausgewählte Zusatzoptionen. ](https://www.insideuxdesign.com/de/glossar/dark-patterns)