Was ist AtomicKitchen? Dokumentation
Login
Kontakt
ENDE

Atomic Design

Die modernen Kommunikationstechnologien zwingen uns dazu, unsere tradierten Design- und Entwicklungsmethoden neu zu bewerten. Vor allem Designer müssen sich der Herausforderung stellen, zu überdenken, wie sie zukünftig mit ihren Auftraggebern kommunizieren möchten und was die Ergebnisse ihrer Arbeit sein sollten. Als erste Konsequenz dieses Wandels haben sich unter anderem modulare Gestaltungsprinzipien etabliert, die darauf abzielen, digitale Anwendungen kosteneffizienter sowie qualitativ hochwertiger zu erstellen.

Gutes Design ist modular aufgebaut!

Eine UI-Dokumentation bzw. ein Styleguide ist eine Sammlung von Designelementen und Gestaltungsregeln, die zur Qualitätssicherung eingesetzt wird, wenn ein Design technisch umgesetzt werden soll.

Ein Designsystem hingegen ist viel mehr: Es schematisiert ein Gestaltungskonzept in wiederverwendbare Bausteine. Es ermöglicht auf diese Weise eine systematische und modulare Vorgehensweise in der Konzeption von Artefakten.

Ein Bildausschnitt aus dem Airbnb-Designsystem | Source: www.designsystems.com

«Atomic Design» modularisiert ein Design. Es arbeitet vom Generellen zum Konkreten und setzt aus kleinen Bausteinen immer grössere Module zusammen.

Wozu das Ganze?

Ganz einfach: Weil ein schematisiertes Design auf Basis von Modulen zu einer erheblichen Aufwandsreduzierung in der späteren technischen Umsetzung führt und zudem viel konsistenter ist.

Ein Designsystem ist besonders praktisch, wenn es online verfügbar ist und «Code Pattern» der einzelnen Designelemente bereithält. Da alle Designelemente aus nativen Code bestehen, können sie pixelgenau und 100% responsive dargestellt werden, genauso wie sie in ihrer späteren Anwendung erscheinen. So erhält man schon zu einem sehr frühen Zeitpunkt innerhalb der Konzeption ein echtes «Look & Feel». Dies reduziert nicht nur die Anzahl der notwendigen Korrekturschleifen und den damit verbundenen Kommunikationsaufwand, sondern hilft auch unangenehme Überraschungen zu vermeiden.

1. Sie erhöhen die Qualität Ihres Designs

Ein Designsystem gewährleistet die Konsistenz aller Elemente. Dies führt zu einer höheren Benutzerfreundlichkeit und einem einheitlichen Erscheinungsbild. Es reduziert den visuellen "Wildwuchs" und sichert somit die Designqualität auf lange Zeit.

2. Sie sparen Aufwand und Kosten

Ein Design, das auf einem deduktiven Baukastenprinzip basiert, ist technisch viel einfacher zu realisieren, da auch Code grundsätzlich modular aufgebaut ist. Ausserdem kann es leichter erweitert werden. Beide Faktoren reduzieren den Aufwand und die Kosten bei der Erstellung digitaler Lösungen erheblich.

Zudem ist ein Designsystem das ideale Werkzeug, wenn Designer und Entwickler miteinander kommunizieren und auch, wenn verschiedene Mitarbeiter, Teams oder Agenturen gemeinsam an einem Projekt über einen längeren Zeitraum arbeiten.

Single Point of Truth

Gerade in der Kommunikation zwischen Designer und Auftraggeber kommt es häufig zu Missverständnissen, da Stakeholder, die nur sporadisch zu Präsentationen und Workshops hinzugezogen werden, nicht alle Auswirkungen von Designelementen auf die User Experience oder eine komplexe User Journey nachvollziehen können. Ohne «Look & Feel», d.h. ohne Wahrnehmung des responsiven Verhaltens oder des Ausprobierens möglicher Benutzerinteraktionen gestaltet sich der Designbewertungsprozess auf Kundenseite sehr schwierig und führt letztlich zu vielen unnötigen Änderungswünschen nach dem Golive, nachdem die Auftraggeber zum ersten Mal ihre Anwendung tatsächlich "erleben" können.

Aus diesem Grund werden im Evaluierungsprozess häufig Prototypen eingesetzt. Deren Erstellung ist jedoch sehr zeitaufwendig. Und oft kann der dafür erstellte Code selbst nach erfolgreicher Abnahme nicht in die technische Umsetzungsphase einfliessen, da dort Frameworks oder andere Vorgaben, z.B. die eines CMS, deren Integration erschweren.

