Atomic Design – Ein Gestaltungsansatz auf molekularer Ebene

Der technische Fortschritt mitsamt dem Aufkommen neuer Touchpoints und Devices stellt Designer vor neue Herausforderungen, wenn es um die Schaffung konsistenter Nutzererlebnisse geht. Gerade bei der Entwicklung von Benutzerschnittstellen und User Interfaces (UI) wurden und werden so seit mehreren Jahren vermeintlich neue Gestaltungsansätze propagiert, welche den Fokus auf die Erstellung von Designsystemen legen, um den wachsenden Anforderungen mit der notwendigen Geschwindigkeit, Effizienz und Innovationskraft zu begegnen.

Einen der bekanntesten Ansätze für den methodischen Aufbau von Designsystemen stellte der Webdesigner Brad Frost 2013 unter dem titelgebenden Namen Atomic Design vor. Seiner Auffassung nach kann man der steigenden Anzahl an Nutzern, Bildschirmgrößen, Browsern und Funktionen nur dann habhaft werden, wenn ein robustes Designsystem mit durchdachter Hierarchie und Pattern Library (Musterbibliothek) die Gestaltungsbasis bildet. Aber wie genau funktioniert Atomic Design? Und ist die Methode nicht nur ihres Namens wegen ein universaler Ansatz oder verspricht sie manchmal auch mehr, als sie halten kann?

Das kleinste gemeinsame Vielfache – Von Atomen und ihren Verbindungen

Bei der Entwicklung seines Gestaltungsansatzes, in dem zuerst die kleinsten Teile eines Designs entwickelt und diese zu immer größeren Gefügen zusammengestellt werden, ließ sich Frost von der Chemie und dem Studium der Zusammensetzung von Materie inspirieren. Der kurze naturwissenschaftliche Exkurs lautet hierbei wie folgt:  Atome sind die kleinsten nicht weiter teilbaren Grundbausteine jeglicher Materie (ob fest, flüssig, gasförmig etc.). Verbinden sich nun zwei oder mehrere Atome miteinander, entstehen Moleküle, die vollkommen neue und einzigartige Eigenschaften auf Grundlage ihrer Zusammensetzung erhalten. Gehen die Moleküle weitere chemische Bindungen ein, können sich so einfache und komplexe Organismen formieren.

Diesen universalen Regeln bedient sich Frost, um seiner Methode 5 Ebenen zuzuweisen, die das Vorgehen beim Gestalten von digitalen Produkten beschreiben und gleichzeitig die Erstellung eines vollständigen Designsystems ermöglichen. Die Grundbausteine und den Startpunkt bilden auch hier die nicht weiter teilbaren Atome, welche sich u. a. als HTML-Tags, Fonts, Icons, Buttons oder Eingabefelder manifestieren. Also alle User Interface Elemente, die im gesamten Design verwendet werden sollen und denen noch keine spezifische Funktion zugeordnet wurde.

Dies ändert sich erst in der Molekülphase. Die unabhängigen Atome werden nun in neue Gruppierungen zusammengeführt, wodurch sie als Moleküle Funktion erhalten. Kombiniert man z. B. ein Eingabefeld mit dem Enter-Button entsteht ein Suchfeld oder durch die Kombination von Avatar und Namensetikette ein Profil. Moleküle stellen somit die grundlegenden sowie häufig wiederkehrenden Funktionselemente digitaler Produkte dar und können durch Mehrfachkombinationen in ihrer Komplexität steigen, die jedoch durch die Untergliederung in Atome reduziert und einfacher zu durchdringen ist.

In der nächsten Stufe lassen sich die so erstellten Moleküle jetzt zu Organismen verbinden, die unterschiedliche Funktionsabschnitte und das Aussehen des digitalen Produkts definieren. So bilden z. B.  verschiedene Moleküle wie Suchmaschine, Navigationsleiste, Logo und Social Media Icons gemeinsam den Header einer Website, der als Ganzes in diesem Fall einen Organismus darstellt. Die daraus resultierenden Organismussektionen können dank der zugrundeliegenden Molekülstruktur einfach an Nutzerwünsche angepasst und in verschiedene Umfelder eingesetzt werden.

