Juli 21, 2020 10:00 am
Atome, Moleküle, Organismen ergeben Templates und Pages
Wer diese fünf Begriffe hört, denkt vielleicht erst einmal an den Chemieunterricht zurück. Und genau dort hat die Idee von Brad Forst, dem Erfinder von Atomic Design, auch seinen Ursprung. Eine Website in ihre kleinsten Bausteine zu zerlegen und diese zu optimieren scheint für den erfahrenen Webdesigner nichts Neues zu sein, jedoch wird dieser Herangehensweise immer mehr Bedeutung zugemessen. Warum das so ist, welche Vorteile das Atomic Design mit sich bringt und wie es aufgebaut ist, liest du in diesem Blogbeitrag.
Der Begriff Atomic Design ist wörtlich gemeint und wurde der theoretischen Physik entlehnt. Bezeichnungen, die zum Thema Materie gehören, als Beschreibung für die Herangehensweise zur Erstellung eines Design-Systems zu nutzen, ist passend gewählt. Schon seit Langem arbeiten Webentwickler kleinteilig die Details eines Webdesigns aus und kombinieren dies zu funktionellen Modulen. Die Bezeichnung Atomic Design für dieses Konzept existiert allerdings erst seit weniger als einem Jahrzehnt.
Das Atomic Design baut sich dabei nach folgendem System auf:
- Atom stellt dabei den kleinsten Bestandteil des Webdesigns dar und ist nicht in weitere Elemente aufbrechbar. Ein Atom kann eine Überschrift, Eingabezeile oder Button sein. Diese Elemente, oder besser, Atome erfüllen alleinstehend noch keinen Zweck.
- Erst durch die Zusammensetzung mehrerer Atome entsteht ein sogenanntes Molekül – mit Funktionalität und einer Aufgabe. Innerhalb eines Kontaktformulares beispielsweise bekommen die drei einzelnen Atome Überschrift, Eingabezeile und Button so innerhalb eines Moleküls den Zweck, Kontaktdaten aufzunehmen.
- Die nächst größere Einheit, der Organismus, ist ein Zusammenspiel mehrerer Moleküle und erfüllt gesammelt mehrere Zwecke. Auch als Funktions- oder Layoutblock bezeichnet, besteht z.B. ein Seitenheader oder -footer aus mehreren Molekülen. In der Regel beinhaltet ein Seitenheader das Logo des Unternehmens, ein Primär-Menü, eine Suchleiste und einen Button für die Anmeldung zum Newsletter. Dieses Modul ist im Design aufeinander abgestimmt und wiederholt sich so auf allen weiteren Seiten.
- Aus den entwickelten Organismen lassen sich flexible Templates zusammenstellen. Die Templates werden mit Inhalten gefüllt, sodass komplette Seiten (Pages) entstehen. Oft können Module oder sogar ganze Templates von Webentwicklern für verschiedene Kunden*innen genutzt werden. Durch das Füllen mit individuellen Inhalten und der Anpassung des Corporate Designs (Farben, Schriften) lassen sich so einzigartige Websites gestalten.
Für die Präsentation der neuen Website vor dem Kunden wird das Wireframing genutzt. Hier werden die einzelnen Atome, Moleküle und Organismen inklusive der geplanten Funktionen aufskizziert. Damit wird die Flexibilität des Atomic Design transportiert, während gleichzeitig ein Leitfaden mit organisierter Struktur erhalten wird. Das hilft sowohl das große Ganze zu überblicken als auch die Feinheiten der Atome (wie Funktionalitäten und spezifische Designregeln) genauer zu bestimmen, ohne sich dabei im Detail zu verlieren.
Durch die konzeptionelle Planung mithilfe Hilfe des Atomic Design wird auch die Erstellung des Codes deutlich schlanker. Die hierfür verwendete Strategie nennt sich Atomic CSS. Werden von Anfang an feste Regeln festgelegt, lassen sich die einzelnen Codeblöcke, die unsere Atome, Moleküle und Organismen bilden, strukturiert aufbauen und im späteren Support leichter pflegen. Außerdem wird bei der tiefen Ausarbeitung der einzelnen Atome durch ein pixelgenaues Design die Anpassung an zukünftige technische Errungenschaften erleichtert.
