Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem Erfinder dazu, seine Philosophie unter einprägsamem Namen verbreiten zu können. Dennoch lohnt es, sich mit den Inhalten auseinander zu setzen.

Atomic Design: Das steckt dahinter

Der Begriff „Atomic Design“ geistert seit fast einem halben Jahrzehnt durch das Weltennetz. Erfunden von Brad Frost und inzwischen auch mit einem kompletten, online lesbaren Buch hinterlegt, lässt indes der Siegeszug auf sich warten. Oder etwa doch nicht? Das hängt ganz davon ab, wie man auf das Phänomen schaut.

Wenn du noch nichts von „Atomic Design“ gehört hast, bist du hier an der richtigen Adresse. Ich stelle den theoretischen Ansatz in aller Kürze dar, damit wir wissen, wovon eigentlich die Rede ist. Interessiert dich das Konzept am Ende in der Tiefe, nutze die weiter oben gesetzten Links zu Brads Websites, insbesondere zum E-Book.

„Atomic Design“ ist wörtlich gemeint. Es geht vom Atom als kleinstem Bestandteil eines Designs aus. Ein Atom ist beispielsweise ein HTML-Tag oder ein Font oder eine andere, nicht weiter verkleinerbare Einheit im Design-System. Ein Molekül ist dann ein Konglomerat mehrerer Atome, die gemeinsam (als Molekül) eine Aufgabe lösen. Das könnte zum Beispiel ein vollständiges HTML-Formular sein. Die nächstgrößere Einheit bezeichnet Frost als Organismus. In einer solchen Einheit spielen mehrere Moleküle zusammen eine zielgerichtete Rolle. Ein Organismus könnte beispielsweise ein kompletter Seitenheader oder -footer oder der Bereich mit aktuellen News sein. Ich denke, du kannst dir vorstellen, was gemeint ist.

Ab diesem Punkt verlässt Frost die Analogie zur Sprache der Chemie. Nach dem Organismus kommt das Template, die Vorstufe der eigentlichen Pages. Letztere sind die dem Besucher schlussendlich zugänglichen Seiten mit allen aktiven Inhalten, während die Templates die Vorlagen sind, in die eben jene Inhalte später einfließen sollen.

Das war es im Grunde auch schon.

Atomic Design: Neu ist nur der Begriff

Nanu, mag sich der eine oder andere gestandene Webentwickler nun sagen, das habe ich doch noch nie anders gemacht. Allerdings wäre ich nicht auf die Idee gekommen, derlei Begrifflichkeiten zu verwenden. Wenn du ebenfalls so denkst, willkommen. Das ist auch mein Verständnis dieser Sache.

Es klingt natürlich prima und pseudowissenschaftlich, wenn wir von Atomen, Molekülen und so weiter reden. Einen echten eigenständigen Nutzwert hat das indes nicht. Vielmehr ist es ja lediglich logisch, dass wir Seiten auf der Basis von Templates, die wir mit verschiedenen Funktions- und Layoutblöcken gefüllt haben, bauen. Ob ich das dann Atome, Moleküle oder ganz anders nenne, spielt letztlich keine Rolle.

Das Periodensystem der HTML-Elemente. (Illustration: Josh Duck)

Insofern darf man mit einiger Berechtigung sagen, dass „Atomic Design“ nur alter Wein in neuen Schläuchen ist. Und an dieser Stelle klärt sich auch die Frage, ob „Atomic Design“ nun den Siegeszug angetreten hat oder nicht: Das hat es, allerdings nicht notwendigerweise unter dieser Bezeichnung. **

Einen Vorteil der Verwendung der Begrifflichkeit an sich kann ich durchaus erkennen, dieser ist aber mehr psychologischer Natur. Dadurch, dass wir von „Atomic Design“ sprechen, schaffen wir ein Bewusstsein, ein Mindset, das direkt in die richtige Richtung weist. Wir erreichen, dass wir uns bewusst auf die Kleinteiligkeit des Designansatzes fokussieren und nicht gleichsam zufällig richtig gestalten.

Dabei dürfte es wohl unstrittig sein, dass ein Designansatz generell immer vom kleinsten zum größten Teil ablaufen sollte. Nicht zuletzt das responsive Design zwingt uns fast schon zu dieser Vorgehensweise. Doch ob freiwillig oder nicht, für den Ansatz gibt es durchaus handfeste Gründe.