In den letzten beiden Phasen verlässt Frost dann seine Analogie zur Naturwissenschaft und nutzt die eher handelsüblichen Begriffe namens Templates und Pages. Templates sind hierbei als Vorlage oder auch Blaupause zu verstehen, da sie zwar alle Elemente für ein zusammenhängendes Design beinhalten, aber noch keine echten Daten enthalten. Organismen und Moleküle werden nun zu einem ersten konkreten Ergebnis in Form eines ganzheitlichen Layouts zusammengeführt und zueinander in Kontext gestellt. Die vormals abstrakten molekularen Elemente ergeben so ein erstes Gesamtdesign der Seite.

Die letzte Phase, Pages, läutet folglich die Entwicklung des finalen Produkts ein. Die Seitenvorlagen samt möglicher Platzhalter werden jetzt mit realen Inhalten gefüllt. Dies ist in vielerlei Hinsicht der entscheidendste Schritt, da hier das Zusammenspiel der Komponenten abermals getestet wird, um das Designsystem auf Herz und Nieren zu überprüfen. Kommen die Nutzer mit bestimmten Sektionen der Seite nicht klar, können Designer recht einfach einen Schritt zurückgehen, um Templates, Organismen oder Moleküle im Sinne der Nutzerfreundlichkeit neu anzupassen. Das Erstellen verschiedener Vorlagenexemplare hilft hierbei auch, schnell unterschiedliche Variationen auf ihre Effizienz zu vertesten.

Anwendung in der Praxis – Der Aufbau einer standardisierten Grundlage

Der zunächst ausgerufene Hype um die Atomic Design Methode hat natürlich seine Gründe, zielt sie doch in erster Linie darauf aus, den Designern das Leben in einer Welt immer komplexerer Anforderungen zu vereinfachen. Die Zusammensetzung der einzelnen Atome und der sukzessive Aufbau des Entwurfs soll demnach eine durchgehende Konsistenz des Designs und vor allem eine hohe Wiederverwendbarkeit gewährleisten, wodurch Änderungen mit geringem Aufwand zu erzielen sind und Designer sich auf eine eindeutige Strukturierung und Anordnung der Informationen fokussieren können.

Gleichzeitig soll das Pflegen der Designs gerade in späteren Projektphasen vereinfacht werden, da Elemente nicht nur vielzählig kombiniert, sondern auch um neue Elemente erweitert werden können – ohne einen Restart des gesamten Entwicklungsprozesses zu bedürfen. Dies gilt ebenso über die Projektphase hinaus, da sich die inhärente Modularität und Skalierbarkeit von Atomic Design zur Etablierung eines Content Management Systems (CMS) eignet, welches auch Anwendern ohne ausgeprägte Programmierkenntnisse die Erstellung und Bearbeitung von umfangreichen Inhalten, z. B. beim Betreiben eines Webshops, erlaubt.

In der Praxis werden diese zugrundeliegenden Prinzipien zwar aufgenommen, jedoch findet Atomic Design seine Anwendung eher als eine Art Baukastensystem, in dem vor allem Atome und Moleküle die tragende Rolle bei der Etablierung eines gesamtheitlichen Look & Feel einnehmen. Dies liegt daran, dass Standardelemente, welche zum Schnellzugriff in einer Library als Organismen angelegt wurden, gerade bei der Entwicklung neuer Komponenten häufig umstrukturiert werden müssen, da die Anforderungen an neue Features und Komponenten meist weitaus komplexer sind, als dass sie aus den verfügbaren Organismen zusammengestellt oder eins zu eins wiederverwendet werden können.

