Responsive Websites (sich den Endgeräten anpassende Darstellungen bzw. Screendesign) sind seit geraumer Zeit zur Standardanforderung bei Neuprojekten/Relaunches von Webprojekten geworden. Was bedeutet dieses Faktum aber für den Designer, der bis vor einigen Jahren quasi statisch gestaltet hat? Die adaptiven bzw. fluiden Designs, die mit responsive Webdesign erzeugt werden, bringen es mit sich, dass plötzlich «viele verschiedene» Versionen eines Designs entstehen. Es muss in Desktopcomputer, Tablets, Smartphones gedacht werden.

Im Sommer 2013 stellte der amerikanische Frontend-Designer Brad Frost den Gestaltungsprozess «Atomic Design» vor. Dieser Designansatz orientiert sich im wörtlichen Sinne an der Chemie. Im Zentrum stehen Atome und Moleküle, die Bestandteil jeder Materie sind. Dieser Gedankengang überträgt Frost auf Webprojekte indem diese in kleinste, wiederverwertbare Teile zerlegt werden. Die einzelnen Teile, die natürlich fortlaufend ergänzt und verändert werden können, werden in einem weiteren Schritt zu komplexen Einheiten miteinander kombiniert. Genau in diesem Vorgehen liegt nun ein grosser Vorteil wenn es um die Gestaltung von responsive Website geht. Die Elemente einer Seite werden anhand den vorhandenen Bedürfnissen zusammengesetzt. Selbstverständlich muss jeweils eine Adaption auf die jeweilige Bildschirmgrösse erfolgen.

Grundsätzlich unterscheidet Brad Frost fünf Komponenten:

Ebene 1 – Atome

Die Atome sind die Grundbausteine einer jeden Website. Dazu gehören Schriften, Buttons, Farben, Transitions, Eingabefelder für Formulare, Animationen etc.. Wie in der Chemie können sie nicht weiter zerlegt werden, haben aber erst einmal keine grössere Funktion.

Ebene 2 – Moleküle

Moleküle sind die Kombination verschiedener Atome und bilden grundlegende funktionalen Elemente des Webprojekts. Sie können ausserdem eigene Aufgaben wahrnehmen: Werden zum Beispiel ein Formular-Label, ein Button und eine Eingabebox zusammengesetzt, ergibt sich daraus ein Suchformular. Moleküle sind allerdings nicht sehr komplex und erfüllen meistens immer wiederkehrende Aufgaben.

Ebene 3 – Organismen

Organismen sind Snippets wie Header, Footer und Navigation. Sie sind eine Gruppe von zusammengefassten Molekülen, die einen funktionierenden Abschnitt der Seite formieren und sollen als eigenständige und wiederverwertbare Komponenten dienen.

Ebene 4 – Templates

Im Template verbinden sich mehrere Organismen zu einem grossen Layout. Die Organismen und Moleküle werden zueinander in Kontext gebracht. Dadurch wird nun das Gesamtdesign der neuen Website sichtbar und begreifbar.

Ebene 5 – Seiten

Während im Template noch mit Platzhaltern gearbeitet wurde, werden auf den Seiten nun die echten Inhalte eingesetzt – die Seite sieht nun so aus, wie sie nachher online aussehen wird. Nun kann nochmals überprüft werden, ob alle Komponenten miteinander harmonieren, um eventuell Moleküle, Organismen und Templates zu überarbeiten. Ausserdem können Variationen der Templates getestet werden: Was passiert zum Beispiel mit dem Layout eines Online-Shops, wenn fünf Produkte im Warenkorb sind und was, wenn es 50 sind?

Brad Frost – Atomic Design – beyond tellerrand 2013

Wieso Atomic Design?

Aufgrund der beschriebenen Herangehensweise ergeben sich folgende Vorteile gegenüber «konventionellen Seiten-Designprozessen»:

Erweiterbarkeit

Die modulare Methode erlaubt es, Seiten nach Belieben zusammenzustellen. So kann man beispielsweise beliebige Organismen von einem bestehenden Template in ein neues portieren. Gleichzeitig ist es möglich neue Elemente in vorhandene Designs einzupassen, ohne alles auf den Kopf zu stellen.

Konsistenz

Durch den schrittweisen Aufbau des Designs entsteht zwangsläufig eine durchgehende Konsistenz. So kann man beispielsweise ein bestehendes Template nehmen und dieses mit Atomen, Molekülen und/oder Organismen befüllen.

Zusammenarbeit

Atomic Design kann auch als Sprache betrachtet werden. Der Vorteil liegt darin, dass diese Sprache von Designern, Programmierern, Projektleitern und auch den Kunden verstanden bzw. gesprochen werden kann. Nur finden die Diskussionen nicht mehr auf «fertigen Seiten» statt, sondern können bereits ab den Atomen geführt werden.