Atomic Design - ein Kurzüberblick

Veröffentlicht am 10.07.2020 von Simon Pritzkat-Gerthenrich
Lesezeit ca. 0 Min.

Moderne Websites, Webapplikationen und Apps sollen auf allen denkbaren Geräten und Bildschirmen perfekt funktionieren. Dass Websites responsiv umgesetzt werden, ist seit Jahren Standardanforderung. Hieraus resultieren deutlich gestiegene, wesentlich komplexere und technischere Anforderungen an das Design einer modernen Website. Ein festes Layout (auf einem Din-A4-Blatt) kann keine Lösung sein. Ebenso kann es keine Lösung sein, jeden denkbaren Zustand jeder Einzelseite (z.B. eines Webshops) auszugestalten. Neue Ideen müssen her!

Der Atomic Design-Ansatz stellt eine Methode dar, die insbesondere diese Herausforderung in Angriff nehmen möchte. Der Ansatz geht zurück auf den Webdesigner Brad Frost, der die Prinzipien auf seiner Website im Detail beschreibt.

Grundaufbau des Atomic Designs

Ich möchte nur ganz kurz auf die Grundidee eingehen: Der wesentliche Gedanke ist, dass sich ein Designsystem aus kleinen Teilen aufbauen lässt. Brad Frost nennt diese kleinsten Elemente in Anlehnung an die Chemie “Atome”. Atome bilden Moleküle, Moleküle bilden wiederum Organismen. Am Ende lassen sich aus den Organismen Templates und im Zusammenspiel mit Inhalten ganze Seiten erstellen.

Atome

Atome sind die kleinsten Bausteine des Designs. Sie sind nicht weiter zerteilbar. Ein Atom im Atomic Design könnte z.B. die Gestaltung von Labels, von Headlines oder Buttons sein.

Moleküle

Moleküle sind eine zusammengesetzte Gruppe von Atomen. Sie erfüllen bereits einen praktischen Nutzen, sofern sie in den Gesamtkontext einer Seite eingebettet sind.

Beispiel für ein Molekül könnte die Sucheingabe sein, bestehend aus den Atomen “Headline”, “Inputfeld” und “Button”. 

Organismen

Organismen stellen bereits komplexe Komponenten dar, die aus verschiedenen Atomen und Molekülen aufgebaut sind.

Ein Beispiel könnte der Header- oder Footer-Bereich einer Website sein, der aus einem Atom “Logo”, dem Molekül “Navigation” sowie z.B. dem Molekül “Sucheingabe” zusammengesetzt ist.

Templates

Durch die Komposition mehrerer Organismen im Layout lassen sich Templates erstellen. Ein  Template bietet zum ersten Mal eine Darstellung der Website als Ganzes. Die Umsetzung eines solchen Templates kann bereits als funktionaler Prototyp in HTML realisiert sein, sodass sich das responsive Verhalten testen lässt.

Seiten

Seiten oder auch “Pages” sind mit echtem Inhalt gefüllte Templates. Sie sind der “Proof of Concept”. Wenn sich nun herausstellt, dass Dinge noch nicht ideal funktionieren, lassen sich durch einfache Anpassung der elementaren Bausteine (Atome und Moleküle) Nachjustierungen durchführen, um das Ergebnis zu optimieren.

Weitere Vorteile des Atomic Designs

Neben der einfachen Umsetzbarkeit von responsiven Seiten, gibt es eine Reihe weiterer Vorteile, die dieses System so attraktiv für umfangreiche und langfristig angelegte Webprojekte machen.

Skalierbarkeit

Ergeben sich neue Anforderungen, so können aus den bestehenden Elementen Neue geformt werden. Außerdem kann der “Atom-Baukasten”, sofern zwingend erforderlich, um neue Atome erweitert werden.

Wiederverwendbarkeit 

Definierte Atome des Atomic-Designs können beim Aufbau neuer Moleküle und Organismen wieder verwendet werden. Dies spart Zeit und sichert vor allem Qualität.

Konsistenz

Dadurch, dass das Gesamtdesign auf kleinen, definierten Einheiten basiert, ist sichergestellt, dass komplexere und größere Einheiten immer ein konsistentes Bild ergeben. 

Nachhaltigkeit

Ein konsequent - auch codewise in CSS - im Atomic-Design aufgebautes Projekt lässt sich im Rahmen eines Rebrushs einfach modifizieren und optisch updaten. Anpassungen an den Atomen vererben sich über die gesamten Elemente hinweg, sodass der Aufwand für einen Rebrush deutlich geringer ausfällt.

Die Lösung aller Probleme?

Um diese Methode erfolgreich anzuwenden ist Stringenz, Vorplanung und auch eine gewisse Abstraktionsfähigkeit aller Projektbeteiligten gefordert. Desweiteren ist der initiale Aufwand für das Setup vergleichsweise hoch. Für kleine Onepager oder individuell ausgestaltete Landingpages eignet sie sich daher in der Regel nicht.

Das modulare, aufeinander aufbauende Prinzip des Atomic Designs ermöglicht es aber insbesondere das Design umfangreicher Websites mit vielen generischen Seiten zu definieren. Hier zahlen sich die Aufwände in der Planungs- und Konzeptionsphase schnell aus.

Desweiteren passt das Prinzip ideal zu einer agilen Arbeitsweise, da Anpassungen, Feinjustierungen und Änderungen jederzeit möglich und Teil des Entwicklungsprozesses sind. 

 

Ihr Feedback

Schreiben Sie uns Ihre Meinung zu unserem Blog-Beitrag. Bei Fragen beraten wir Sie gerne und freuen uns über Ihre Nachricht!

Ihre E-Mail Adresse wird nicht veröffentlicht.

* Diese Felder sind erforderlich

Kommentar schreiben

Weitere Artikel

03.10.2020 | Marc Willmann

Ein Compare-Validator für das TYPO3 Form-Framework

Das zu TYPO3 gehörende Form-Framework ist extrem leistungsfähig und erweiterbar. Dennoch stößt man manchmal an Grenzen. In diesem Beitrag entwickelt Marc einen Validator, der ein Feld in Abhängigkeit zu einem anderen Feld prüft. Die Herausforderung hier ist, dass ein Validator in der Regel nur sein eigenes Feld kennt.

Weiterlesen

11.06.2020 | Jan Helke

Mask Export und TYPO3 10 LTS

Der Einsatz einer kostenfreien Open Source Lösung wie TYPO3 darf nicht nur ein Nehmen sein. Gerade wir Agenturen, die damit Geld verdienen, müssen auch Geben können. Deshalb haben wir uns entschlossen, die Extension Mask Export von Nicole Cordes zu unterstützen. Im Artikel von Jan lest ihr mehr über die Hintergründe.

Weiterlesen