Atomic Design
Atomic Design ist ein Ansatz im Webdesign, der von Brad Frost entwickelt wurde. Es beruht auf der Vorstellung, dass ein Designsystem ähnlich wie chemische Elemente aufgebaut ist. Der Vorteil dieser Designmethode soll darin bestehen, dass verschiedene Elemente mehrfach verwendet werden können und sich das Webdesign einfach modifizieren lässt.
Hintergrund
Die Bezeichnung „Atomic Design“ geht auf den Webdesigner Brad Frost zurück. Er hat das Designkonzept 2013 vorgestellt und möchte dem Webdesign einen methodischen Ansatz geben.[1]
Seine Inspiration hat Frost aus der Chemie bezogen. Demnach ist das Atom die kleinste Einheit, aus welcher sich unsere Welt zusammensetzt. Mehrere Atome wiederum bilden ein Molekül, das sich wiederum zu größeren Einheiten und Organismen zusammensetzen lässt. Frost übernimmt diesen Aufbau für seinen Ansatz des Atomic Designs.
Der Aufbau von Atomic Design
Atomic Design besteht aus fünf Elementen, die aufeinander aufbauen: Atomen, Molekülen, Organismen, Templates und Seiten.
- Atome: Atome sind bei diesem Designkonzept wichtige Basiselemente. Auf Webanwendungen bezogen sind Atome zum Beispiel HTML-Tags. Atome können darüber hinaus noch weitere abstrakte Elemente enthalten wie Farbpaletten, Schriftarten oder Animationen. Atome kennzeichnet beim Atomic Design, dass sie noch ziemlich abstrakt sind und sie allein noch keinen wirklichen Nutzen haben. Ein solches „Atom“ im Webdesign könnte ein Button oder ein Eingabefeld sein.
- Moleküle: Moleküle bestehen aus der Kombination verschiedener Atome. Somit sind Moleküle im Sinne des Atomic Designs die kleinstmögliche, fundamentale Einheit aus dem Zusammenschluss verschiedener Atome. Aus mehreren Atomen können zum Beispiel Suchformulare für Websites werden. Moleküle können sehr komplex aufgebaut sein. Durch die Untergliederung in Atome wird die Komplexität jedoch einfacher zu handhaben.
- Organismen: Verschiedene Moleküle lassen sich beim Atomic Design zu „Organismen“ kombinieren. Auf diese Weise kann zum Beispiel die Funktionalität sowie das Aussehen einer Website definiert werden. Durch die unterschiedliche Anordnung der Moleküle kann ein Designentwurf trotz aller Komplexität schnell an Nutzer- oder Kundenwünsche angepasst werden. Organismen können zum Beispiel aus einem Logo, einer Hauptnavigation, einem Suchfeld sowie einer Liste bestehen. So kann ein Organismus zum Beispiel als Basis für viele verschiedene Unterseiten entwickelt werden. Durch eine einfache Änderung der einzelnen Moleküle lassen sich neue Organismen bilden, die dann zum Beispiel für eine Produktseite verwendet werden.
- Templates: Durch das Zusammenstellen und Bilden von Organismen entstehen schließlich Templates. An dieser Stelle verlässt Brad Frost auch die Analogie zur Chemie. Für ihn ergibt die Bezeichnung „Template“ schließlich mehr Sinn, da sie für Kunden verständlicher sei. Das Template ist für Frost schließlich das erste konkrete Ergebnis des Webdesignprozesses. Es liefert den Zusammenhang zwischen den ursprünglich noch abstrakten Elementen (Atome, Moleküle).
- Pages: Mit der „Page“ wird das Grundgerüst einer Webseite schließlich mit spezifischen Inhalten gefüllt. Mögliche Platzhalter werden ersetzt durch den individuellen Content. Für Brad Frost ist die letzte Stufe entscheidend dafür, wie effektiv der Designentwurf bzw. das Designsystem ist. In der Folge können Webentwickler wieder eine Stufe zurückgehen, um Moleküle, Organismen oder Templates anzupassen, um zum Beispiel die Nutzerfreundlichkeit der Website zu steigern.
Vorteile von Atomic Design
Atomic Design werden viele Vorteile zugesprochen. Hierzu zählen:
- Wiederverwendbarkeit: Wird ein Atom angelegt, kann es später leicht für andere Entwürfe wiederverwendet werden. Eine erneute Definition wird nicht notwendig. Auf diese Weise können Webentwickler Zeit einsparen. Für Auftraggeber können dadurch die Entwicklungskosten sinken. Zudem sind neue Designentwürfe aufgrund des modularen Aufbaus schneller möglich.
- Einheitlichkeit: Durch den sukzessiven Aufbau eines Designentwurfs kann eine höhere Einheitlichkeit erzielt werden. Je höher die Ebene im Designkonzept, desto weniger Aufwand ist nötig, um Änderungen zu erzielen.
- Erweiterbarkeit: Der größte Vorteil besteht in der einfachen Erweiterung bestehender Systeme. So können neue Atome oder auch Moleküle eingefügt werden, ohne dass dafür die komplette Struktur erneut programmiert oder entwickelt werden muss. Ebenso ist es möglich, die bestehenden Moleküle oder Organismen neu zu kombinieren.
- Handhabung: Selbst komplexe Systeme können durch den methodischen Designaufbau einfacher nachvollzogen werden. Der Quellcode ist in der Regel logischer aufgebaut, sodass Änderungen daran einfacher durchzuführen sind. Entwickler können die betreffenden Code-Segmente schneller identifizieren.
Kritik
Es gibt Kritiker, die Atomic Design nur als „alten Wein in neuen Schläuchen“ betrachten.[2] Webdesign sei ohnehin schon auf natürliche Weise in Templates, Funktions- oder Layoutblöcke untergliedert.
Darüber hinaus folgt modernes Responsive Webdesign oder Progressive Enhancement ähnlichen Regeln, sodass Entwickler und Webdesigner heute Websites nicht zufällg, sondern strukturiert gestalten.
Einzelnachweise
- ↑ Atomic Web-Design bradfrost.com Abgerufen am 22.06.2018
- ↑ Atomic Design, das Baukastensystem mit dem schicken Namen t3n.de Abgerufen am 22.06.2018