Es geht bei der Entwicklung und Einbindung neuer Komponenten also eher darum, die neuen Anforderungen mit der bestehenden Library in Kontext zu bringen und gleichzeitig die Übersichtlichkeit zu wahren. Umfangreiche Projekte, die stetig wachsen und eine Vielzahl von Funktionen innehaben, bedingen daher ab einem gewissen Punkt den Ausbruch aus dem theoretischen Ansatz des Atomic Designs, indem einzelne Funktionen oder neue Komponenten ausgelagert werden müssen, da sonst zu viele Sonderfälle entstehen und die Library schnell von ihrem eigentlichen Ziel – ein übersichtlicher Baukasten der Standards zu sein – abkommt.

Ähnlich verhält es sich auch auf den oberen Ebenen, also den Templates und Pages. Bei einem klassischen Online-Shop werden so z. B. Standardseiten und jegliche Seitentypen, die sich vom Aufbau sehr ähnlich sind, als Templates angelegt. Handelt es sich aber um Seiten oder Produkte mit einer hohen Funktionsvielfalt, wird in der Praxis eher mit spezifischen Guides für einzelne Komponenten gearbeitet, die nicht nur den Aufbau, sondern auch die Funktion hinter diesen beschreibt, sodass jegliche Elemente bestmöglich vonseiten der Entwicklung umgesetzt werden können. Für Ganze Seiten werden dann sogenannte Best Practices angelegt, die den im Atomic Design verwendeten Pages ähneln. Ein gut angelegter Baukasten bzw. Designsystem ist daher unabhängig vom Umfang des angedachten Endproduktes von großem Mehrwert, wenn es darum geht, eine standardisierte Grundlage zu bilden, auf der man die Seite oder das Produkt weiterentwickeln kann.

Ein stetiger Wandel, der auch vor Designsystemen nicht Halt macht

Einige der grundlegenden Ideen hinter Atomic Design finden in ähnlicher Form schon seit Jahrzehnten in anderen Bereichen wie z. B. der technischen Produktplanung Verwendung und auch in der Webentwicklung gehören Styleguides (Gestaltungsrichtlinien) bereits seit langem zum Standard. Jedoch lieferte die eher featurebasierte Struktur früherer Methoden nur bedingt Antworten auf die aufkommende Notwendigkeit von Responsivität. In diese Lücke stieß Atomic Design und erlangte erstmals Bekanntheit durch den 2014er Launch von Googles Designsprache Material Design, die es ermöglichte, Android-Apps dank Anwendung der neuen Prinzipien konsistenter zu gestalten und dass eine Vielzahl von Systemen/Geräten bedient werden konnten. Dennoch wird der modulare und kategorisierende Ansatz Frosts häufig mit einer Kritik konfrontiert, welche die gesamte Designbranche auf Trab hält: Durch neue Tools und modularisierte Baukastensysteme entsteht nur noch ein langweiliger Einheitsbrei, der keinen Platz für kreatives bzw. innovatives Design kennt.

Die Wahrheit liegt wie bei vielen kritischen Betrachtungen vermutlich irgendwo in der Mitte; zwischen Konvention und Innovation; zwischen Aufwand und Ertrag; zwischen Ordnung und Chaos. Vielleicht sollte man sich deshalb eher auf den Grundgedanken Frosts fokussieren. Bricht man diesen herunter, geht es beim Atomic Design nämlich um nichts anderes als beim kleinsten Element in der Designkonzeption zu starten. Dieses Vorgehen stellt ganz allgemein auch in der agilen Entwicklung einen mehrheitlich anerkannten Grundsatz dar, der in Form von Wireframing als Startschuss des iterativen Prozesses gelebt wird. Dass es aber beim Thema Wireframing genauso wie bei der Erstellung von Designsystemen unterschiedliche Ausprägungen und Meinungen gibt, liegt daran, dass sich Ansätze selten in vollkommen Richtig oder vollkommen Falsch einteilen lassen. Jedes neue Projektvorhaben kommt schließlich mit seinen eigenen Herausforderungen, Startbedingungen und Zielvorgaben daher, was ein rigoroses Vorgehen nach Schema F beim Entwickeln digitaler Services und Produkte nahezu unmöglich macht.

