Atomic Design vs. Design Systems: Sprachwirrwarr zurechtrücken

Atomic Design vs. Design Systems: Sprachwirrwarr zurechtrücken

Colorful atomic design components on a gray background
Leigh Anderson
VonLeigh Anderson
Solutions Analyst
April 16, 2020

Atomic Design, komponentenbasiertes Design, modulares Design und Designsysteme: Was ist das alles und was sind die Unterschiede?

 

Über Atomic Design wurde (auch von uns: hier oder hier) in letzter Zeit viel geschrieben. Oftmals scheint aber der Unterschied zwischen Atomic Design und Design-Systemen noch nicht ganz herausgearbeitet zu sein. Legen wir also los!

Auf zum Atem? Auf zum Atom! Atomic Design als Digitale Philosophie

Atomic Design beschreibt die Methode, das visuelle Design einer Website in ihre kleinsten Teile zu zerlegen, die dann standardisiert und wieder zu immer größeren, wiederverwendbaren Objekten zusammengesetzt werden. Atomic Design wird daher manchmal auch als komponentenbasiertes Design bezeichnet, wobei die verschiedenen wiederverwendbaren Objekte als Komponenten bezeichnet werden

Im atomaren Design unterteilen wir Dinge also in die folgenden Kategorien: Atome - Moleküle - Organismen - Vorlagen - Seiten.

  1. Atome 
    Die niedrigste, Teilchen-Ebene: Repräsentiert individuelle Designprinzipien oder grundlegende HTML-Elemente. Diese einzelne Komponente kann eine Schaltfläche, ein Kopfzeilentext oder ein weiteres Element sein, etwas, das „nicht weiter aufgeschlüsselt werden kann um funktionsfähig zu sein“. (Brad Frost)
     
  2. Moleküle 
    Die Element-Ebene: Moleküle sind kombinierte Atome. Ein Molekül kann eine Form sein, die mit einer Schaltfläche gepaart ist, oder eine andere wiederverwendbare Komponente, die auf der gesamten Website mehrmals vorkommt.
     
  3. Organismen 
    Wenn mehrere Moleküle kombiniert werden, bilden sie einen Organismus, der ein komplexerer Teil der UI ist. Ein Beispiel für einen Organismus kann ein Inhaltsraster, ein Menü oder eine Fußzeile sein.
     
  4. Templates
    Eine Vorlage ist ziemlich genau das, was auf Anwender-Seite zumeist genutzt wird: eine Gruppierung von Organismen, die auf Seiten auf der Website wiederverwendet wird. Vorlagen ermöglichen einen modularen Ansatz für die Inhaltsstrukturierung, der mehrere Vorteile bietet. Unter anderem kann die Zeit für die Seitenerstellung für Autoren von Inhalten deutlich verkürzt werden. Weiterhin bleiben Standards für Branding einheitlich. Auch kann man sich (solange das Template korrekt und ordentlich erstellt wurde) auf die Responsivität verlassen, oder beispielsweise - wenn das vorab geklärt und korrekt umgesetzt wurde - auf Accessibility-Standards. 
     
  5. Seiten
    Zuletzt kommt eine Seite, die eine Kombination von Vorlagen ist, die mit echtem Inhalt gefüllt sind. Auf der Seite werden alle verschiedenen Designebenen zu einem fertigen Produkt zusammengefasst.

 

Alle verschiedenen Komponenten der Site stammen aus derselben Codebasis oder demselben Repository, das oft als Pattern Library (Musterbibliothek) bezeichnet wird. Die Pattern Library wird normalerweise in anderen Systemen, beispielsweise Pattern Lab gehostet, das sich über ein Modul, ein Plugin oder eine API in Ihr CMS bzw DXP einbindet. 

Eine gut aufgeräumte Bibliothek lässt sich nahtlos in Content und Publishing Workflows integrieren und dient so als Living Styleguide für die digitale Plattform

Atome, Moleküle, Organismen und Vorlagen werden jeweils in der Pattern Library erstellt und anschließend von einem interdisziplinären Team streng auf Responsivität, Funktionalität, Einhaltung des Brandings, Barrierefreiheit, etc. getestet. Das Endergebnis ist eine Reihe von Komponenten, die zum Erstellen von Seiten und Inhalten wiederverwendet werden können und alle an einem einzigen Ort verwaltet und aktualisiert werden.

Die Atomic Design-Philosophie übersetzt das Ideal des modularen Designs in die Welt des Web und der Digitalisierung. Modulares Design ist eine gefühlt uralte Design-Methode, bei der Objekte in wiederverwendbare und kombinierbare Teile zerlegt werden. Dies vereinfacht den Herstellungsprozess und hält die Kosten niedrig, während dennoch Anpassungen möglich sind. Wir kennen das Prinzip eigentlich hinlänglich aus sämtlichen Industriebereichen, besonders aus der Automobilindustrie, aber natürlich ebenso aus der Möbelindustrie oder der Baubranche, um nur einige wenige zu nennen.

 

Design-Systeme: Die Meta-Ebene

Wenn Atomic Design nun also die Digital-Version des modularen Designs ist, was passiert dann, wenn wir den Rahmen größer spannen? Schließlich sind Webseiten nicht alles, worüber wir sprechen! Wir wollen ja Brand Consistency über alle Kanäle behalten - von Messestand über Popup-Store bis hin zur Unternehmens-Flotte, richtig? Hier kommt das ins Spiel, was wir Design-System nennen.

Designsysteme unterscheiden sich in mehreren wesentlichen Punkten von atomaren Designs. Die einfachste Art, ein Design System zu definieren, ist etwa:

Ein Design System ist das Framework, der Rahmen für alle Design-Entscheidungen.

Ein Design-System führt visuelle Designs über die Website hinaus, indem es digitale Vorlagen bereitstellt, die mit dem Design Ihrer Plattform übereinstimmen. Ein Design-System hilft bei der Standardisierung von Farben, Schriftarten und Layouts: Es ist wie ein Branding-Leitfaden, enthält jedoch Komponenten (einschließlich Atome, Moleküle, Organismen und Vorlagen), die Ihr Team auf Systemen außerhalb Ihrer digitalen Plattform verwenden kann.

Die besten Designs und Designsysteme werden von Teams erstellt, die die Technologie verstehen, mit der ihre Entwürfe ausgeführt werden. Schließlich verhält sich eine Web-App anders als eine Powerpoint-Präsentation, und ein digitaler Kiosk bietet ganz andere Funktionen als ein mobiles Kontaktformular. 

Es ist wichtig, dass das Brand Design auf allen Bildschirmen, Geräten und Technologien, die darauf zurückgreifen, gut funktioniert. Alles andere macht schnell einen unprofessionellen oder seltsamen Eindruck.

Kontaktieren Sie uns, um mehr über unser Know-how im Bereich Designsysteme zu erfahren oder Hilfe bei der Erstellung einer neuen Präsenz zu erhalten, die sich über mehrere digitale Touchpoints und Kanäle erstreckt. Unser Team hilft Ihnen gerne weiter.

Themen:
Design
Atomic Design

Fill out the form to learn how FFW can support your needs.

Weiterlesen:

Blog
Teaser neue Webseite FFW

Unsere Webseite erstrahlt im neuen Glanz!

Blog
Teaser of Eastern bank blog

Neue Fallstudie: Eastern Bank und Join Us For Good

Blog
Happy Holidays teaser blog

FFW wünscht ein frohes Fest und ein gutes neues Jahr

Blog
Teaser of 7 Things Before Starting a Drupal Project blog

7 Dinge, die Sie vor dem Start eines neuen Web-Projekts wissen sollten