Atomic Design in der Praxis
Part II

Designsysteme zur Organisation von Website-Komponenten werden derzeit als Erfolgsmethode für die Herstellung guter Webprojekten betrachtet. In diesem zweiten Teil der Beitragsserie zu Atomic-Design beschäftigen wir uns mit den Problemen und Lösungsansätzen und schließen mit einem Fazit.

Probleme und Lösungsansätze 

Kategorisierungsschema

  • Das Problem: Viele Designmethoden bieten als Grundsystematik zur Organisation von Elementen ein Kategorisierungsschema an. Atomic Design organisiert seine Elemente in Atome, Moleküle, Organismen, Templates und Seiten, wobei Seiten Templates, Templates Organismen und Organismen Moleküleund so weiter referenzieren. Wie jedes Organisationsschema ist auch dieses nicht perfekt. Projekte die derzeit mit Atomic Design arbeiten berichten von Schwierigkeiten, Elemente genau in diese Kategorien einordnen zu können. Wo die Grenze in Bezug auf Atome noch klar definiert ist, ist es bei Molekülen, Organismen und Templates oft eine Streitfrage. Auch ganz allgemeine Stile wie Typografie oder Farbgebung werden oft hinterfragt.
  • Der Lösungsansatz: Das Kategorisierungsschema und die Benennung von Elementen wird eher als Wegweiser zum Aufbau von Atomic Design betrachtet. Deswegen setzen viele komplexe Projekte erfolgreich alternative Kategorien ein. So verwendet beispielsweise Dennis Reimann das Schema mit weniger Aufteilung und benennt die Elemente auf Fundamente, Elemente, Module und der Prototyp (Artikel von Dennis Reimann [GW1]).

Allein die Kategorien zu wechseln kann das Verständnis im Team für die Struktureinheiten bereits stark verbessern.

Komplexe Abhängigkeiten innerhalb und zwischen Komponenten

  • Das Problem: Atomic Design bietet kaum Platz für individuelle Muster, welche nicht als Bezugspunkte dienen oder andere Elemente referenzieren. Oft ist es schwierig Elemente so zu gestalten, dass diese in allen Bereichen eingesetzt und nachträglich ohne Probleme angepasst werden können.
    In einer Komponentenbibliothek wird das Erstellen von Komponenten komplex. Auch einfache atomare Komponenten finden sich oft in Situationen („Schwarzer Button auf schwarzem Grund?“) in welche sie nicht passen.
  • Der Lösungsansatz: Die Isolation der Komponenten ist wichtig, manchmal kann eine spezielle CSS-Regel in einer Komponente, welche in problematischen Situationen eine Kindkomponente verändert, aber durchaus hilfreich sein.
    Alternativ kann auch eine zweite, speziellere Version der Komponente angelegt werden, welche den Kontext genau abbildet. Das bringt zwar etwas Redundanz, vermeidet aber oft komplexe und unschöne Workarounds.

Viele Elemente

  • Das Problem: Atomic Design arbeitet idealerweise mit unabhängigen Einheiten die unverändert in verschiedenem Kontext eingesetzt werden können. Im Projekt entstehen aber oft Situationen, in welchen mehrere Variationen von Elementen erwünscht sind. Baut man zusätzliche Optionen für jedes Element, so werden die Strukturen der Bibliothek noch komplexer und es entstehen viele Redundanzen.
  • Der Lösungsansatz: Mit der Nutzung von Object Oriented CSS [GW2] und Modifikation von allgemeinen Klassen kann man das Multiplizieren von einzelnen Elementen zwecks der Anlegung von speziellen Versionen der Elemente verringern. Die Beispiele für solche Praktik können BEM – Block Element Modifier[GW3]  oder SASS-CSS-Boilerplate [GW4] werden.
Atomic Design in der Praxis – Part II
Beispiel zur Modifikation allgemeinen Klassen: Screenshot von Daigo Fujiwara Projekt [GW5] Presentation