Ein weitere Herausforderung ist, dass man heutzutage in Teams an komplexen UX-Projekten arbeitet. Wie führt man die individuellen Arbeitsergebnisse aller beteiligten Designer zu einer konsistenten, widerspruchsfreien Lösungen zusammen?

Es ist offensichtlich: Ein neuer, zeitgemässer Workflow ist von Nöten.

Jedem Designer, der digitale Medien gestaltet, ist mittlerweile klar, dass wir heute keine "Seiten" mehr gestalten, sondern ein System von Komponenten, die modular zusammengeführt werden. Wir designen keine statischen Screens mehr, wir konzipieren interaktive Benutzeroberflächen.

Jedoch zahlen viele Arbeitsabläufe und Tools nicht auf dieses Faktum ein. So wirkt es fast schon absurd, dass viele Auftraggeber in Pitches oder Designpräsentationen immer noch statische Screens sehen möchten. Doch zu ihrer Verteidigung sei gesagt, häufig kennen unsere Auftraggeber weder die beste Vorgehensweise noch ihre Vorteile. Hier stehen die Agenturen in der Pflicht, ihre Auftraggeber auf die verschiedenen Möglichkeiten in der Konzeption komplexer digitaler Lösungen und deren Auswirkungen auf die technische Umsetzung und die Qualitätssicherung ihres Coporate Designs hinzuweisen.

Atomic Design

Im Sommer 2013 stellte der amerikanische Front-End-Designer Brad Frost seinen neuen Gestaltungsansatz «Atomic Design»vor. Dieser nimmt eine für viele bis dato sehr ungewohnte Design-Betrachtungsweise ein, die besagt, dass gutes, sprich funktionierendes Design aus modularen Einzelteilen bestehen sollte.

Umgekehrt gilt: Betrachtet man Designergebnisse mit den Augen eines Atomic Designers, d.h. zerlegt man ein Design in seine Einzelteile, dann werden seine Schwachstellen und Widersprüche viel deutlicher sichtbar.

Im Prinzip ist dieser Ansatz nicht ganz neu. Viele Designer haben intuitiv schon lange «modular» gearbeitet und es gibt ähnliche designtheoretische Ansätze und Postulate in der Gestalttheorie und dem Bauhaus - aber in seiner einfachen Metaphorik und in der auf digitale Anwendungen fokussierten Betrachtung, wie Brad Frost sein System beschreibt, ist Atomic Design sehr zeitgemäss, plausibel und vor allem sehr nützlich.

Die Analogie zur physikalischen Welt, in der sich Materie aus Atomen und Molekülen zusammensetzt, die wiederum Zellen und diese letztendlich alle lebenden Organismen bilden, verleiht dem Modell seinen besonderen Reiz.

So fügt ein Atomic Designer einfache Grundelemente zu komplexen Designkomponenten zusammen. Ähnlich wie mit Legosteinen erstellt er aus den immer gleichen Grundbausteinen eine Vielzahl unterschiedlicher Anwendungen zusammen, die jedoch alle miteinander verwandt sind. Das Baustein-Prinzip führt zu einer Konsistenz und damit zu einem harmonischen Erscheinungsbild aller Artefakte, die mit den gleichen Bausteinen erstellt worden sind.

AtomicKitchen

Auf dieser Grundlage haben wir unsere Anwendung AtomicKitchen entwickelt – denn mit AtomicKitchen können Sie auf sehr einfache Art und Weise ein Atomic Design System erstellen und verwalten. Mit seiner benutzerfreundlichen Benutzeroberfläche hilft es Designern, Redakteuren und Entwicklern bei ihrer täglichen Zusammenarbeit.

Mit AtomicKitchen können Online-Styleguides, UI-Dokumentationen, Brand-Portale sowie Code-Pattern-Bibliotheken erstellt und verwaltet werden, die sowohl als konzeptionelles Endergebnis, aber auch als iteratives Abstimmungswerkzeug zwischen Agentur und Auftraggeber genutzt werden können.

Sie und Ihr Team und natürlich auf Wunsch auch alle Stakeholder erhalten über AtomicKitchen ein vollständiges, pixelgenaues «Look & Feel» Ihrer zukünftigen digitalen Lösung – und das lange vor der eigentlichen technischen Umsetzung. Das garantiert nicht nur einen perfekten Golive, sondern führt auch zu einer Reduzierung des Aufwands – und das nicht nur innerhalb der technischen Realisierung, sondern auch in der nachgelagerten Qualitätssicherungsphase.

Der Code jedes einzelnen Designelements kann einfach per Copy & Paste aus dem Online-Styleguide entnommen werden. Zudem ist das komplette Designsystem inklusive aller notwendigen Dateien vollständig portabel, d.h. es kann exportiert, offline betrachtet oder an Dritte weitergegeben werden.