Atomic Design – vom Atom bis zur ganzen Seite

Atomic Design ist eine effiziente Design-Methode, welche 2013 erstmals von Brad Frost vorgestellt wurde. Sie ist auf fünf Ebenen aufgebaut. Mittels "Atomen", "Molekülen", "Organismen", "Templates" und "Pages" entsteht ein modulares, dynamisches Designsystem, welches einen iterativen Aufbau von Websites ermöglicht. Wir zeigen Ihnen in welchen Projekten diese Methode sinnvoll eingesetzt werden kann und welche Vor- und Nachteile der Ansatzes mit sich bringt.

Der Grundgedanke von Atomic Design ist es, Projekte in die kleinstmöglichen Elemente zu zerlegen und diese anschliessend so zusammenzusetzen, dass sie eine komplette Website als Endergebnis hervor geht. Brad Frost orientierte sich dabei an der Chemie. Schritt für Schritt beginnt man mit den kleinen Elementen und setzt diese soweit zusammen, bis man sich zum grossen Ganzen – der kompletten Website – vorgearbeitet hat. Aber sehen wir uns dies mal genauer an:

Die 5 Komponenten von Atomic Design

Atome

Ein Atom bildet den Grundbaustein der Website. Atome können Elemente wie Buttons, Farben, Schriften oder Formularfelder sein. Sie sind nicht kleiner zerlegbar und haben an sich keine grössere Funktion, sind aber elementar wichtig für das grosse Ganze.

Moleküle

Moleküle setzen sich aus der Kombination verschiedener Atome zusammen. Sie bilden grundlegende Funktionen wie zum Beispiel die eines Formulars – zusammengesetzt aus verschiedenen Eingabefeldern, Schriften, Buttons etc. Moleküle sind nicht komplex und erfüllen meistens eine sich wiederholende Funktion.

Organismen

Mehrere Moleküle ergeben zusammen verschiedene Funktionsabschnitte der Website – sogenannte Organismen. Konkret können das als Beispiel Header, Footer oder die Navigation sein. Es handelt sich dabei um eine Gruppe von zusammengefassten Molekülen, welche als eigenständige, wiederverwendbare Komponenten dienen.

Templates

Aus mehreren Organismen bildet sich ein Layout – das Template. Hier wird das Gesamtkonzept der Website erstmals sichtbar. Die Konzeption steht im Vordergrund. Es wird also erstmal mit Platzhaltern gearbeitet um einen groben Überblick zu erhalten.

Seiten

Auf den Seiten wird nun der reale Content eingefügt und das Design finalisiert. So entsteht ein realer Eindruck von der schlussendlichen Website. Es wird nochmals überprüft, ob alle Komponenten miteinander harmonieren. Gegebenenfalls werden Anpassungen oder Korrekturen vorgenommen. Weiter werden nun die Variationen der Templates getestet und überprüft, ob alles wie in der Konzeption angedacht funktioniert.

Fazit

Der modulare Ansatz macht es möglich, Websites nach Belieben zusammenzustellen. Die einzelnen Bausteine können mehrfach wiederverwendet werden und stehen als Bibliothek an Funktionen zur Verfügung. Ebenso ist es auch möglich neue Elemente in ein bestehendes Design einzufügen, ohne es auf den Kopf zu stellen. Der Aufbau fördert die inhaltliche Konsistenz, da er sich Schritt für Schritt zusammensetzt. Konsequent angewendet, hilft diese Designmethode Designern sowie auch Programmierern und Kunden dabei, ein Webprojekt von Beginn an strukturierter und simpler zu bearbeiten.

Die Methode erfordert jedoch einen höheren Aufwand als andere Designansätze und eignet sich daher nur für Projekte ab einer gewissen Grösse und Komplexität. Beispielsweise für einen Onepager empfiehlt sich die Methode nicht.

Ihr Autor

Stefan Ladner, Web Engineer

+41 58 219 84 86