Was ist Atomic Design in der Webentwicklung?

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“.