Was ist Atomic Design?

Atomic Design ist ein Konzept zur Organisation von Web Layouts und digitalen Produkten. Das Ziel von Atomic Design besteht u.a. darin, komplexe (responsive) Projekte konsistent zu gestalten und übersichtliche Sinneinheiten zu erzeugen. Das wiederum vereinfacht die Zusammenarbeit von mehreren Personen am gleichen Projekt. In diesem Zusammenhang spricht man auch von einer Komponenten-Bibliothek oder – in maximaler Ausprägung – von einem Design-System.

Der Begriff Atomic Design wurde von Brad Frost aus der Wissenschaft abgeleitet. In dem von Ihm erfundenen Konzept werden alle Module einer Website aus elementaren Elementen, den sog. Atomen aufgebaut. Dabei folgt das Konzept folgender Philosophie:

Tokens (später ergänzt)

übergreifende gestalterische Systematik, z. B. Farben, Schriften, Abstände, Formsprache

Atome

einzelne HTML-Elemente, z.B. ein Link

Moleküle

Gruppen von HTML-Elementen. Ein Teaser wird beispielsweise aus einem Link, einem Textabsatz und einer Überschrift gebildet

Organismen

Gruppen von Molekülen, z.B. ein Bereich mit mehreren Teasern, ein Header oder ein Slider

Templates

Eine einzelne Unterseite bestehend aus verschiedenen Organismen

Seiten

Die komplette Website mit all Ihren Inhalten

Atomic Design in der Praxis

Obwohl Atomic Design heute die Grundlage für viele Design- und Development-Prozesse bildet, wird es in der Praxis nur selten in seiner ursprünglichen, reinen Form angewendet. Statt der klassischen Begriffe wie Atome oder Organismen sprechen Teams heute oft von Komponenten, Pattern oder Modulen. Die grundlegende Idee – nämlich UI-Elemente systematisch und hierarchisch aufzubauen – bleibt jedoch erhalten und prägt moderne Designsysteme nachhaltig.