Frost selbst mahnte bereits 2013, dass sein Ansatz deshalb eher als mentales Modell anzusehen ist denn als strikt linearer Prozess. Diese Sichtweise gilt in vielerlei Hinsicht für jedweden Prozess in einer agiler werdenden Welt und verdeutlicht die weiterhin vorherrschende Relevanz des Konzepts. Es geht sowohl um eine bewusste Auseinandersetzung mit den einzelnen Komponenten, die ein digitales Produkt ausmachen, als auch um eine bewusste Auseinandersetzung mit dem gesamten Prozess, von der Planung und Entwicklung über die Umsetzung bis hin zur Pflege. Als Rahmenwerk mit dehnbaren Richtlinie kann Atomic Design so dabei helfen, Komponentenzusammenhänge besser zu verstehen und eine klare Strategie bei ihrer Strukturierung zu finden, wodurch das Festlegen auf eine gemeinsame Methodologie, die es innerhalb des Teams erlaubt, fortwährend die gleiche Sprache zu sprechen, haptischer wird.

Fakt ist schlicht, dass es keine universelle Blaupause gibt und auch Designsysteme einem stetigen Wandel unterliegen, um auf die steigenden Anforderungen und Komplexitäten der digitalen Zeit Antworten zu finden. Und wie auch erfolgreiche digitale Services und Produkte idealerweise immer weiter optimiert werden, so verhält es sich dementsprechend mit den vorherrschenden Methodiken.  Jeder neue Ansatz liefert Ideen, Möglichkeiten und Inspiration dafür, die eigene Vorgehensweise zu überdenken und effizientere Lösungswege zu determinieren. So wird nicht nur der Atomic Design Ansatz stetig weitergedacht, sondern es werden auch neue Konzepte aus dessen Grundprinzipien geboren, wie z. B. das von vielen gefeierte Utility First CSS (Cascading Style Sheets). Hierbei werden Klassen auf Basis der einzelnen CSS-Eigenschaften von Atomen erstellt, aus denen in Kombination flexible Layouts gebaut werden können. Vorgefertigte Komponenten oder separate CSS-Dateien werden somit obsolet, wodurch sich Designern viel mehr Gestaltungsmöglichkeiten bieten, um wahrhaft individualisierte Websites zu entwickeln – ohne eine einheitliche Sprache und ein konsistentes Design zu gefährden.

_______

Quellen:

https://atomicdesign.bradfrost.com/table-of-contents/

https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/

https://t3n.de/news/atomic-design-baukastensystem-721010/

https://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771

https://designbote.com/atomic-design-fuenf-vorteile-die-einen-digitalen-entwicklungsprozess-professionalisieren/

https://matter-of-design.com/atomic-design-ueberbewertet-oder-sinnvoll/

https://www.linkedin.com/pulse/whats-wrong-atomic-design-james-eccleston

https://www.sortlist.de/blog/atomic-design/

https://talentgarden.org/de/design/atomic-design-cose-e-perche-importante-per-costruzione-uri/

Eigene verlinkte Artikel:

Designsysteme

https://www.forwerts.com/articles/?artikel=designsysteme-vorteile-und-nutzen-einer-einheitlichen-designsprache

Kontext

https://www.forwerts.com/articles/?artikel=an-den-nutzer-kontext-angepasst-eine-retrospektive-hin-zum-responsive-webdesign-und-darueber-hinaus

Konvention & Innovation

https://www.forwerts.com/articles/?artikel=ux-design-zwischen-konvention-und-innovation

Wireframing

https://www.forwerts.com/articles/?artikel=agile-entwicklung-warum-wireframing-heute-anders-gedacht-wird

Wandel Designsysteme

https://www.forwerts.com/articles/?artikel=design-und-systeme-im-wandel