Vom Silicon Valley in deine Agentur: Wie du mit Atomic Design ein großartiges Design System entwickelst

arrow_downward

Google hat Material Design, MailChimp nennt es Grid System und Atlassian hat Atlaskit erschaffen. Wir reihen uns in die Liste der Großen ein und können voller Stolz HQ Ease unser Eigen nennen. Aber was hat es eigentlich mit all diesen coolen Namen auf sich? Und wo ist der Zusammenhang mit der Chemie?

Design, Atome und die großen Vorteile, die entstehen wenn beides aufeinander trifft, darum soll es heute gehen: Atomic Design.

 

Was hat Design mit Atomen zu tun? 

Auch wenn Chemie nicht gerade das beliebteste Fach in der Schule ist, von Atomen haben wir alle schon einmal gehört. Und genau dort, bei diesen „kleinsten“ Teilchen, setzt auch die Atomic Design Theory an.

Die Theorie geht auf den amerikanischen Webdesigner Brad Frost zurück. Seine Überlegungen hat er inzwischen for free in einem digitalen Buch zusammengefasst. In fünf Stufen beschreibt er darin, wie man ein eigenes Web Design System entwickeln kann. Dazu zerlegt er, genau wie in der Chemie, Webprojekte in ihre kleinsten Bausteine, die Atome. Was jetzt tatsächlich so trocken wie Chemieunterricht klingt, vereinfacht das Entwickler-Dasein enorm und ist im Moment der letzte Schrei bei der Interface-Designentwicklung.

 

Vom kleinsten Teil zu komplexen Einheiten – So entsteht eine Webseite

Gemäß Brad Frost lässt sich ein Webdesign Prozess in fünf Stufen aufteilen: Atome, Moleküle, Organismen, Vorlagen (Templates) und Seiten. Die fertige Webseite, das Endprodukt, dass auch der User zu sehen bekommt, ist die fünfte Stufe des Atomic Design. Aber was genau steckt eigentlich dahinter und womit fängt man an, wenn man eine neue Webseite designt?

Brad nimmt die Atomic Design Theory wörtlich, auch bei seinem Designprozess sind Atome die kleinsten Bestandteile. In der Praxis kann dies ein HTML-Tag sein. Generell ist ein Atom jede Design-Einheit, die nicht weiter verkleinerbar ist.

Ein Molekül, Stufe 2 der Theorie, setzt sich folgerichtig aus mehreren Atomen zusammen. Ein typisches Beispiel für ein Molekül ist das Suchfeld, das man oft im Seitenheader wiederfindet. Es setzt sich aus drei Atomen zusammen: Dem Label (Suche), dem Eingabefeld (Suchbegriff eingeben) und dem Button (jetzt suchen).

 

Atomic-Design-bei-HQLabs

 

Von der Chemie ins World Wide Web

Mehrere Moleküle, die zusammen eine zielgerichtete Rolle spielen, bezeichnet Brad Frost als Organismus. Übersetzt könnte man den kompletten Header oder Footer als einen solchen bezeichnen. Und wenn wir uns eine fertige Webseite ansehen (Stufe 5) fällt auf, dass sich diese Elemente immer wieder finden lassen. Organismen sind also typische Bereiche, die auf einer Webseite überall benötigt werden.

Hinter jeder finalen Seite liegt ein Template (Stufe 4), eine Vorlage, die ein User im Regelfall nicht zu sehen bekommt. Was für den Betrachter der Webseite unwesentlich ist, ist für den Entwickler umso bedeutsamer. Denn über die Templates fließen die Inhalte auf die späteren Seiten. Eine Webseite besteht in der Regel aus mehreren Templates bzw. Vorlagen. So hat z.B. die Startseite ein anderes Template als eine Detailseite oder der Unternehmensblog.

 

Aha, und warum braucht man das jetzt?

Einige von euch werden jetzt behaupten, dass diese Theorie zwar ganz nett klingt, aber eigentlich nur alter Wein in neuen Kelchen ist. Denn das hinter jeder Website mehrere Templates liegen und wie sich diese zusammensetzen, das war euch vielleicht auch schon vor Brad Frost und seiner chemikalischen Theorie klar. Und ja, das mag zum Teil auch so stimmen.

As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. – Quelle: Brad Frost

Wichtiger, als dieses Wissen über den Aufbau einer Webseite, ist jedoch der Gedanke, der hinter den Annahmen von Brad Frost liegt: Der methodische Aufbau eines Design Systems.

Statt ein fertiges Produkt in seine Einzelteile zu zerlegen, geht es darum, neue Produkte aus kleinen Elementen zu konstruieren. Und dieses Vorgehen hat einen wesentlichen Vorteil: Es entstehen vielfältige konsistente Webprodukte, die stetig erweiterbar sind. So kann ein Atomic Design System ebenso für die Konstruktion einer neuen Anwendung, wie für ein unternehmensweit einheitliches Auftreten in allen Bereichen genutzt werden.

„Designers are tasked with making more products, services, features, content, and functionality for more people, who are accessing our interfaces in more contexts, on more devices, on more browsers, and in more environments than ever before.“ – Quelle: Invision App

Viele kennen das Szenario aus dem Berufsalltag: In fast jedem Unternehmen werden ständig Design-Komponenten gebraucht, von Farben über Layouts bis hin zu Do’s and Dont’s in der Logoverwendung treten nahezu alltäglich Fragen auf – und das nicht immer nur von Designern und Entwicklern. Ein Design System schafft ein teamübergreifendes Verständnis des Marken- und Designauftritts und hilft der ganzen Organisation ein einheitliches Auftreten zu abliefern – bis hin zur Tonalität in Texten. Ein Atomic Design System ist so etwas, wie ein mentales Modell, dass uns hilft User Interfaces in einer systematischen Weise zu betrachten.

