Atomic Design

Um den Prozess des Webdesigns, also der Layouterstellung für eine Website, und die anschließende Umsetzung und Programmierung zu erleichtern, hat der Web Designer Brad Frost 2013 eine neue Methode für ein optimiertes Designsystem namens "Atomic Design" vorgestellt. Bei Atomic Design werden Webseiten hinsichtlich Layouts in kleinste Elemente zerlegt, die man dann zu einem komplexen Gerüst, also der fertigen Seite kombinieren kann. Er wollte damit erreichen, an Design mit einem methodischen Ansatz heranzugehen, um eine konsistente und erweiterbare WEBSITE aufzubauen. Einer der größten Vorteile dieser Vorgehensweise ist es, dass auch in der späteren Umsetzung eine Änderung an nur einer Stelle in der Programmierung vorgenommen werden muss, um etwas global auf der gesamten Website anzupassen. Das ist nicht nur ein Zeit- sondern vor allem auch ein Kostenersparnis.

Der Aufbau einer Website wird bei Atomic Design in 5 Stufen aufgeteilt

Wie man dem Begriff schon entnehmen kann, greift Brad Frost für sein Konzept auf die Chemie zurück. Inwieweit WEBDESIGN mit chemischen Elementen vergleichbar ist, wird im Folgenden erklärt.

• Atome 

Als Atome werden die kleinsten Elemente einer Website bezeichnet, die nicht weiter aufteilbar sind. Sie dienen damit sozusagen als Basiselemente im DESIGNKONZEPT. Diese kleinsten Teilchen sind noch relativ abstrakt gehalten und haben somit allein nicht viel Aussagekraft.

Als Atom wird in einer Webanwendung zum Beispiel ein Button bezeichnet, in dem andere abstrakte Elemente, wie Farbpaletten, Schriftarten oder Animationen verbaut sind. Demnach könnte man theoretisch diesen Button auch noch in seine Einzelteile aufspalten, was jedoch nicht Sinn der Atomic Design-Methode ist, da diese abstrakten Elemente sich auf einer anderen Ebene wie das Atom befinden.

Andere Beispiele für Atome in diesem Verfahren wären HTML-Tags, Fonts oder ein Eingabefeld wie zum Beispiel eine Headerzeile.

• Moleküle 

Wie auch in der Chemie besteht ein Molekül im Designumfeld aus einer Kombination mehrerer Atome. Man bezeichnet sie im Atomic Design auch als kleinstmögliche, fundamentale Einheiten. Der komplexe Aufbau der Moleküle kann durch die Unterteilung in Atome sehr vereinfacht dargestellt werden, was die Handhabung für Webentwickler erleichtert.

Demnach stellt ein Molekül beispielsweise ein vollständiges HTML-Formular auf der Website dar, das aus verschiedenen Elementen, wie mehreren Eingabefeldern besteht.

• Organismen 

Ein Organismus besteht dem chemischen Prinzip folgend aus mehreren Molekülen und definiert beispielsweise Funktionalität und Aussehen einer Website. Dank dieser Vorgehensweise ist es relativ einfach auf die Anforderungen von Nutzern oder auf Kundenwünsche zu reagieren, da durch eine neue Kombination der Moleküle komplett neue Organismen erschaffen werden können. Der Aufbau der Website kann dann sehr einfach und schnell umgeordnet werden, ohne an der Programmierung oder der Grundstruktur viel ändern zu müssen.

Konkrete Beispiele für Organismen in der Webanwendung wären ein vollständiger Seitenheader oder -footer oder auch ein kompletter Newsbereich.

• Templates

Hier endet der Vergleich mit chemischen Elementen, auch, da die Bezeichnung „Template“ für den Kunden einfacher verständlich ist. Templates bestehen aus einer Kombination von Organismen und Bildern und stellen das erste konkrete Ergebnis des WEBDESIGNPROZESSES dar. Dieses Ergebnis vereint alle vorgehenden Schritte in sich und bildet eine Einheit aus den vorher noch abstrakten Elementen (Atome, Moleküle).