Schlechter Überblick über benutzte und unbenutzte Elemente

  • Das Problem: Es ist kaum zu vermeiden, eine umfangreiche Komponentenbibliothek mit komplexen Strukturen mit Atomic Design zu erstellen. Mit der Zeit kann es schwer nachvollziehbar sein, welche Elemente wo im Projekt eingesetzt oder welche davon verändert und welche schließlich gelöscht wurden. Daher könnte es schwer sein, eine Konsistenz zwischen dem Projekt und der Bibliothek zu halten.
  • Der Lösungsansatz: Mittlerweile gibt es schon mehrere Technologien um Code sauber zu halten. Eine davon kann PurifyCSS sein (zu finden auf GitHub hier[GW6] ), eine Funktion, welche die Inhalte (HTML / JS / PHP / etc.) und CSS durchsucht und nur das verwendete CSS zurückgibt.

Hohe Lernkurve

  • Das Problem: Um Atomic Design richtig anwenden zu können, muss man mit komplexen Bibliotheken arbeiten und sich die Umgebung für die Anwendung gestalten. Dies erfordert meist die Verwendung von Codezentrischen Tools, beispielsweise auch Angaben in der Kommandozeile. Auch die Methodologie selbst und das Aufteilen von Elementen wird bei Atomic Design nach CSS/HTML-Strukturen erfolgen. Es gibt auch keine grafische Oberfläche, mit der man Elemente visuell gestalten kann. Für Designer selbst würde die Arbeit mit Atomic Design deshalb erschwert werden.
  • Der Lösungsansatz: Viele Projekte werden in enger Zusammenarbeit zwischen Designer/innen und Entwickler/innen erfolgen. Die Struktur dieser Projekte gliedert sich oft auf visuelle und funktionelle Teile, wobei Elemente von Designteams beispielsweise mittels Sketch gestaltet und von Entwickler/innen in das System nachgetragen werden (als Beispiel könnte man sich die Case Study vom Re-Design von Family Search Website[GW7]  anschauen). Es ist daher wichtig für die Elemente eine bestimmte Hierarchie zu schaffen und eine gemeinsame Sprache zwischen den Teams zu entwickeln.

Fazit

Mit Atomic Design werden Elemente entsprechend ihrer Komplexität aufgeteilt. Der strukturierte Aufbau ermöglich es neue Seiten schneller zu erstellen und Änderungen an den Elementen auf verschiedenen Produkt-Seiten aufzunehmen. Obwohl es Probleme mit der Kategorisierung und Erstellung von Bibliotheken geben könnte, ist diese Methode wegen ihren vielen Vorteile weiter zu empfehlen.

Atomic Design bietet eine spezifische Sprache zur Organisation von Elementen, welche die Zusammenarbeit zwischen Developer-Teams erleichtert. Das Projekt ist einfach erweiterbar und bietet einen konsistenten UI und UX Design.

Quellen / Links:

  • [GW1]Link: dennisreimann.de/articles/atomic-design-is-messy.html 
  • [GW2]https://github.com/stubbornella/oocss/wiki
  • [GW3]http://getbem.com/
  • [GW4]https://github.com/kianoshp/SASS-CSS-Boilerplate/blob/master/sass/padding-margin.scss
  • [GW5]http://www.daigo.org/2014/11/introducing-daisy-a-sasspattern-lab-workflow-solution-using-vagrant/
  • [GW6]https://github.com/purifycss/purifycss/commits/master
  • [GW7]https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/

Zu Atomic Design in der Praxis – Part I

Wir entwickeln digitale Lösungen mit Leidenschaft

Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.

Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:

Passend zu diesem Thema:

User Onboarding

User Onboarding

User Onboarding ist ein Guide, der bei keiner Anwendung oder App wegzudenken ist.
Es begleitet uns in unserem Weg vom First-Time-User zum Power-User.

Grundlegende Richtlinien für ein gutes UI
Gutes UI

Grundlegende Richtlinien für ein gutes UI

Wer ein gutes UI haben möchten, sollte sich unbedingt ausgiebig mit dem Thema beschäftigen.

Ein UI sollte dem Nutzer behilflich sein, ohne dass es ihm…