Der große Vorteil eines Atomic Design Systems ist die Wiederverwendbarkeit in vielen Produkten, sowie eine einheitliche Dokumentation. Das konsistente Erscheinungsbild der Komponenten vermittelt dem Nutzer ein einheitliches Markenbild und Usability.

 

Die Vorteile eines Atomic Design Systems

Einmal konstruiert, kann ein Atomic Design System beliebig weiterentwickelt und wiederverwendet werden. Und das ist auch der größte Vorteil des Design Systems: Es ist konsistent und theoretisch unendlich erweiterbar.

In der Praxis entstehen neue Templates dann im Handumdrehen. Wird beispielsweise eine neue Detailseite benötigt, greift der Entwickler auf die vorliegenden Atome und Moleküle zurück. Das verringert den Aufwand beim Entwicklungsprozess maßgeblich.

Und das Ganze, ohne bestehende Templates zu verändern, wie Phuc Lee auf seinem Blog zusammenfasst:

„Neue Templates können mit bestehenden Bausteinen konstruiert werden. Ich kann verschiedene Organismen von unterschiedlichen Templates in ein neues Template zusammenfassen oder neue Organismen erstellen und diese in bestehende Templates einbauen, ohne andere Elemente des Templates zu beeinflussen.“ – Quelle: Phuc Lee

Darüber hinaus vereinfacht das Atomic Design auch die Zusammenarbeit: Da Code im Atomic Design so angelegt ist, dass er an anderen Stellen wiederverwendet werden kann, trägt das System dazu bei, Codeaufbau schneller zu verstehen.

Noch dazu wird im Rahmen der Einführung eine hilfreiche Dokumentation geschaffen, die für alle zugänglich ist. Dadurch wird im Regelfall Aufmerksamkeit für das zugrundeliegende Design System geweckt und ein einheitliches Vokabular gefördert.

Wer könnte zu all diesen Vorteilen schon nein sagen?

We’re not designing pages, we’re designing systems of components. – Quelle: Stephen Hay 

 

Atomic Design bei HQ: So entsteht unser Design System HQ Ease

Spätestens beim Stichwort Dokumentation wird jedem von euch aufgefallen sein, dass ein Design System mehr ist, als nur eine hübsche Theorie. Tatsächlich ist die Einführung eines solchen am Anfang vor allem eines: Eine ganze Menge Arbeit.

Denn bevor all die schönen Vorteile eines Atomic Designs ausgeschöpft werden können, muss das Design System aufgesetzt werden. Und das geht nicht von heute auf morgen und schon gar nicht nebenbei und ohne Vorbereitung.

Tatsächlich hängt der Erfolg eines Design Systems meist davon ab, wie übersichtlich man die verschiedenen Elemente der einzelnen Stufen aufbereitet. Klassische Layout-Dokumente, die man sonst vom Webdesign kennt, sind da wenig hilfreich und schlicht nicht mehr ausreichend. Umfangreiche Design Systeme werden in einer sogenannten Pattern Library dokumentiert.

“The cornerstone of pattern-based design and development is the pattern library, which serves as a centralized hub of all the UI components that comprise your user interface.” – Quelle: Brad Frost

Beispiele für erfolgreiche und übersichtlich dokumentierte Design Systeme gibt es zuhauf. Vor allem die Big Player aus dem Silicon Valley machen vor, wie es richtig geht. Googles Material Design oder Atlassians Atlaskit sind für jeden frei zugänglich und nur zwei von zahlreichen bekannten Beispielen.

Gesellschaft bekommen die Großen jetzt von einem komplett neuen Design System: HQ Ease. Dazu an späterer Stelle weitere Updates 😉

 

Design-System-HQ

 

Ein kleiner Einblick in unseren Prozess und unser Toolstack

  • Aufgabenmanagement via Jira
  • Design Erstellung über die Sketch App
  • Übertragung des Designs in SCSS mit direkter Dokumentation via Jekyll und dem Gem (Addon) Hologram
  • Code-Versionsmanagement über git
  • kompilierte CSS-Files können direkt über npm in Webprojekte eingebunden und verwendet werden

 

Und so können Designagenturen vom Atomic Design-Modell profitieren

Atomic Design ist ein noch recht junges Modell, dass sich schrittweise am Markt zu etablieren scheint. Vor allem bei größeren und dauerhaften Projekten bietet es sich an, nach dem Brad Frost-Prinzip zu arbeiten.

Designagenturen, die sich jetzt auf Atomic Design spezialisieren, haben nicht nur die Nase vorn, wenn es um neuste Trends geht, sondern können einen echten Vorteil gegenüber der Konkurrenz feilbieten. Als zusätzliche Leistung könnten sie mit der Entwicklung von Atomic Design Systemen zum begleitenden Partner ihrer Kunden werden – und zwar dauerhaft. Denn wie inzwischen sicherlich deutlich geworden ist, endet der Atomic Design Prozess nicht mit dem Aufsetzen eines einmaligen Designs.

Ein super Beispiel für eine Digital Agentur, die Design Systeme für die Projekte ihrer Kunden aufsetzt ist Sinner Schrader.

Statt dem Kunden mit dem Relaunch einmalig eine neue Webseite zur Verfügung zu stellen, liegen neue Handlungsfelder dann zukünftig in der Erstellung eines Design Systems und der dazugehörigen Pattern Library. Auch die Schulung der Kunden neue Bereiche der Webseite, z.B. Detailseiten, selbstständig zu erstellen, könnte zum Business Case werden.

MerkenMerken

MerkenMerken

MerkenMerken

MerkenMerken


Die GlasQgel abonnieren

mail

 

Schreibe einen Kommentar!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

comment
face
mail
place