“Create design systems, not pages”, fordert der Webdesigner Brad Frost in seinem Online-Buch, in welchem er seine “Erfindung” beschreibt: Das Atomic Design. Der Begriff klingt zugegebenermaßen hip. Für das, was er bietet, vielleicht ein bisschen zu hip – finden viele Webdesigner, Developer und Autoren. Im Netz stößt man vermehrt auf die Bezeichnung “alter Wein in neuen Schläuchen”, wenn über Atomic Design diskutiert wird.
Wollte Brad Frost lediglich ein neues Buzzword schaffen und von der Aufmerksamkeit profitieren? Oder steckt mehr hinter seiner Wortschöpfung?
Atomic Design: Die Theorie
Bei Atomic Design handelt es sich nicht etwa um eine Stilrichtung, sondern um einen Gestaltungsansatz. Brad Frost schlägt damit einen effektiven Prozess vor, wie Webdesigner oder Webdeveloper Design Systeme entwickeln könnten. Hierfür schafft er Analogien zwischen Chemie und Webentwicklung. Den naturwissenschaftlichen Aufbau von Organismen überträgt er symbolisch auf Webseiten. Zuerst fasst er die kleinsten Bestandteile ins Auge – in der Chemie sind dies die Atome. Diese schließen sich zu Molekülen zusammen. Die Moleküle wiederum ergeben als Konglomerat einen Organismus. Danach geht Brad Frost in die Sprache des Webdesigns über und nennt als nächsthöhere Stufe das Template. Am Schluss Kette nach dem Prinzip “von ganz klein nach ganz groß” steht die fertige Webseite.
Atome als kleinste Elemente
Die kleinsten Bestandteile einer Webseite bezeichnet Brad Frost als “Atome”. Es handelt sich um Elemente, die nicht weiter verkleinert werden können. Beispiele dafür sind einzelne Fonts oder HTML-Tags, aber auch Eingabefelder oder Buttons. Alleinstehend haben Atome keinen tatsächlichen Nutzen. Erst nach einem Zusammenschluss gewinnen sie an Substanz. Vereinigt bilden sie die nächsthöhere Stufe, die in der Theorie des Atomic Designs als Moleküle bezeichnet werden.
Es folgen die Moleküle
Ein Molekül besteht aus einem Zusammenschluss verschiedener Atome. Ins Webdesign übertragen bedeutet dies beispielsweise, dass mehrere HTML-Tags ein HTML-Formular bilden können. Die nun etwas komplexer aufgebauten Moleküle gehen nachfolgend einen Schritt weiter und schließen sich zusammen, um etwas “Größeres” zu bilden.
Organismen: Komplex und vielfältig
Die nächsthöhere Stufe stellt der Organismus dar, der aus der Vereinigung verschiedener Moleküle besteht. Je nachdem, welche Moleküle sich miteinander verbinden, variiert der Organismus in nahezu allen erdenklichen Facetten.
Übertragen ins Webdesign versteht Brad Frost unter Organismus das Erscheinungsbild oder das Verhalten einer Webseite. Definiert man einen Organismus, welcher aus einem Suchfeld, einer Auflistung und einem Logo besteht, kann dieser durchs Abändern der kleineren Bestandteile einfacher an Kundenwünsche angepasst werden. Es bietet sich an, auf diese Weise eine schnell veränderbare Grundlage für viele weitere Webseiten zu entwickeln, anstatt immer wieder von “vorn” anzufangen.
Templates: Ab jetzt wird es technisch im Atomic Design
Ab den Templates – der nächsthöheren Stufe im Atomic Design – entfernt sich Brad Frosts Terminologie von der Chemie und geht in die Sprache der Developer über. Templates bestehen aus einem Zusammenschluss an Organismen und sind die Vorstufe des Endprodukts: Der fertigen Webseite.
Der krönende Abschluss: Die fertige Webseite
Nach einer Odyssee, in welcher sich kleine Bestandteile zu immer größeren Elementen zusammenschließen, kommt auch schon das Endprodukt zur Geltung: Die fertige Webseite.
Atomic Design: Innovativ oder banal?
Atomic Design – ein starker Name für eine scheinbar banale Sache. Trotzdem kann der Prozess, eine Webseite zu erstellen, durch Brad Frosts Ansatz vereinfacht und besser organisiert werden.
Anstelle das fertige Endprodukt in Einzelteile zu zerlegen, wird von klein auf mit der Konstruktion der Webseite angefangen. Somit bleibt das System konsistent und erweiterbar.
Außerdem können übergeordnete Organismen und Templates aus bestehenden Elementen zusammengesetzt werden. Bereits existierende Bausteine können für das übergeordnete Konstrukt wiederverwendet werden. Somit spart der Webdeveloper Zeit und behält stets die Übersicht über das Projekt.