«We’re not designing pages, we’re designing systems of components.» – Stephen Hay
Im Gegensatz zu „Flat Design“ oder „Material Design“ ist Atomic Design keine Designsprache. Da stellt sich natürlich die Frage: „Was ist Atomic Design dann überhaupt?“ – Die Antwort ist relativ einfach: Atomic Design ist eine Design-Methode, die die Zusammenarbeit zwischen Designern und Entwicklern massiv vereinfachen soll.
Zurück zur Schulbank: Grundkurs Chemie
Um zu verstehen, worauf Atomic Design aufbaut, unternehmen wir eine Zeitreise zurück in die Schule. Im Chemieunterricht haben wir gelernt, dass ein Organismus aus vielen Molekülen besteht. Diese bestehen wiederum aus vielen Atomen. Organismen > Moleküle > Atome.
Die Methode „Atomic Design“ zerlegt Webprojekte in ihre kleinsten Bausteine um diese anschließend in komplexen Einheiten zu kombinieren. Der Gestaltungsansatz legte im Übrigen der Amerikanische Webdesigner Brad Frost fest.
Die 5 Stufen des Webdesigns:
Wenden wir nun unser Wissen aus dem Chemiegrundkurs an und übertragen dies auf den Webdesign-Prozess:
- Atome
- Moleküle
- Organismen
- Vorlagen (Templates)
- Seiten
Natürlich fällt dem User der Webseite nur die 5. Stufe auf. Wir sehen eine Webseite als Ganzes. Erst beim Interagieren mit der Webseite fällt uns auf, dass sich die meisten Elemente mehrfach wiederholen. Ein Beispiel dafür ist das Kontaktformular. Auf jeder Detailseite findet sich das gleiche Kontaktformular wieder. Die Überschrift, die Eingabefelder und der Button sind identisch. Kommen wir aber nun zur Erklärung der einzelnen Elemente:
1. Atome
Ein Atom ist das kleinste und nicht mehr teilbare Element einer Webseite. Ein Atom kann nur aus einem HTML-Tag, oder einer Font bestehen. Eine Headline ist beispielsweise ein Atom. Aber auch ein Button sehen wir als Atom an. Zwar könnte man ein Button noch aufteilen in die Fläche und in die Beschriftung. Allerdings würden wir dann auch den Zweck aufbrechen. Im Atomic Design muss aber jedes Atom seinen Zweck erfüllen.
2. Moleküle
Ein Molekül ist ein Konglomerat aus mehreren Atomen, die gemeinsam als Molekül eine Aufgabe lösen. Das kann beispielsweise ein vollständiges HTML-Formular sein, oder eine Card aus dem Material-Design.
3. Organismen
Mehrere Moleküle zusammen formen einen Organismus. Ein Organismus kann z.B. ein kompletter Seitenheader sein, oder ein Bereich mit aktuellen Artikeln.
4. Template & 5. Pages
Ab diesem Punkt verlassen wir die Chemie-Analogie. Mehrere Organismen zusammen ergeben das Template. Das Template ist die fertige Seite, allerdings ohne konkrete Inhaltselemente. Pages sind letzten Endes für Besucher die zugänglichen Seiten mit konkreten Inhalten.
Welche Vorteile bietet Atomic Design?
Atomic Design bietet viele Vorteile für die unterschiedlichsten Anwendungsfälle. Ich arbeite mittlerweile in einer Agentur als UX & UI – Designer. Ich bin verantwortlich für die Konzeption und für das Design. Nachdem das Design fertig gestellt wurde wird das an den Entwickler übergeben, der dieses Design dann in HTML und CSS Code umsetzt. Vor der Einführung von Atomic Design in der Agentur hat der Entwickler warten müssen, bis das komplette Design fertig gestellt wurde. Dadurch hatte er viele leere Zeitfenster. Mittlerweile bekommt er schon Atome geliefert, die er in einer CSS-Klasse stylen kann. Er kann Atome, Moleküle und Organismen bereits umsetzen, ohne auf das fertige Design warten zu müssen. Wenn das fertige Design dann geliefert wird, setzt er die Elemente nur noch an die richtig Stelle im Layout und ist dann fertig. Wenn nun noch ein Änderungswunsch vom Kunden kommt wie beispielsweise: „Könnten Sie bitte den Button etwas knalliger machen?“ Dann muss der Entwickler diese Änderung nur in seiner CSS-Klasse durchführen und schon ist das global auf der Seite angepasst. Die meisten Atome und Moleküle sind gleich, oder unterscheiden sich nur in Feinheiten. Dadurch kann sich der Entwickler eine eigene Library aufbauen und die Elemente je nach Projekt etwas anders stylen. Dadurch spart sich der Entwickler eine Menge Zeit, die er sinnvoller einsetzen kann. Ein weiterer nicht zu unterschätzender Vorteil: Alle involvierten Personen „sprechen die gleiche Sprache“. Weil die Atome, Moleküle und Organismen jeweils eindeutig benannt werden gibt es auch keine Missverständnisse mehr. Das Atom „Kaufbutton“ ist klar definiert. Das Molekül „In den Warenkorb legen“ mit den Atomen „Kaufbutton“, „Überschrift“, „Produktanzahlfeld“ ist klar definiert und ersichtlich.
