In der Designbranche und im Marketing sind kreative Wortschöpfungen und Buzzwords gängig. Im Webdesign trifft man seit 2013 dabei immer wieder auf den Begriff „Atomic Design“.
In Zeiten zunehmender Medien- und Gerätevielfalt, sind „Flexibilität“ und „Agilität“ entscheidende Erfolgskriterien für die Umsetzung einer Webseite oder einer Applikation. Responsives Design auf Basis eines agilen Projektmanagements mit kurzen, iterativen Sprints bildet inzwischen den Prozessstandard.
Responsives Webdesign ist in aller Munde
Reichte es früher dem Auftraggeber nur die Screenversion einer Webseite zu zeigen, gibt es bei der Entwicklung responsiver Webseiten unterschiedlichste Bildschirmgrößen zu berücksichtigen. Diese verändern sich jedoch – je nach technischem Entwicklungsstand der Endgeräte – ständig. De facto sollte ein modernen Webauftritt also auflösungsunabhängig und bestenfalls modular konzipiert werden.
2013 stellte der amerikanische Front-End-Designer Brad Frost seinen Gestaltungsansatz „Atomic Webdesign“ vor. Der Konzeptansatz hinter Atomic Design ist eigentlich banal (dazu später), aber der Kontext in den er sein Konzept stellt, ist intelligent.
Atomic Design orientiert sich an den Begriffen der Chemie. Jede Materie setzt sich aus Atomen und Molekülen zusammen.
Diesen Ansatz überträgt Frost in das Webdesign, denn auch dort werden komplexe Objekte (Bsp. Interactive Slider) in kleinste Bestandteile (HTML-Tag, Headlines, Buttons, Navigationselemente usw.) zerlegt und bauen aufeinander auf.
Einen Vorteil dieser Analogie: Das Prinzip ist auch für Stakeholder und Projectowner nachvollziehbar, die noch nicht mit agilen Entwicklungsmethoden vertraut sind und am liebsten direkt einen fertigen Entwurf sehen möchten.
Atomic Design fördert ein Mindset, bei dem sich sowohl Entwickler als auch Productowner zuerst um die Details und Spezifikationen kümmern, bevor der ganz große Designentwurf gestaltet und präsentiert wird.
Atomic Design – Das Konzept
Das Konzept unterscheidet zwischen fünf verschiedenen Phasen der Entwicklung (die nicht linear ablaufen müssen) bzw. Prozesskomponenten:
1) Atome
Sie bilden als kleinste Einheit die Grundbausteine einer Website. Dazu gehören die Farbpalette, Fonts und HTML-Tags, Formular- und Eingabefelder, Icons und Navigationselemente. Wie in der Chemie können diese nicht weiter zerlegt werden, sind aber auch erst einmal keiner spezifischen Funktion zugeordnet.
2) Moleküle
Moleküle sind eine Kombination verschiedener Atome und bilden grundlegende Funktionselemente einer Webseite. Kombiniert man zum Beispiel ein Eingabefeld mit einem Button und etwas Text, könnte daraus daraus eine Formularbox für eine Newsletter-Anmeldung oder ein Suchformular werden. Moleküle sind weniger komplex und erfüllen häufig wiederholende Aufgaben.
3) Organismen
Organismen wiederum setzen sich aus mehreren Molekülen zusammen und bilden somit verschiedene Funktionsabschnitte einer Website z.B. ein Hero-Parallax-Slider, ein News-Grid mit Filterfunktion oder eine Seitenleiste für Social Media-Kanäle. Organismen bilden also bestimmte Sektionen einer komplexen Seite ab und können in verschiedenen Umfelder eingesetzt und wiederverwendet werden.
Ab hier wird mit der Analogie zur Chemie gebrochen und mit designbezogenen Begriffen gearbeitet:
4) Templates
Templates vereinen mehrere Organismen zu einem ganzheitlichen Layout. Moleküle und Organismen stehen in einem inhaltlichen Kontext zueinander und ergeben das Gesamtdesign der Seite. Allerdings basieren Templates auf fiktiven Inhalten und Platzhaltern.
5) Seiten
Das letzte Stadium der Entwicklung beinhaltet die Seiten, auf denen nun die realen Inhalte eingesetzt werden und die der finalen Webseite oder Applikation entspricht. Hier wird auch noch einmal das Zusammenspiel der Komponenten geprüft und gegebenenfalls überarbeitet.
Das Ganze ist mehr als die Summe seiner Teile
Das ein Designprozess grundsätzlich – ausgehend von einer übergeordneten Konzeptidee – vom kleinsten zum größten Teil verlaufen sollte, dürfte jedem gelernten Kommunikationsdesigner geläufig sein – auch schon vor der Erfindung des WorldWideWeb.
Was hat ein Produktkatalog mit Atomic Design zu tun?
Betrachten wir die Prozesse bei der Konzeption und Gestaltung eines komplexeren Printmediums wie z.B. einem Katalog, werden wir eine vergleichbare Vorgehensweise vorfinden.
Zuerst erfolgt auf Basis des übergeordneten Kommunikationskonzeptes die Entwicklung des Rasters, die Definition der Schriftarten- und Schriftgrößen (Typografie), das Farbklima und die Bildsprache, ggf. noch Tonalität der Texte und die Definition von additiven Gestaltungselementen wie Linien, Flächen usw.
Im zweiten Schritt wird das „Framework“ definiert, also Paginierung, Rubrizierung, die Gestaltung von Titeln, Einleitungstexten, Tabellen, Bild- und Textplatzierungen.
Jetzt werden Seitentypen wie z. B. Produktseiten, Inhaltsangabe, Zwischentitel, Technische Daten, Glossar sowie Imageseiten definiert und mit den Inhaltselementen aus dem zweiten Schritt „befüllt“.
Zu guter Letzt werden die finalen Texte, Daten und Bilder eingefügt, das Gesamtlayout auf Funktionalität und Kommunikationszielsetzung geprüft und gegebenenfalls korrigiert.
Ist Atomic Design „Alter Wein in neuen Schläuchen“ und clevere Selbstvermarktung?
Im Grunde schon. Doch wie bereits weiter oben erwähnt, hilft die Analogie, das Verständnis für die effiziente Umsetzung eines Webprojektes zu verbessern. Da zuerst grobe Inhaltsblöcke und Spezifikationen definiert werden und das Projekt von unten nach oben durchdacht wird, verliert man sich nicht so schnell in Gestaltungsdetails und findet schneller zum Gesamtbild. Das hat auch Einfluß auf die Entwicklung der Code-Blöcke, da man bei deren Entwicklung eher darauf achten wird, dass diese wiederverwendbar und adaptierbar sind. Atomic Design hilft dabei den Überblick zu bewahren.
Weitere Gründe, die für Atomic Design sprechen hat Richard Bray in seinem Artikel „10 reasons you should be using Atomic Design“ vom Juni 2016 auf Creative Bloq zusammengefasst.
Brad Frost erklärt Atomic Design auf seiner eigenen Webseite unter http://atomicdesign.bradfrost.com
