Was ist eine Atomic Design Methodik?

Die Atomic Design Methodik wurde 2013 von Brad Frost, einem US-amerikanischen Front-End-Entwickler, vorgeschlagen. Er verglich UI-Design mit Chemie: Naturstoffe bestehen aus Atomen, Interfaces aus Elementen (Komponenten). Er beschrieb sie in dem Buch "Atomic Design", das sofort große Popularität erreichte, die bis heute anhält.

Beim Atomic Design handelt es sich um eine Methodik zur Aufteilung eines beliebigen Interfaces in funktionale Komponenten, die kleinsten konstituierenden Einheiten, von denen jede ihre eigene spezifische Funktion hat. Diese Einheiten werden dann zu funktionierenden Systemen zusammengesetzt, was besonders praktisch ist, wenn ein so umfangreiches System wie ein Design-System erstellt werden soll.

Das Hauptprinzip des Atomic Designs ist vom Kleinsten zum Größten.

Atomic Design organisiert Komponenten in fünf Kategorien: Atome, Moleküle, Organismen, Templates und Seiten. Im Folgenden betrachten wir jeden Typ einzeln. Kürzer gesagt: ein „Atom“ ist das einfachste Designelement, während ein „Template“ das komplexeste ist. Hier handelt es sich um die ursprüngliche Variante dieser Methodik (2013), die sich im Laufe der Zeit nach neuen Bedürfnissen der Entwicklung von Design-Systemen angepasst hat. Diese Erweiterung der Methodik wird im zweiten Teil des Artikels erläutert.

1. Atome – die minimalen Grundkomponenten des Interfaces: Buttons, Icons, Eingabefelder, Kontrollkästchen, Optionsfelder, Labels. Diese Elemente können nicht ohne Verlust der Funktionalität in kleinere unterteilt werden.

2. Moleküle sind einfache Komponenten, die aus Atomen zusammengesetzt sind. Ein aus Atomen erstelltes Suchformular besteht aus der Verbindung eines Labels mit einem Eingabefeld und einem Button. Diese Verbindung lässt das Molekül bereits eine Funktion beherrschen.

3. Organismen sind unabhängig und relativ komplex in der Struktur des Interfaces und bestehen aus Gruppen von Atomen/Molekülen und sogar noch anderen Organismen. Zum Beispiel kann eine Kopfzeile aus einem Logo, einem Suchformular und mehreren Menüpunkten bestehen. Diese wird später einen Abschnitt einer Seite bilden.

4. Ein Template zeigt die Struktur einer Seite ohne konkrete Inhalte. Es enthält bereits alle notwendigen Organismen, Moleküle und Atome und bildet die Struktur des Inhalts. Der Vorteil besteht darin, dass sich das Template auf die Inhaltsstruktur und nicht auf den fertigen Inhalt fokussiert.

5. Pages oder Seiten sind mit echten Inhalten gefüllte, gebrauchsfertige Templates. Das sind die Seiten, die die tatsächliche Interaktion der Benutzeroberfläche mit dem Inhalt demonstrieren und auch ein Verständnis für die Wirksamkeit des Design-Systems vermitteln. Seiten haben mehrere Funktionen:

• Sie ermöglichen Designern die Durchführung realistischer Usability-Tests.

• Sie zeigen Stakeholdern, wie Benutzeroberflächen für Endbenutzer aussehen werden.

• Es handelt sich um vorgefertigte Layouts, die in Anzeigen und anderen Marketingmaterialien verwendet werden können.

Vorteile von Atomic-Design

Einer der Hauptvorteile des Atomic Designs ist die Möglichkeit, schnell zwischen abstrakt und konkret zu wechseln. Wir können sehen, wie unsere Inerfaces in ihre Bestandteile zerlegt werden und erkennen, wie diese Elemente zusammenkommen, um ihre endgültige Form zu bilden. Darüber hinaus gibt es noch eine Reihe weiterer wichtiger Vorteile:

Rapid-Prototyping

Eine Reihe vorgefertigter Elemente ermöglicht die sofortige Gestaltung der Interfaces. Darüber hinaus können die Organismen, Moleküle oder Atome auf verschiedene Weisen kombiniert werden, um neue Seiten schnell zu erstellen.

Einfacher Komponentenwechsel

Durch das Ändern oder Entfernen eines Atoms oder Moleküls können diese Änderungen problemlos auf alle Elemente der Seite angewendet werden. Mit einfachen Worten: Wenn Sie das untergeordnete Element ändern, ändern sich auch die übergeordneten Elemente.

Konsistenz

Darüberhinaus schafft es eine Konsistenz im Design, da dieselben Atome, Moleküle und/oder Organismen immer wieder verwendet werden. Dies macht in Folge auch den Code wartungsfreundlicher, da bei Änderungen lediglich jener Baustein (Atom, Molekül und/oder Organismus), welcher das Problem verursacht, angepasst werden muss.

Skalierung

Wenn eine Liste von Atomen im Voraus vorbereitet wird, kann ein Template oder eine Seite schnell und effizient erstellt werden, indem die vorgefertigten Komponenten einfach nach Bedarf platziert werden.

Für alle Programmiersprachen geeignet

Atomare Designkomponenten lassen sich gleichermaßen einfach in Markups in JavaScript, CSS und anderen Sprachen integrieren, wodurch der Gesamtcode modularer wird.

Atomic Design ist heute mehr als ein praktisches und vielseitiges Werkzeug. Es ist zudem ein wichtiger Designansatz, eine Methodik, die mit einem tieferen Verständnis der Rolle jeder einzelnen Komponente beginnt. Mit Atomic Design kann schnell ein durchdachtes Design entstehen, welches einfach zu verwenden, zu ändern und weiterzuentwickeln ist. Dies hilft bei der Anpassung an sich ständig wechselnde Technologien und daraus entstehende digitale Produkte.