Argumente für ein Design im Baukastensystem

Obwohl Häuser durchaus unterschiedlich aussehen können, hat man sich in der Bauwirtschaft auf ein gemeinsames modulares System geeinigt, nachdem im Prinzip jedes Haus in gleicher Weise gebaut wird. Decken-, Wand- und Dachelemente werden zugeliefert und verbaut. Ebenso verhält es sich mit Fenstern, Türen und so weiter. Individuell ist letztlich nur die Zahl der verbauten Elemente sowie deren Optik.

In gleicher Weise verhält es sich in unserer Branche. Auch wenn du behaupten magst, du bautest jede Seite individuell nach den Vorgaben und Sinnhaftigkeiten, die der jeweilige Kunde macht beziehungsweise impliziert, so ist die Wahrheit doch die, dass jeder von uns über Jahre gepflegte und verbesserte Snippets für die unterschiedlichsten Funktionalitäten gebunkert hat und immer wieder gerne einsetzt. Das ist nicht etwa eine Schande, sondern ein Gebot der Vernunft, nicht zuletzt unter wirtschaftlichen Aspekten.

Das fängt schon beim Wireframing an. Das Wireframing ist eine Konzeptionsweise, die den Ansatz des „Atomic Design“ bildlich erfahrbar macht. In groben Inhaltsblöcken skizzieren wir, wie die Seite strukturiert werden und welche Funktionalität wo zu erwarten sein soll. So können wir ein Projekt von unten nach oben durchdenken, ohne uns bereits in den Details der Gestaltung zu verlieren.

Wir könnten also sagen, dass „Atomic Design“ dabei hilft, den Überblick zu bewahren. Und natürlich hilft der andere gedankliche Ansatz schon vom Start weg dabei, Code-Blöcke zu erstellen, die gut wiederverwendbar sind. Ohne den Ansatz könntest du durchaus weniger fokussiert auf diesen Punkt sein.

Fassen wir die Vorteile des Denkansatzes, nenn ihn „Atomic Design” oder nicht, kurz zusammen, kommt dabei eine schöne Liste mit einigem Nutzwert zusammen:

Du hast einen Fundus an beliebig zusammensteckbaren Modulen

Wenn du dich tatsächlich streng an den Ansatz hältst, hast du ein Arsenal fertiger Funktionsmodule an der Hand, die du beliebig zusammenstöpseln kannst. Innerhalb der gegebenen Hierarchie bist du frei im Einsatz und stellst auf diese Weise schnell mindestens Prototypen her.

Dein Style Guide entsteht quasi automatisch

Da du auf atomarer Ebene gestaltest, kannst du die Einzelteile direkt als Style Guide verwenden. Oder, noch anders ausgedrückt, du benötigst gar keinen solchen mehr, denn die Verwendung der Kleinteile sorgt automatisch für ein konsistentes Design.

Auch die Code-Basis ist zwangsläufig konsistent, was zum einfacheren Verständnis der Funktionsmodule beiträgt.

Dein Gestaltungsanspruch bleibt praktischer

Wenn du frei gestalten kannst, neigst du dazu, seitenbasiert zu layouten. Das ist ganz normal und entspricht alten Gewohnheiten. Gestaltest du atomar, geht es mehr darum, ein funktionierendes Design zu erstellen, das mit den gegebenen Bausteinen ordentlich aussieht. Durch die Kleinteiligkeit der Herangehensweise ist „mobile first” quasi der native Denkansatz.

Logisch, dass auch das Prototyping, wenn du es denn überhaupt noch so verstanden wissen willst, sich beschleunigt. Deine ersten Vorschläge liegen weitaus schneller vor.

Deine Website bleibt leichter pflegbar

Wenn du konsequent mit der Hierarchie des „Atomic Design” arbeitest, ist es dir ein leichtes, Blöcke zu entnehmen, zu ersetzen, umzustellen. Dadurch ist die aktive Pflege deiner Website nicht unbedingt so einfach wie das Legen einer Patience, aber doch ähnlich strukturiert.

Der Ansatz lässt sich ausweiten

