Der Ein oder Andere wird diesen Begriff „Atomic Design“ sicher schon einige Male gehört und sich eventuell gefragt haben: „Bitte was?“
Atomic Design bezeichnet die Zerlegung einer Webseite in seine kleinsten Bestandteile, in Atome. Der kleinste Bestandteil einer Webseite ist zum Beispiel ein einzelnes Element. Kann aber auch noch weiter heruntergebrochen werden, auf einzelne Farbpaletten, Schriftarten, etc.
Man unterteilt im Atomic Design in 5 Stufen:
- Atome
- Moleküle
- Organismen
- Templates
- Seiten
Atome
Hierbei handelt es sich, wie zu Anfang schon geschrieben, um einzelne (HTML-)Elemente wie zum Beispiel, anhand eines Web-Interfaces erklärt, ein Form-Element, ein Label-Element, ein Button-Element und natürlich das Input-Element.
Moleküle
Ein Molekül besteht aus mehreren Atomen. In meinem Beispiel wäre es also das aus den einzelnen Elementen zusammengesetzte Formular.
Organismen
Organismen stellen im Atomic Design eine Kombination aus mehreren Molekülen dar. Zum Beispiel könnte ein Header solch ein Organismus sein. Hierin enthalten sind dann Moleküle wie die Navigation, Logo und ein Such-Formular.
Templates
Wir entfernen uns nun von der chemischen Darstellung des Atomic Designs und kommen zu einer, die später auch für Kunden verständlicher ist. Templates sind eine Ansammlung einzelner Organismen, die das Layout unserer späteren Seite festlegen.
Seiten
In dieser Stufe wird das Template nun mit echten Inhalten gefüllt, die das finale Design darstellen.
Die Frage ist nun: „Warum Atomic Design?“
Die Antwort darauf ist recht simpel: „Wiederverwendbarkeit“.