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.
- 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?.
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. 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.
Verwandte Begriffe
Design System, Wireframe, Prototyp, Gestaltgesetze