Atomic Design ist ein Begriff, der nun schon eine Weile im Webdesign-Kosmos zuhause ist. Er beschreibt ein Konzept für kleinteiliges UI-Design – hier wird vom Detail hin zum großen Bild gearbeitet.
Schöpfer dieser Methode ist der US -amerikaner und Webdesigner Brad Frost – 2016 erschien zudem sein gleichnamiges Buch.
Wie der Name bereits vermuten lässt, holte sich Frost Inspiration aus den Lehren der Chemie. Hier werden die kleinen Bausteine unserer Welt näher beleuchtet – und Bausteine trifft es schon ganz gut. Es ist gut vergleichbar mit dem Bau eines Legomodells: Die kleinsten Teile werden nach und nach zum großen Ganzen zusammengeführt.
Das Prinzip des Atomic Design stellt jedoch keinen linearen Bauplan für Benutzeroberflächen dar, sondern ist viel mehr als Denkweise zu verstehen, die helfen soll, kohärente und nutzerfreundlichere Interfaces zu gestalten. Das Ziel ist es Systeme zu entwerfen und keine einzelnen Seiten. Hierfür hat Frost 5 Stufen definiert.
5 Abstraktions-Stufen
Atome
Grundlegende HTML-Elemente, wie beispielsweise ein Button, eine Überschrift oder ein Bild.
Moleküle
In der Chemie bestehen Moleküle aus mehreren Atomen - so sind sie im Kontext des Atomic Design HTML-Elemente, die zu einer Einheit zusammengefasst werden.
Organismen
Organismen bestehen aus Molekülen. Im Webdesign entstehen auf dieser Stufe nun ganze Sektionen, zusammengesetzt aus mehreren Molekülen.
Vorlagen bzw. Templates
Die Struktur einer gesamten Seite ohne Inhalt – hier kommen die einzelnen Komponenten erstmals als vollständiges Layout zusammen.
Seiten
Die mit Inhalten befüllte Seite – hier wird das Layout erstmals mit realen Inhalten befüllt und auf die gewünschte Funktionalität getestet.
Mit dieser Hierarchie werden Inhalt und Struktur klar voneinander abgegrenzt. Das bringt einige Vorteile mit sich.
Vorteile
- Flexibilität
Durch den „vom Details ins Grobe“-Ansatz können Layouts bei Bedarf flexibel gestaltet und angepasst werden.
- Funktionalität
Durch das Einbringen der Inhalte erst spät im Designprozess, liegt der Fokus von Beginn an auf der Funktionalität sowie die Nutzerfreundlichkeit der Anwendung.
- Uniformität
Durch vordefinierte Bausteine kann eine Website kohärent und in einheitlichem Design aufgebaut werden. Außerdem ist es so möglich, sobald das Grundsystem steht, Bausteine wieder zu verwenden und kleine Änderungen schnell einzuarbeiten.
Weiterhin erleichtert der Ansatz des Atomic Design die Zusammenarbeit. Mit einem zentralen, klar definierten und immer aktuell gehaltenen Style-Guide alle sind auf einem Stand und Missverständnisse werden vermieden. Auch dient ein solches Design-System als Übersicht, welche Elemente (Atome, Moleküle & Organismen) wo Anwendung finden. Dies kann besonders bei umfangreichen Systemen hilfreich sein.
Herausforderungen
Wer nun glaubt, mit einem einmal angelegten Style-Guide und ausgearbeitetem Design-System ist es getan, hat sich geschnitten. Frost beschreibt ein solches System als eine lebendige, atmende Einheit. Damit die ganze Arbeit nicht umsonst war, muss das System weiterhin auf Stand gehalten und fortgeführt werden. In der sich stetig wandelnden digitalen Welt ist kein Produkt final. So sollten Änderungen oder komplett neue Elemente nicht zuerst in das LIVE-Projekt eingearbeitet werden, nur um danach (vielleicht) in das Design System übertragen zu werden. Solche Anpassungen sollte zunächst in das System eingearbeitet werden, um sicherzustellen, dass dieses 1. aktuell gehalten wird und 2. die darin definierten Design-Standards eingehalten werden.
Quellen
