Atomic Webdesign – was ist das eigentlich?

Derzeit wird überall über die Vorteile von Responsive Webdesign gesprochen. Oft bleibt dabei aber ein entscheidender Aspekt unerwähnt: So wichtig es ist, sich über das Aussehen zeitgemässer Websites Gedanken zu machen, genauso wichtig ist es aber auch, sich Gedanken über den Designprozess zu machen. Reichte es früher, dem Kunden eine einzige Version der neuen Website zu zeigen, gibt es bei responsiven Websites viele verschiedene Versionen – eben so viele, wie es verschiedene Bildschirmgrössen gibt. Das erschwert nicht nur die Kommunikation mit dem Kunden, sondern kann die Arbeit des Programmierers verkomplizieren.

Im Kleinen beginnen
Im Sommer diesen Jahres stellte der amerikanische Front-End-Designer Brad Frost den neuen Gestaltungsansatz Atomic Webdesign vor. Dieser orientiert sich an der Chemie. Da sich jegliche Materie aus Atomen und Molekülen zusammensetzt, werden auch Webprojekte zunächst in ihre kleinsten Bestandteile zerlegt. Anschliessend werden sie in komplexeren Einheiten miteinander kombiniert. Diese werden wiederum zu responsiven Websites zusammengesetzt und passen sich dann der jeweiligen Bildschirmgrösse an. Man beginnt also im Kleinen, um sich dann nach und nach zum Großen vorzuarbeiten. Der Vorteil: Dadurch sieht man relativ früh bestimmte Teile der Website. Ausserdem lässt sich früher abschätzen, welche weiteren Schritte nötig sind, um die Seite mit allen benötigten Elementen fertigzustellen.

Brad Frost unterscheidet fünf verschiedene Komponenten

  • Atome: Die Atome sind die Grundbausteine der Website. Dazu gehören HTML-Tags wie Formular-Label, Eingabefelder, Buttons, Farbpaletten, Fonts und Animationen. Wie in der Chemie können sie nicht weiter zerlegt werden, haben aber erst einmal keine grössere Funktion.
  • 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 Form-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.
  • Organismen: Organismen setzen sich aus mehreren Molekülen zusammen und bilden verschiedene Funktionsabschnitte einer Seite. Das können zum Beispiel eine Seitenleiste mit Social-Media-Kanälen und entsprechende Follow-Buttons sein. Organismen zeigen somit bestimmte Teile der Seite und ermöglichen einen ersten visuellen Eindruck. Organismen können in verschiedenen Umfeldern wiederverwendet werden.
  • 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.
  • 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?

Teile des Atomic Webdesign-Ansatzes sind bereits seit längerer Zeit im Einsatz, konsequent angewendet aber hilft diese Methode Designern, Programmieren und Kunden dabei, ein responsives Webdesign-Projekt von Anfang an einfacher und strukturierter zu bearbeiten.

Weitere Informationen im kostenlosen Magazin
Die neuste Ausgabe von AM|START, dem Magazin von CS2, steht ab sofort für den Download bereit. Das Schwerpunktthema bildet in dieser Ausgabe der Bereich Responsive Webdesign. Nachdem wir bereits in der Ausgabe 15 über die Grundlagen des Responsive Webdesigns berichtet hatten, behandelt das aktuelle Magazin die detaillierte Umsetzung eines solchen Projekts.

Laden Sie sich hier die neuste Ausgabe kostenlos herunter oder abonnieren Sie die Print-Version.

Daniela Warndorf

Über Daniela Warndorf

Daniela arbeitet als freie Redakteurin und Kommunikationsberaterin mit dem Schwerpunkt Online-Kommunikation. Seit März 2013 unterstützt sie die Redaktion von Zweiblog.
Dieser Beitrag kann auf folgenden seiten gefunden werden: E-Commerce, Online Marketing, Websites und markiert , , , , . Bookmarken permalink.

3 Antworten zu Atomic Webdesign – was ist das eigentlich?

  1. Navin Murpf sagt:

    Super Artikel. Ich persönlich bin auch der Meinung eine Website sollte in diese Komponenten zerlegt werden. Dank diesem Artikel bin ich mit meinem Ansatz wieder etwas weiter gekommen und werde mich Zukünftig mit dem Atomic Design weiter befassen.

  2. Thom sagt:

    Ich habe das Gefühl, dass mittlerweile immer mehr Wert darauf gelegt wird, die Website auf so vielen Endgeräten wie möglich vernünftig darstellen zu können. Macht ja auch Sinn! Wieviele Menschen sind man heute schon durchgehend mit dem Smartphone browsen.

  3. Responsive Design! sagt:

    Den Ansatz finde ich gut, weil ich responsive Design und responsive Webdesign immer noch sehr gerne sehe. Aber ich erkenne darin nicht viel neues, ein Projekt in mehrere Teilprojekte zu zerlegen, der Ansatz “Teilen und Herrschen” ist ja in der Informatik schon immer allgegenwärtig.

Hinterlasse eine Antwort

Deine E-Mail Adresse wird nicht veröffentlicht. Die benötigten Felder sind markiert *

*

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>