Atomic Design ist eine Methode, Oberflächen aus wiederverwendbaren Bausteinen aufzubauen, statt Seite für Seite zu gestalten. Brad Frost hat sie 2013 veröffentlicht und die Ebenen nach dem Vorbild der Chemie benannt: Vom kleinsten unteilbaren Element wächst die Oberfläche über fünf Stufen zur fertigen Seite.
- Atomic Design
Methode zum Aufbau von Benutzeroberflächen, bei der jede Ebene ausschließlich aus Elementen der darunterliegenden zusammengesetzt wird: Atome, Moleküle, Organismen, Templates und Seiten.
Beispiel: „Das Interface ist nach Atomic Design aufgebaut, deshalb kennen wir jeden Baustein einzeln.“Herkunft: 2013 von dem amerikanischen Webdesigner Brad Frost formuliert und 2016 als Buch veröffentlicht. Die Namen der Ebenen stammen aus der Chemie, in der sich jede Materie auf Atome zurückführen lässt.
Abgrenzung: Atomic Design ist die Denkweise, ein Design System das Ergebnis. Die Methode legt fest, wie Bausteine geschnitten werden; ihre Gestaltung bleibt offen.
Die fünf Ebenen
Der Aufbau lässt sich an einer Suchfunktion durchspielen. Jede Ebene fasst zusammen, was auf der Ebene darunter schon existiert, und bekommt dadurch eine eigene Bedeutung im Gespräch über die Oberfläche.
Ebene | Was dazugehört | Beispiel |
|---|---|---|
Atom | Elemente, die sich nicht weiter zerlegen lassen, ohne ihre Funktion zu verlieren | Eingabefeld, Beschriftung, Button |
Molekül | Eine Handvoll Atome, die zusammen eine Aufgabe erfüllen | Suchfeld mit Beschriftung und Button |
Organismus | Ein eigenständiger Abschnitt aus mehreren Molekülen und Atomen | Kopfbereich mit Logo, Navigation und Suche |
Template | Das Seitengerüst aus Organismen, noch mit Platzhaltern | Aufbau einer Produktseite |
Seite | Das Template mit echten Inhalten | Die Produktseite eines konkreten Artikels |
Die Reihenfolge ist keine Projektabfolge. In der Praxis springt man zwischen den Ebenen, weil sich erst an der fertigen Seite zeigt, ob ein Baustein trägt.
Was die Methode im Projekt verändert
Der greifbarste Gewinn ist eine gemeinsame Sprache. Wenn Design und Entwicklung dieselben Bausteine mit denselben Namen meinen, verschwindet ein großer Teil der Rückfragen. Aus „das Kästchen mit dem Bild oben“ wird die Produktkarte, und alle Beteiligten wissen, welches Element gemeint ist, in welchen Zuständen es existiert und wo es sonst noch vorkommt.
Der zweite Effekt betrifft die Reihenfolge der Arbeit. Wer in Bausteinen denkt, gestaltet die zwanzig wiederkehrenden Elemente einer Website einmal gründlich statt auf jeder Seite neu. Das verschiebt Aufwand nach vorn: Die ersten Entwürfe dauern länger, die restlichen Seiten entstehen deutlich schneller, weil sie überwiegend aus schon Entschiedenem bestehen.
Sichtbar wird das Ergebnis meist in einer Komponentenbibliothek, etwa einem Living Styleguide oder einer Storybook-Instanz. Dort liegen die Bausteine einzeln und in ihren Zuständen nebeneinander, prüfbar ohne die Seite drumherum. Das ist auch der Punkt, an dem Atomic Design und ein Design System ineinandergreifen: Die Methode liefert den Schnitt, das System die Regeln und die Dokumentation dazu.
Wo die Methode an Grenzen stößt
Die Zuordnung ist Auslegungssache. Ob eine Karte mit Bild und Text ein Molekül oder schon ein Organismus ist, lässt sich begründen und ebenso gut anders begründen. Wir empfehlen, die Ebenen als Werkzeug zu behandeln und die Diskussion abzukürzen, sobald sie länger dauert als die Umsetzung. Wichtig ist die Wiederverwendung, die Etikettierung ist zweitrangig.