Templates sind mehrere Seitenmodelle, die strukturell gleich aufgebaut sind, aber noch keine konkreten Inhaltselemente enthalten.

• Pages

In diesem Stadium werden die Templates, also sozusagen das Grundgerüst, mit individuellem und konkretem Content befüllt. Dieses finale Ergebnis des Webdesignprozesses gibt dann Auskunft darüber, wie effektiv das Designsystem war. Es zeigt, ob die Webentwickler vielleicht noch einmal eine oder mehrere Stufen zurückgehen müssen, um bestimmte Atome oder Moleküle anzupassen. Denn letztendlich wird im Großen und Ganzen das Ziel der optimierten Nutzerfreundlichkeit verfolgt.

Vorteile von Atomic Design

Auch wenn das Endergebnis dem anderer Vorgehensweisen bei der Webentwicklung doch relativ nahekommt, so bringt die Methode des Atomic Design einige entscheidende Vorteile mit sich.

• Atomic Design erleichtert es enorm, maßgeschneiderte Templates für den individuellen Content einer Website zu entwerfen. Da das gesamte Design bis auf Atomebene aufgespalten wird, können die einzelnen Elemente hinsichtlich Usability und User Journey angeordnet werden, wie es die Anforderungen und Wünsche des Kunden verlangen.
• Entwickler müssen nicht mehr auf das komplette fertige Design warten, sondern können schon mit der Programmierung einzelner Atome beginnen. Ist das Design dann fertig, müssen die Atome nur noch an die richtigen Stellen gesetzt werden.
• Hat ein Kunde einen Änderungswunsch zur Darstellung, wie beispielsweise die Änderung einer Buttonfarbe, so muss der Entwickler diese Änderung nur in seiner CSS-Klasse vornehmen und das Design ist global auf der gesamten Seite angepasst. Änderungen oder neue Anforderungen des Kunden können dadurch sehr schnell umgesetzt werden.
• Neue Templates können mit bestehenden Bausteinen (Atomen, Molekülen) relativ schnell und einfach erstellt werden, indem diese einfach neu kombiniert werden. Dadurch können entweder ganz neue Templates zusammengestellt oder aber neue Organismen in schon vorhandene Templates eingefügt werden.
• Durch die erneute Verwendung bereits angelegter Atome, Moleküle, etc. für andere Entwürfe, können Webentwickler Zeit und Auftraggeber Entwicklungskosten sparen. Außerdem sind neue Designentwürfe sehr schnell gestaltet und können somit schneller umgesetzt werden.
• Ein weiterer Vorteil ist, dass bei Änderungen nicht die gesamte Struktur von Grund auf neu entwickeln werden muss, da bereits bestehende Atome immer wieder eingebaut werden können. Das hat zur Folge, dass der User auf der Website einzelne Elemente wiedererkennt und weiß, dass beispielsweise ein Button dieselbe Funktion hat, wie der auf einer anderen Seite.
• Durch den methodischen Aufbau einer Website durch Atomic Design können komplexe Systeme einfach nachvollzogen werden. Der Quellcode ist in der Regel logischer aufgebaut, was Änderungen schneller durchführbar macht, da Entwickler bestimmte Segmente schneller identifizieren können.
• Das wiederum unterstützt und erleichtert auch die Zusammenarbeit unter Webentwicklern. Atomic Design hilft, den Codeaufbau anderer Entwickler schnell zu erfassen und erleichtert somit die Zusammenarbeit untereinander.

Fazit

Atomic Design ist ein Verfahren, mit dem sich der Designprozess logisch und methodisch aufbauen lässt. Es vereinfacht die Zusammenarbeit unter den Entwicklern und macht das gesamte Konzept übersichtlicher und einfacher zu verstehen. Es bringt viele Vorteile für Webentwickler, Web Designer und letztlich Kunden mit sich, da durch den Aufbau und die genaue Planung im weiteren Verlauf Zeit und Kosten eingespart werden können. Werden alle Stufen des Atomic Design sorgfältig durchdacht und Schritt für Schritt umgesetzt, so ist das Resultat eine konsistente, logisch aufgebaute und perfekt an Kundenwünsche angepasste Website.