kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Der Design/Development-Workflow und die »Single Source of Truth«

Digitale Design-Projekte sind modular aufgebaut, häufig sogar auf Grundlage eines Design Systems. Doch die starke Trennung der Bereiche Design und Development stellt nach wie vor ein Problem dar. Unternehmen und Agenturen propagieren zwar einen interdisziplinären Design/Development-Workflow, entwickeln dann aber doch zunächst im Design statische UI-Komponenten, die anschließend von Frontend-Teams im Code nachgebaut werden.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Öffentliche Schulungstermine

Grafik-Tools bilden nicht die Realität ab

Erst wenn eine Komponente oder ein Layout mit Code gebaut wurde, sieht man wie das Ergebnis tatsächlich aussieht, und wie der Code in den verschiedenen Browsern und Plattformen interpretiert wird. Alles vorher ist nur eine Skizze – unabhängig davon in welchem Grafik-Tool gearbeitet wurde und wie detailliert der Entwurf ausgestaltet wurde.

Selbst modernste Browser stellen Farben, Abstände, Schriften und native UI-Komponenten mitunter deutlich unterschiedlich dar. Eine gestaltete Grafik kann daher nie perfekt umgesetzt werden, da es mehr als ein Endergebnis gibt. Der Versuch diese Diversität zu normen widerspricht im Kern der Web Design-Philosophie.

Visuelle Abweichungen zwischen Chrome, Firefox und Safari am Beispiel der Website vom Smashing Magazine

Da moderne Weboberflächen nach dem Prinzip Progressive Enhancement realisiert werden, stellt die oben beschriebene Situation für Frontend-Teams nicht zwingend ein Problem dar. Im Gegenteil: Gutes Responsive Design braucht Spielraum um sich flexibel an verschiedene Situationen anpassen zu können.

Zum Problem werden die zahlreichen Unterschiede zwischen Browsern erst, wenn man digitales Design zu visuell denkt, und grafische Perfektion als wichtigsten Qualitätsmaßstab ansetzt. »Pixel Perfect« ist out – zumindest im Web. Wenn diese veraltete Herangehensweise im Projektmanagement fest verankert ist, kann dies in umsetzende Teams zu Schwierigkeiten führen.

Neben den grafischen Qualitäten einer digitalen Oberfläche, können auch Aspekte wie Performance, SEO und Accessibility erst im Browser verlässlich beurteilt werden. Diese Bestandteile eines modernen Designs sind unsichtbar, haben aber erheblichen Einfluss auf die Qualität des Produkts. Auch Google Lighthouse testet Websites u.a. in diesen Kategorien und leitet daraus eine Beurteilung für die Platzierung in der Google-Suche ab.

Der Design > HandOff > Code-Workflow

Meistens entstehen bei der Entwicklung von modular aufgebauten Webprojekten und Design Systemen zwei Bibliotheken:

  1. Das Design-Team erstellt eine visuelle Bibliothek, z. B. in Tools wie Sketch, XD oder Figma. Diese Bibliothek nennt man auch UI Kit.
  2. Das Frontend-Team leitet aus dem UI Kit die Component Library ab. Es werden also alle Komponenten und Bestandteile im Code nachgebaut. Bei größeren Projekten durchaus für mehrere Plattformen (z. B. Web, iOS, Android etc.).

Um die Übergabe von Design an Frontend möglichst unkompliziert zu gestalten, werden von den Grafik-Tools sog. Hand-Off-Funktionen bereitgestellt. Frontend-Teams können somit das schreibgeschützte Design untersuchen und Abstände, Farben, Schriften und weitere hilfreiche Informationen auslesen. Eigenständige Tools wie Zeplin haben sich sogar auf die Übergabe zwischen Design und Development spezialisiert.

Typischer Design/Development-Workflow mit Übergabe (HandOff) von Grafik-Dateien an die Entwicklung

Da der Prozess vom Design in Richtung Entwicklung gedacht wird, müssen visuelle Änderungen im Code »nachgezogen« werden. Es gibt daher faktisch keine zentrale Stelle (Single Source of Truth) an der das Design System definiert wird.

Durch die eingangs beschriebenen Abweichungen zwischen verschiedenen Browsern, können die grafischen UI-Komponenten niemals vollständig den Code-Komponenten entsprechen.

Der Code = Design-Workflow

Sehr modern und interdisziplinär aufgestellte Teams drehen den Workflow teilweise um. Alle Komponenten und übergreifenden Design-Aspekte (Farben, Schriften, Abstände etc.) sind zentral im Code definiert – meist in Form von React-Komponenten oder einer JSON-Datei. In diesen Teams wird der Beruf »Designer« weiter gefasst. Code-Kenntnisse sind fest im Team verankert, weshalb mitunter auch von sog. »Fullstack Designern« gesprochen wird.

Verschmolzener Design/Development-Workflow in interdisziplinären Teams

Damit die Komponenten zum Erstellen von Prototypen in Sketch & Co. genutzt können, rendert ein Build-Prozess die Code-Komponenten in die Grafiktools hinein. Gestalterische Änderungen werden im Code umgesetzt oder sind so vorbereitet, dass sie im Grafiktool konfiguriert werden können.

Es wird somit alles zentral an einer Stelle gepflegt und visuelle Abweichungen zwischen Frontend-Umsetzung und Design-Tool sind ausgeschlossen.

Airbnb hat bereits vor Jahren mit dem Tool react-sketchapp einen entsprechenden Workflow für Sketch präsentiert. Auch für Figma gibt es Lösungen. Design-Tools wie Framer X sind ohne externe Erweiterungen in der Lage React-Komponenten darzustellen. All das setzt aber auch entsprechende Kenntnisse in den Teams voraus.

Fazit

Auch wenn der Code = Design-Workflow unter dem Strich vielleicht schlüssiger erscheint, so sieht die Realität in Unternehmen und insbesondere in Agenturen deutlich anders aus. Interdisziplinäre UX/UI/Frontend-Design Teams, die Design Systeme aus dem Code heraus entwerfen und nutzen sind selten.

Development-Ressourcen für iOS, Web, Android und Flutter sowie Design-Downloads für Sketch, Figma, AfterEffects & Co. in Googles Material Design

Nahezu alle Design Systeme großer Unternehmen beinhalten sowohl ein UI Kit für Designer als auch eine Component Library fürs Frontend. Und die drei populären Design Tools XD, Sketch und Figma unterstützen diesen Workflow. Wohlwissend, dass es am Markt eine deutlich größere Zielgruppe für diese Herangehensweise gibt.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.