Atomic Design
Atomic Design ist eine Methode, um die Oberfläche einer Website oder App aus kleinen, wiederverwendbaren Bausteinen zusammenzusetzen. Die Bausteine werden dabei in fünf Stufen geordnet, von einem einzelnen Knopf bis zur fertigen Seite.
Jede Website besteht aus Teilen, die immer wieder auftauchen: Knöpfe, Eingabefelder, Überschriften, Suchleisten. Atomic Design ist eine Arbeitsweise, bei der man diese Teile nicht für jede Seite neu erfindet. Stattdessen baut man sie einmal sauber und setzt sie danach überall zusammen. Der Name kommt aus der Chemie: kleine Atome bilden Moleküle, Moleküle bilden größere Strukturen. Genauso werden hier winzige Bausteine zu immer größeren Einheiten kombiniert, bis am Ende eine ganze Seite entsteht. Entwickelt und benannt wurde die Methode 2013 von dem Webdesigner Brad Frost.
Warum große Websites nicht auseinanderfallen
Ein Onlineshop hat schnell mehrere hundert Seiten. Ohne feste Bausteine sieht der Kaufen-Knopf auf jeder dritten Seite anders aus. Mal ist er dunkelblau, mal etwas heller, mal steht der Text an einer anderen Stelle. Für Besucher wirkt so eine Seite unaufgeräumt und weniger vertrauenswürdig.
Mit Atomic Design gibt es den Knopf nur ein einziges Mal. Ändert das Unternehmen seine Farbe, passt jemand diesen einen Baustein an. Die Änderung erscheint sofort auf allen Seiten, die ihn benutzen. Das spart nicht nur Zeit, sondern verhindert auch, dass irgendwo eine alte Version übrig bleibt.
Ein zweiter Vorteil betrifft die Zusammenarbeit. Designer und Programmierer reden über dieselben Namen für dieselben Teile. Wenn jemand « Produktkarte » sagt, wissen alle, was gemeint ist. Diese gemeinsame Sprache reduziert Missverständnisse deutlich, besonders in großen Teams.
Die fünf Stufen vom Knopf zur Seite
Die unterste Stufe heißt Atome. Das sind Bausteine, die man nicht weiter zerlegen kann: ein einzelner Knopf, ein Eingabefeld, ein Symbol. Für sich allein sind sie meist nutzlos. Ein Eingabefeld ohne Beschriftung sagt niemandem, was man dort hineinschreiben soll.
Auf der zweiten Stufe stehen Moleküle. Hier werden wenige Atome zu einer sinnvollen kleinen Einheit verbunden. Ein Suchfeld plus Beschriftung plus Suchknopf ergibt zusammen eine Suchleiste. Die dritte Stufe, Organismen, kombiniert mehrere Moleküle zu großen Abschnitten. Eine komplette Kopfzeile mit Logo, Suchleiste und Menü ist ein solcher Organismus.
Die vierte Stufe sind Templates, also Vorlagen. Sie legen fest, wo auf einer Seite welcher Abschnitt sitzt, allerdings noch ohne echte Inhalte. Erst auf der fünften Stufe, den Pages, kommen echte Texte und Bilder hinein. Dort zeigt sich, ob das Gerüst auch mit einem sehr langen Produktnamen noch funktioniert.
Design-Systeme bei Google, SAP und in Stellenanzeigen
Die sichtbarsten Ergebnisse dieser Denkweise heißen Design-Systeme. Das sind öffentliche Sammlungen aller Bausteine eines Unternehmens, oft mit Beispielcode. Bekannte Beispiele sind Material Design von Google, Fluent von Microsoft und Fiori von SAP. Wer solche Seiten öffnet, sieht genau die beschriebene Ordnung: erst einzelne Knöpfe, dann zusammengesetzte Elemente.
Auch in Software-Werkzeugen taucht das Prinzip auf. In Figma, einem verbreiteten Design-Programm, legt man Bausteine als sogenannte Komponenten an und verwendet sie mehrfach. Programmierer arbeiten mit ganz ähnlichen Komponenten in Werkzeugen wie React. Beide Seiten bauen damit dieselbe Struktur, nur in unterschiedlichen Programmen.
In Stellenanzeigen für Frontend-Entwicklung und UI-Design gehört Atomic Design inzwischen zu den Standardbegriffen. Ein verbreiteter Irrtum ist allerdings, die fünf Stufen als starre Vorschrift zu verstehen. In der Praxis streiten Teams oft darüber, ob etwas noch Molekül oder schon Organismus ist. Solche Diskussionen sind vergeudete Zeit, denn der eigentliche Zweck ist die Wiederverwendung, nicht die perfekte Einordnung.