Don't you want to read? Try listening to the article in audio mode 🎧
Mit dem Ausdruck Design System wird eine Gesamtheit von Spezifikationen bezeichnet, die es möglich machen, eine User Interface (UI) oder Benutzerschnittstelle zu entwickeln, die in sich stimmig ist was Stil, Farben, Drucktypen und Brand anbelangt und auch mit allen anderen Komponenten, die eine optimierte User Experience (UX) garantieren können. Mit einem Design System werden die Leitlinien, Muster und Regeln für die Planung der UI festgelegt, die die Frontend Entwickler benutzen können, unabhängig davon, welches Gerät sie für die Nutzung eines Inhaltes oder Dienstes ausgewählt haben. Doch wie stark fällt Subjektivität bei der Auswahl der Elemente ins Gewicht, die an der Zusammenstellung der Schnittstelle einer Website oder einer App beteiligt sind? Diese Frage hat sich der Webdesigner Brad Frost gestellt und die Antwort darauf findet sich in einer neuen Methodologie mit dem Namen Atomic Design, die von der Chemie inspiriert ist.
Was ist Atomic Design
Atome sind jene Strukturen, die die Organisation der Materie ermöglichen und sie sind deren kleinste Fraktion. Materie kann verschiedene Zustände annehmen (fest, flüssig, gasförmig), in denen sich die Atome den Molekülen anschließen, welche die Grundeinheit der chemischen Elemente sind. Die Verbindung mehrerer Moleküle führt schließlich zur Formation von Organismen, die mehr oder weniger komplex sein können. Atomic Design zeichnet diesen Vorgang in Teilen nach und identifiziert 5 Phasen (oder Ebenen), die hierarchisch angeordnet sind und mit denen man ein vollständiges Design System erstellen kann. Es handelt sich tatsächlich um eine molekulare Methode, in denen die Elemente, die eine UI darstellen, vor allem als Atome gedacht werden, die sich in Molekülen aggregieren lassen, die sich ihrerseits zu Organismen formieren können.
Die fünf Phasen des Atomic Design
In Anlehnung an die chemischen Prozesse, hat Frost die ersten drei Phasen des Atomic Design in Atome, Moleküle und Organismen eingeteilt. Dran schließen sich zwei weitere Phasen an, Template und Pages. Jede der oben genannten Phasen hat eine spezielle Bedeutung auf dem Weg zur Gestaltung einer Schnittstelle.
Atome
Im Kontext der UI sind die Atome die Elemente, die nicht weiter unterteilbar und deshalb untrennbar sind. Man kann sie als Ziegelsteine bezeichnen, die man zusammen setzt, um ein Haus zu bauen. In der Perspektive der UI-Planung für das Internet, können die Atome mit HTML-Tags, Buttons eines Forms oder mit einem Textfeld verglichen werden. Eine der ureigenen Merkmale der Atome betrifft ihr hohes Abstraktionsniveau, deshalb kann man auch Animationen und Fonts als solche bezeichnen.
Moleküle
Im Gegensatz zu den Atomen, die aus Natur Monaden sind, erscheinen Moleküle als Mengen. Ein Molekül ist im Wesentlichen eine Gruppe von Atomen, die miteinander verbunden werden können, um eine Funktion zu erfüllen. Das Label-Element eines Forms, das Eingabefeld und ein Enter-Button sind für sich genommen unbrauchbare Atome, verbindet man sie jedoch, wird aus ihnen ein Form zur Sendung eines Feedbacks oder zur Formulierung einer Query in einer Suchmaschine. Es gibt mehr oder weniger komplexe Moleküle und, wie es auch bei den Atomen der Fall ist, können sie miteinander verbunden werden, um artikulierte Strukturen zu bekommen.
Organismen
Im Atomic Design ist ein Organismus das Ergebnis einer Verbindung mehrerer Moleküle. Ein gutes Beispiel dafür ist der Header einer Website, deshalb hat Frost ihn ausgewählt, um diese Phase zu beschreiben. Diese kann eine interne Suchmaschine enthalten, ein Menü, ein Brandlogo und die Ikonen für die Verbindung mit sozialen Netzwerken. Jedes dieser Moleküle ist an der Bildung eines Organismus, eben des Headers, beteiligt, aber es gibt verschiedene Organismustypen und ihre jeweilige Art hängt von der Art der Moleküle ab, die in ihnen aggregiert sind. Aus diesem Grund können auch Komponenten der UI als Organismen angesehen werden, wie beispielsweise ein Footer oder der Abschnitt einer Website, der den Content beherbergt.
Template
Mit der Phase Template verlässt das Atomic Design teilweise das von der Chemie inspirierte Modell und beginnt mit der Bestimmung dessen, was das Endergebnis einer UI-Planung sein soll. Ein Template ist nämlich eine Menge von Organismen, die, wenn man sie verbindet, zur Herausbildung eines Schemas (Layout) für die Seiten führt. Dank der Templates ist es möglich, allen Elementen, aus denen ein Layout besteht, einen Platz zuzuweisen. So verfügen alle Komponenten, die an der Bildung einer Schnittstelle beteiligt sind, endlich über eine Struktur. Wollte man Templates definieren, so könnte man sagen, sie lassen sich als Aggregatoren darstellen, die Atomen, Molekülen und Organismen einen Kontext bieten.
Pages
Die Pages bilden die Templates ab, das heißt sie ermöglichen die Visualisierung der UIs in ihrer definitiven Form, einschließlich der Inhalte, die sie aufnehmen werden. Frost definiert die Pages als Instanzen der Templates, da sie eine komplette Darstellung dessen zur Verfügung stellen, was die User sehen werden. Die Pages-Phase ist nicht nur der Höhepunkt des Atomic Design, sondern stellt auch die Gültigkeit des angewendeten Design System auf die Probe. Sollten während der Tests kritische Punkte ausgemacht werden, wird es nötig, bei Molekülen, Organismen und Templates anzusetzen, um die zu einer besseren Leistung der geplanten UI notwendigen Veränderungen durchzuführen.
Die Vorteile der Planung mit Atomen
Frost unterstreicht, dass man Atomic Design nicht als eine Regel ansehen soll, sondern als eine geistige Einstellung, die auf dem Prinzip "do one thing and do it well” beruht, das heißt man soll sich auf die einzelnen Elemente eines Projekts konzentrieren, um diese aufs Beste zu entwickeln. Auf dieser Grundlage kann man auf die eingangs erwähnte exzessive Bedeutung der Subjektivität bei Design Systems zurückkommen, die das Risiko in sich birgt, der Ästhetik mehr Bedeutung und Aufmerksamkeit zu schenken als der Anwendbarkeit. Atomic Design ist hingegen eine skalierbare Methodologie und stark am Problem Solving orientiert. Mit ihm erhält man kohärente Schnittstellen, die vor allem das Nutzerverhalten während der Anwendung berücksichtigen. Da es sich um eine modulare Methodologie handelt, ist es möglich, mit wiederverwendbaren Komponenten zu arbeiten, was eindeutige Vorteile auch für die Produktivität mit sich bringt.
Der UI Design Master von Talent Garden
Wer daran interessiert ist, das Potenzial des Atomic Design und des Design System weiter zu vertiefen, hat die Möglichkeit, am nächsten Kurs zum UI Design Master von Talent Garden teilzunehmen, der vom 6. Mai bis 16. Juli 2022 zum zehnten Mal stattfindet. Die Teilnahme am Masterkurs ist beschränkt auf Spezialisten wie Graphic Designer, Frontend Entwickler, Web und Mobile, Art Director, Web Designer und Digital Project Manager mit mindestens dreijähriger Berufserfahrung, die immer auf dem neuesten Stand des User Interface Design bleiben wollen. Die Zulassung zum Kurs erfolgt per Auswahlverfahren. Die Gesamtdauer des Masterkurses beträgt 120 Stunden und erfolgt im Format blended. Die Unterrichtsstunden unterteilen sich in Inhalte on demand, Learning Live online Sessions und Lektionen in Präsenz auf dem Campus Calabiana von Talent Garden in Mailand. Weitere Informationen finden sich auf der offiziellen Seite des UI Design Master auf der Website von Talent Garden.
Zum Schluss
Atomic Design ist eine Methode, die das Konzept des Design System zur Erstellung einer Benutzerschnittstelle revolutioniert. Inspiriert von der Chemie, unterteilt sie jedes Element einer UI in seine essenziellen und aggregierten Bestandteile und ermöglicht so ihre Zusammenstellung in verschiedenen und immer artikulierteren Formen, bis ein für die Anwendbarkeit optimales Ergebnis erreicht ist.
Artikel aktualisiert am: 09 August 2023
Geschrieben von
Talent Garden, Digital Skills Academy