Hast du den Atomic-Ansatz erst einmal verinnerlicht, wird dir auffallen, dass nicht nur dein HTML-Markup profitieren kann. Auch mit CSS, JavaScript und anderen Technologien kannst du so verfahren. Gerade JavaScript bietet da Potenzial.

Fazit: Atomic Design an sich ist eine gute Sache

Du siehst, „Atomic Design” ist eine gute Sache. Ob du kleinteiliges Gestalten nun so bezeichnen willst oder nicht, bleibt dir überlassen. Möchtest du ein bisschen mit Brads Ansatz experimentieren, dann schau mal beim Pattern Lab vorbei. Hier kannst du dich mit dem Denkmodell vertraut machen. Kennst du Bootstrap, wird dich das nicht übermäßig anstrengen.

FAQ

Was ist Atomic Design?

Atomic Design ist ein Ansatz für die Gestaltung und Entwicklung von Benutzeroberflächen (User Interfaces, UI), der von Brad Frost eingeführt wurde. Er basiert auf der Idee, komplexe Interfaces in ihre grundlegendsten Bausteine zu zerlegen, ähnlich wie in der Chemie Moleküle aus Atomen bestehen. Das hilft dabei, ein konsistentes und wiederverwendbares Designsystem zu schaffen.

Warum ist Atomic Design wichtig?

1. Konsistenz: Atomic Design sorgt dafür, dass alle Elemente einer Benutzeroberfläche einheitlich und stimmig sind. Das verbessert die Benutzererfahrung und erleichtert die Wartung.
2. Wiederverwendbarkeit: Durch die Zerlegung in kleinere, wiederverwendbare Komponenten können diese Bausteine mehrfach und an verschiedenen Stellen eingesetzt werden. Das spart Zeit und Ressourcen.
3. Effizienz: Entwickler und Designer können schneller arbeiten, da sie auf bewährte und getestete Bausteine zurückgreifen können. Das beschleunigt den Entwicklungsprozess und verringert Fehler.

Elemente des Atomic Design

Atomic Design besteht aus fünf Ebenen:

1. Atome: Dies sind die kleinsten Bausteine, wie Buttons, Input-Felder oder Farben. Sie sind die Grundelemente jeder Benutzeroberfläche.
2. Moleküle: Eine Kombination von Atomen, die zusammen eine Funktion erfüllen, wie ein Suchfeld (bestehend aus einem Input-Feld und einem Button).
3. Organismen: Komplexere Strukturen, die aus Molekülen und Atomen bestehen, wie eine Navigationsleiste.
4. Templates: Diese legen das Grundlayout einer Seite fest, indem sie verschiedene Organismen zusammenbringen. Sie zeigen, wie die verschiedenen Komponenten zusammenwirken.
5. Seiten (Pages): Fertige Seiten, die echte Inhalte zeigen und das Endprodukt darstellen.

Umsetzung von Atomic Design

Um Atomic Design umzusetzen, folge diesen Schritten:

1. Inventarisierung: Analysiere und liste alle UI-Elemente, die du bereits hast oder benötigst.
2. Erstellung der Atome: Definiere die grundlegenden Atome wie Farben, Schriften, Buttons und Input-Felder.
3. Zusammenstellung der Moleküle: Kombiniere die Atome zu funktionalen Einheiten.
4. Bau der Organismen: Setze die Moleküle und Atome zu größeren Strukturen zusammen.
5. Gestaltung der Templates: Lege das Layout für die verschiedenen Seiten und ihre Elemente fest.
6. Finalisierung der Seiten: Erstelle die fertigen Seiten mit echten Inhalten.

Ist Atomic Design noch state-of-the-art?

Ja, Atomic Design bleibt relevant und ist weit verbreitet, vor allem in der Entwicklung von Designsystemen und komponentenbasierten Frameworks wie React oder Vue.js. Es hilft Teams, effizient und konsistent zu arbeiten, was in der heutigen schnelllebigen digitalen Welt entscheidend ist. Dennoch entwickeln sich Designmethoden ständig weiter, und es ist wichtig, offen für neue Ansätze und Technologien zu bleiben, die Atomic Design ergänzen oder weiterentwickeln können.

 

(Bildnachweis: Das Artikelbild ist eine Komposition aus dieser Illustration eines Atoms und diesem Bild. Das Material stammt von Depositphotos.)