Die modernen Kommunikationstechnologien, allen voran die Nutzung des Internets auf Mobiltelefonen und Tablets, führten zu einem Paradigmenwechsel innerhalb der visuellen Kommunikation.

Den meisten Designern ist dabei klar geworden: Die Metapher „Seite“ hat ausgedient.

Und mehr, wir kommen nicht mehr daran vorbei, zu überdenken, wie wir mit unseren Auftraggebern kommunizieren und was die Ergebnisse einer visuellen Konzeption sein könnten.

Seit dem Mittelalter haben Menschen Informationen vor allem in Büchern organisiert. Deren wichtigstes Strukturelement war die Seite. Als das WorldWideWeb ins Laufen kam, war es klar, dass auch dort Informationen in Seiten organisiert wurden. Lange Zeit hat dies mehr oder weniger gut funktioniert. Jedoch sind wir heute in einer Welt mit unzähligen Ausgabe- und Betrachtungsgeräten angekommen, deren Inhalte sich dynamisch verändern – Animationen, Interaktionen, Informationen vermischen sich im WordWideWeb heutzutage zu einem multidimensionalen Medium – die Metapher „Seite“ stösst hier schon seit langem an ihre Grenzen.

Wenn heute professionell, modernes Webdesign gestalten möchte, kommt nicht vorbei, sich Gedanken um den Workflow zu machen. Den meisten ist dabei klar geworden, dass Photoshop-Layouts allenfalls gut sind, um eine Gestaltungs-Idee zu fixieren oder um Formen und Farben abzustimmen – aber nicht, um zumindest halbwegs stimmig eine angedachte „User-Experience“ wiederzugeben.

Egal ob unterschiedliche Viewports, Mouse- oder Touch-Stati, Dialogboxen, nachgeladener AJAX-Content, interaktive Animationen oder simple Slider – um alle möglichen Zustände einer einzigen Seite abzubilden, würde man bei einem modernen Webdesign unzählige Screens benötigen und diese würden immer noch kein „Look & Feel“ wiedergeben. Auch Click-Dummy-Tools wie InVision schaffen das nur zu einem Bruchteil.

Die Erstellung zahlloser Screens ist zudem extrem zeitaufwendig. Sie sind nicht selbsterklärend und weisen all zu häufig einen zu grossen Interpretationsspielraum auf. Dieser führt vor allem in der technischen Umsetzung häufig zu Missverständnissen und unbeabsichtigten UX-Erlebnissen.

Beim Kunden kommt es dabei häufig zu Missverständnissen, da er sich nicht alle Konsequenzen eines komplexen Nutzungsablaufes, oder des unterschiedlichen responsiven Aussehens völlig bewusst ist.

Dieser Umstand ist aber gerade von den meisten unserer Kunden überhaupt noch nicht erkannt worden, da sie immer noch gerne klassische Screens anfordern und diese vor allem auch als Entscheidungskriterium bei der Auswahl ihrer Internetagentur heranziehen, beispielsweise in Pitchs.

Es ist Zeit, diesen althergebrachten Prozess aufzubrechen und unseren Kunden einen neuen, iterativen Prozess nahezulegen. Zu diesem gehört insbesondere, sich gedanklich und inhaltlich von der Seiten-Metapher zu verabschieden und zu verstehen, dass die Grundlage einer guten Website heutzutage ein Content/Design-System bildet.

Atomic Design

Das Atomic-Design-Prinzip

