Das Internet hat einen Paradigmenwechsel in der visuellen Kommunikation bewirkt.

Das seit Jahrtausenden verwendete Strukturierungselement «Seite» ist mit einem Schlag obsolet geworden. Audio-visuelle Medien, Overlays, Navigationssysteme anstelle von Inhaltsverzeichnissen, Scrollen, Swipen und Klicken statt Blättern sind nur einige der kommunkativen Veränderungen.

Aus dieser Tatsache heraus müssen wir uns Gedanken darüber machen, wie wir in Zukunft miteinander kommunizieren wollen und was die Arbeit von Designern sein wird. Designer werden flexiblere Vorgehensweisen entwickeln müssen, indem sie sich auf modulare Systeme und verstärkt auf Interaktionen mit den Nutzern ausrichten müssen. Um in Zukunft in Millionen von Informationseinheiten sichtbar zu sein und vor allem seinen Kunden ein Nutzererlebnis zu bieten, das einen klaren Mehrwert gegenüber herkömmlichen Ansätzen bietet, müssen in der Folge auch die Auftraggeber diesen Wandel verstehen und akzeptieren.

Atomic Design

Atomic-Design-Prinzip

Im Sommer 2013 stellte der amerikanische Frontend-Designer Brad Frost seinen neuen Designansatz «Atomic Design» (http://atomicdesign.bradfrost.com) der Öffentlichkeit vor. Er basiert auf einem designwissenschaftlichen Ansatz, der besagt, dass ein funktionierendes, also gutes Design in all seinen Bestandteilen kohärent und modular aufgebaut sein muss.

Umgekehrt gilt: Zerlegt man eine Website in ihre kleinsten Einzelteile, werden alle Schwachstellen und Widersprüche viel deutlicher sichtbar, als wenn man sie als Ganzes betrachtet.

Im Prinzip ist dieser Ansatz gar nicht so neu. Viele Designer arbeiten schon lange modular. Seit der Art & Crafts-Bewegung und dem Bauhaus gibt es auch ähnliche designtheoretische Überlegungen und Postulate, aber in seiner einfachen Metaphorik und in der auf Websites fokussierten Anwendung, wie Brad Frost sein System beschreibt, ist Atomic Design sehr zeitgemäß, plausibel und vor allem nützlich.

Die Analogie zur physischen Welt, in der Materie aus Atomen und Molekülen besteht, die wiederum Zellen und Organismen bilden, verleiht dem Modell seinen metaphorischen Reiz.

Anstatt die Website selbst zu entwerfen, wird von einem «Atomic Designer» ein Designsystem aufgebaut, das die Grundlage für die zu entwerfende Website bildet. Er beginnt also im Kleinen und arbeitet sich dann Schritt für Schritt zum Großen vor; iterative Rückschritte sind jederzeit möglich und durchaus notwendig.

Die Vorteile dieses Workflows liegen auf der Hand: Inkonsistenzen werden vermieden und das entstehende Design ist ein in sich stimmiges Ganzes. Außerdem ist ein atomares Design technisch einfacher umzusetzen, da HTML und CSS den gleichen modularen Prinzipien folgen.

Im Atomic Design System von Brad Frost werden fünf Komponenten unterschieden:

Atome

  • sind die kleinsten Bausteine im System
  • dienen als generische Bausteine für die Komponenten

Moleküle

  • sind aus Atomen aufgebaut.
  • haben spezifischere Aufgaben als Atome

Organismen

  • sind aus Molekülen und/oder Atomen aufgebaut
  • sind eigenständige, funktionale Bausteine
  • haben einen klar definierten Zweck und können in verschiedenen Kontexten verwendet werden

Templates

  • bestehen aus einer Kombination von Organismen, Molekülen und Atomen
  • stellen eine Struktur und ein Grundgerüst dar

Seiten

  • sind spezifische Ausprägungen der Templates
  • enthalten Inhalte

Zur Erstellung eines Atomic Design Systems haben Brad Frost und sein Freund Dave Olsen das Pattern Lab entwickelt, ein Open Source Tool auf Basis von PHP und Mustache als Template-Engine.

Ich habe einige Projekte damit realisiert. Es funktioniert zwar, aber die Erstellung von Atomic Design Systemen ist mit diesem Tool sehr kompliziert, zeitaufwendig und die Handhabung ist sehr spröde. Patternlab bietet weder eine Benutzeroberfläche noch ein Administrationspanel. Mit seiner Konsolenbedienung richtet es sich eher an erfahrene Frontend-Entwickler als an Designer. Ein Umstand, der mir schon lange ein Dorn im Auge ist, da viele UX Designer nicht über die notwendigen Fähigkeiten verfügen.

Ausserdem sind mir einige Ungereimtheiten in Brad Frosts Ansatz aufgefallen, die mich wirklich gestört haben:

  • Atome bestehen manchmal aus CSS-Attributen und manchmal aus HTML-Tags. Das ist inkonsistent.
  • Die «Seiten»-Ebene ist für den atomaren Designprozess völlig überflüssig und basiert auf der alten, inkonsistenten «Seiten»-Metaphorik. Sie erweitert das Designsystem funktional nicht und bietet keinen Mehrwert.
  • Fünf Ebenen (letztendlich nur vier, da die «Seiten»-Ebene nur eine Verdoppelung der «Template»-Ebene darstellt) waren für mich oft nicht ausreichend, um ein komplexes Designsystem darzustellen.

Das war der Grund, warum ich neben meinen UX-Projekten 2017 mit der Entwicklung eines eigenen Tools begann: AtomicKitchen.

AtomicKitchen

Ich denke, dass ich mit Atomic Kitchen einerseits einige Schwächen in dem theoretischen Unterbau von Brad Frost behoben habe, andererseits aber auch ein viel intuitiveres Werkzeug im Vergleich zu PatternLab geschaffen habe.

Meine Grundidee für AtomicKitchen war es, eine Ebene nur für CSS-Attribute zu erstellen. Die Elemente dieser Ebene stellen die kleinste unteilbare Einheit dar und werden «Styles» genannt.

Nachfolgend werden diese CSS-Styles in einem HTML-Tag zusammengefasst. Durch die spezifische Zusammensetzung der CSS-Styles und einem beispielhaften Inhalt wird jeweils ein bestimmtes «Atom» gebildet. Die Styles bilden also die Eigenschaften der Atome.

Die Atome selbst fungieren als Funktions- oder Inhaltsträger, d.h. sie binden immer einen Inhalt oder eine Funktion, die von einem HTML-Tag umschlossen wird. Ein Atom kann verschiedene Zustände haben, z.B. einen Active- oder einen Mouseover-Zustand. Atome sind somit die kleinsten «Informationseinheiten» im System.

Diese Atome werden zu immer komplexeren Formen zusammengesetzt: Moleküle, Organismen, Segmente und Templates. Insgesamt gibt es nun sechs statt fünf (bzw. vier) Organisationsebenen. Das bedeutet, dass nun komplexere Verschachtelungen möglich sind.

Die Ebene «Seite», die meiner Meinung nach keinen Mehrwert für das atomare Entwurfssystem darstellt, wurde dafür ganz aufgegeben.

Comparing the pattern-structure of Brad Frost's approach and of Atomic-Kitchen

Mit AtomicKitchen ist es nun möglich, ein auf Pattern-basierendes Atomic Design System auf Basis von HTML, CSS und JS zu erstellen, ohne über Programmierkenntnisse verfügen zu müssen. Weder PHP- noch Mustache-Kenntnisse sind erforderlich, lediglich fundierte HTML- und CSS-Kenntnisse sollten vorhanden sein.

Mit AtomicKitchen können Sie schnell einen responsiven Online-Styleguide für ein komplettes Corporate Design oder eine Komponenten-Bibliothek für die technische Umsetzung erstellen. Das komplette Designsystem inklusive aller benötigten Assets kann exportiert und auch offline verwendet werden.

Es eignet sich daher auch als responsives Prototyping-Tool und übertrifft die meisten Click-Dummy-Tools in Sachen Look & Feel bei weitem.

Frameworks wie Bootstrap oder Foundation können per Mausklick in das Designsystem implementiert werden. Für einfache Websites kann der generierte CSS-Code vollständig in die Produktivumgebung übernommen werden.

AtomicKitchen ist seit April 2023 in einer stabilen Version (1.8) verfügbar. Ich selbst arbeite seit 2019 damit und habe eine Reihe von Kundenaufträgen damit realisiert, unter anderem ein umfangreiches Designsystem für den Kanton Bern, das seit vier Jahren von vielen Agenturen und Entwicklungsteams als Single-Source-of-Truth genutzt wird; siehe dazu: https://thomas-sokolowski.com/de/lighting-talk-atomickitchen

Bei Interesse gebe ich gerne per Videokonferenz eine Einführung in AtomicKitchen. Derzeit arbeite ich an einer Dokumentation, die nach und nach vervollständigt wird.

Weitere Informationen gibt es auch auf der Website von AtomicKitchen.