Im Sommer 2013 stellte der amerikanische Front-End-Designer Brad Frost seinen neuen Gestaltungsansatz „Atomic Design“ (http://atomicdesign.bradfrost.com) vor. Dieser orientiert sich an einer naturwissenschaftlichen Betrachtungsweise von Design, dass funktionierendes, sprich gutes Web-Design in all seinen Einzelelementen konsistent sowie modular aufgebaut sein muss.

Und umgekehrt, dass wenn man eine Website unter der Brille des AtomicDesigns anschaut, sprich ein Design in seine kleinsten Einzelteile zerlegt, all seine Schwachstellen und Widersprüchlichkeiten viel deutlicher hervortreten als im Anwendungszustand, der durch seine Vielfältigkeit Vergleiche und eine ganzheitliche Sicht auf alle Elemente erschwert.

Dieser Ansatz war im Prinzip nicht neu. Viele Designer haben intuitiv schon lange mehr oder weniger modular gearbeitet. Auch gibt es schon seit der Art & Crafts-Bewegung und des Bauhauses ähnliche designtheoretische Überlegungen und Postulate – aber in ihrer simplen Metaphorik und dabei in der Anwendung fokussiert auf Websites, wie Brad Frost sein System beschreibt, ist Atomic Design sehr zeitgemäss, einleuchtend und vor allem nützlich.

Die Analogie zur physikalischen Welt, in der sich Materie aus Atomen und Molekülen zusammensetzen, die wiederum Zellen bilden und die wiederum Organismen bilden, gibt dem Modell sein metaphorisches Rüstzeug. Anstelle die eigentliche Website zu gestalten, baut ein „Atomic-Designer“ an deren Stelle ein Design System auf, welches letztendlich die Grundlage der zu konzipierenden Website darstellt und nicht umgekehrt. Man beginnt folglich im Kleinen und arbeitet sich dann nach und nach zum Großen vor – iterative Rückschritte sind jederzeit möglich und sicherlich notwendig. Der Vorteil dieses Workflosw liegt auf der Hand: man vermeidet Inkonsistenzen und stellt sicher, dass das erstellte Design System aus einem Guss ist. Ausserdem lässt sich ein „Atomic Design“ viel einfacher technisch realisieren, da HTML und CSS, überhaupt das Web den gleichen hierarchischen Prinzipien folgt.

Brad Frosts Atomic Design System unterscheidet fünf Komponenten:

Atome

  • sind die kleinsten Bausteine für ein Interface
  • können nicht weiter zerlegt werden
  • gut als Übersichts-Referenz einsetzbar

Moleküle

  • Wie in der Chemie sind Moleküle eine Kombination mehrerer Atome. Ein Suchfeld besteht somit aus den Atomen Label, einem Inputfeld und eventuel einem Absende-Button.
  • bilden die kleinste Organisationseinheit und bestehen aus mehreren Atomen

Organismen

  • sind Zusammensetzungen aus mehreren Molekülen
  • stellen oftmals alleinstehende, verwendbare Komponenten dar

Templates und Pages

  • sind Zusammensetzungen aus mehreren Organismen
  • geben mögliche Nutzungsszenarien einer Web-Application wieder
  • bilden in der Regel die grösste zusammenfassende Organisations-Einheit

Um nun ein Atomic Design System zu erstellen, hat Brad Frost mit seinem Freund Dave Olsen das sogenannte Pattern Lab (http://www.patternlab.io) ins Leben gerufen, ein OpenSource-Tool mit welchen man über PHP und Mustache als Template-Engine ein modulares Atomic Design System erstellen kann.

Ich habe damit mehrere Projekte umgesetzt, es funktioniert, aber die Erstellung ist sehr aufwendig und die Handhabung sehr spröde. Patternlab bietet keine Benutzeroberfläche oder Administrationspanel an. Es richtet sich mit seiner Konsolen-Arbeitsweise eher an versierte Frontend-Entwickler als an Designer. Ein Umstand, den ich lange als sehr schade empfunden habe, da viele UX-Designer nicht über diese notwendigen Skills verfügen.

Auch erkannte ich im Ansatz von Brad Frost ein paar Inkonsistenzen, die mich doch ziemlich störten:

  • Atome bestehen bei ihm mal aus CSS-Attributen, mal aus HTML-Tags.
  • Die Ebene „Seiten“ erscheint für den Atomic Design Prozess absolut überflüssig und lehnt sich wieder an die alte, nicht stimmigen „Seiten“-Metapher an, funktional erweitert sie das Designsystem nicht und bietet kaum einen Mehrwert.
  • Fünf Ebenen (letztendlich nur vier, da die „Seiten“-Ebene nur eine Doppelung der Template-Ebene darstellt) reichten bei mir häufig nicht aus, um ein komplexes pattern-gestütztes Design System abzubilden.
  • Das war der Grund, dass ich mir neben meinen UX-Projekten begonnen habe, ein eigenes Tool zu entwickeln: Atomic Kitchen.

Atomic Kitchen

Ich denke, dass ich mit AtomicKitchen zum einen den theoretischen Brad-Frost-Unterbau um ein paar Schwachstellen bereinigt habe, zum anderen aber auch im Vergleich zu PatternLab ein wesentlich intuitiveres Tool geschaffen habe.

Mein Idee von „Atomic Design“ sieht als untersten Level eine Ebene ausschliesslich für CSS-Attribute vor. Die Elemente dieser Ebene stellen die kleinste, nicht teilbare Einheit dar – sie werden „Styles“ genannt. Hier werden keine HTML-Tags mehr mit CSS-Attributen vermischt.

Die CSS-Styles werden beliebig an ein HTML-Tag konnektiert und optional mit einer Klassenbezeichnung belegt und bilden in ihrer spezifischen Zusammensetzung ein bestimmtes „Atom“. Die Styles sind somit Eigenschaftsgeber der Atome. Die Atome selbst fungieren als Funktions- oder Inhaltsträger – d.h. sie binden immer einen Inhalt oder Funktion an sich, welcher von den atomaren HTML-Tags eingeschlossen ist. Ein Atom kann diverse Zustände, wie bspw. „hover“ oder auch ein „last-of-type“ einnehmen. Atome stellen die kleinsten Informationseinheiten in diesem System dar.

Atome organisieren sich dann zu immer komplexeren Formen – zu Molekülen, Organismen, Segmenten und Templates. Insgesamt gibt es anstelle von bislang fünf (bzw. vier) nun sechs Ebenen. Somit sind nun auch komplexere Verschachtelungen möglich.

Auf die „Seiten“-Ebene, die meiner Meinung nach dem Atomic Design System keinerlei Mehrwert hinzufügt, wurde völlig verzichtet.

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

Mit AtomicKitchen ist es nun möglich, ohne jegliche Coding-Skills ein pattern-gestütztes Atomic Design System auf HTML-/CSS-Basis zu erstellen. Weder PHP- noch Mustache-Kenntnisse sind von Nöten, ausschliesslich ein fundiertes Wissen an HTML- und CSS sollte vorhanden sein.

Innerhalb kurzer Zeit kann man damit einen responsiven Online-Styleguide erstellen – das komplette erstellte Design System kann inklusive aller notwendigen Dateien exportiert werden und auch offline betrachtet werden.

Somit eignet sich als natives, responsives Prototyping-Tool und übertrifft Click-Dummy-Tools wie Invision oder AdobeEdgeReflow im Look&Feel bei weitem.

Dadurch das man auch ein Framework wie Bootstrap oder Foundation in das Design System implementieren kann, eignet es sich hervorragend als Arbeitsgrundlage für den technischen Umsetzungsprozess. Bei einfachen Websites kann der erstellte CSS-Code fast völlig übernommen werden.

AtomicKitchen liegt derzeit in einem kostenlosen Beta-Release vor. Voraussichtlich im Oktober 2018 gibt es neben der weiterhin kostenlosen Light-Version dann auch eine Enterprise-Version mit erweiterten Funktionsumfang, die unter anderem ein Coworking sowie Sharing der erstellten Styleguides zulässt.

 


http://atomic.kitchen