Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Design-Dokumentation

Definition: Design-Dokumentation umfasst alle schriftlichen, visuellen und interaktiven Unterlagen die Design-Entscheidungen, Gestaltungsrichtlinien, UI-Komponenten, Muster und deren Nutzungsregeln für ein digitales Produkt festhalten. Design-Dokumentation dient als gemeinsame Referenz für Designer, Entwickler, Produktmanager und andere Stakeholder um konsistente Designanwendung sicherzustellen und Onboarding zu beschleunigen. Dokumentations-Formen nach Umfang und Zweck: Style Guide: visuelle Standards (Farben, Typografie, Abstände, Bildsprache); kein oder wenig Code-Bezug; oft statisches PDF oder Webseite; Pattern Library: Sammlung wiederverwendbarer UI-Muster (Formulare, Navigation, Karten) mit Nutzungsrichtlinien und visuellen Beispielen; Design System: vollständiges System aus Designprinzipien, Komponentenbibliothek, Design-Tokens, Code-Komponenten und Dokumentation; lebendig und versioniert; Design Rationale / Architecture Decision Records (ADR): Dokumentation warum bestimmte Design-Entscheidungen getroffen wurden; Kontext, Optionen, Abwägung, Entscheidung; Handoff-Dokumentation: spezifische Entwickler-Übergabe mit Maßen, Abständen, Interaktionsverhalten, Edge-Cases. Qualitätsmerkmal: die Lücke zwischen Design-Intention und Code-Implementierung wird durch gute Dokumentation geschlossen; Studien von Invision/Zeroheight (2022) zeigen dass Teams mit gepflegter Design-System-Dokumentation 35% schnellere Onboarding-Zeiten und 45% weniger Design-Inkonsistenzen in der Produktion aufweisen.

Erläuterung

Die Geschichte der Design-Dokumentation in der Webentwicklung beginnt mit frühen HTML-Stylesheets und Brand-Guidelines der 1990er Jahre, die primär für Print-Medien konzipiert waren und schlecht auf interaktive digitale Produkte übertragbar waren. Die Notwendigkeit systematischer Design-Dokumentation für Webanwendungen wurde bewusst formuliert durch Brad Frost, der in seinem Buch «Atomic Design» (2016, Self-Published; zuvor als Blog-Post 2013 auf bradfrost.com) das Konzept eines Pattern Labs beschrieb: eine lebendige Dokumentation die Designkomponenten direkt aus dem produktiven Code rendert statt als separates statisches Dokument gepflegt zu werden. Frost definierte Atomic Design (Atome → Moleküle → Organismen → Templates → Seiten) als systematischen Ansatz für komponentenbasierte Design-Dokumentation. Storybook (erstmals veröffentlicht als React Storybook durch Kadira im Januar 2016; Umbenennung zu Storybook im Oktober 2016; heute gepflegt von Michael Shilman und dem Open-Source-Maintainer-Team) etablierte sich als De-facto-Standard für lebendige Komponenten-Dokumentation in JavaScript-Ökosystemen: Storybook rendert Komponenten in einer isolierten Umgebung, zeigt alle Varianten (Stories) und integriert Dokumentation direkt im Quellcode (MDX-Format); GitHub-Stars 2024: über 83.000. Nathan Curtis (EightShapes; Washington D.C.) prägte als Design-Systems-Berater die professionelle Design-System-Dokumentations-Praxis durch seinen Blog «EightShapes» und detaillierte Artikel über Komponenten-Dokumentationsstruktur: jede Komponente braucht nach Curtis mindestens eine Beschreibung, Varianten-Übersicht, Verhaltensregeln (Dos and Don'ts), Accessibility-Anforderungen und Code-Referenz. Zeroheight (London; gegründet 2017; Victor Zanoni/Luke Murphy) und Supernova (Prag; gegründet 2018; Jiri Trecak) etablierten sich als spezialisierte Dokumentationsplattformen die Figma-Bibliotheken automatisch mit lebendiger Web-Dokumentation synchronisieren – ein Paradigmenwechsel von manuell gepflegten zu automatisch generierten, immer aktuellen Design-Dokumenten. Figma Dev Mode (eingeführt Juni 2023) integrierte Entwickler-spezifische Dokumentation (CSS-Eigenschaften, Component-Varianten, Design-Token-Referenzen) direkt in Figma als eigenständige Ansicht, was den Handoff-Prozess und einen Teil der Entwickler-Dokumentation in das Design-Tool selbst integriert.

Dokumentationsformen: Style Guide, Pattern Library und Design System

Werkzeuge, Lebendigkeit und Handoff

Praxistipp: Die häufigste Dokumentations-Falle ist der «Big Bang»-Ansatz: alles auf einmal dokumentieren und dann nie mehr aktualisieren. Beginnen Sie stattdessen mit den 20% der Komponenten die 80% aller Interface-Fälle abdecken (Button, Input, Card, Navigation, Modal) und dokumentieren Sie diese vollständig mit Varianten, Dos/Don'ts und Accessibility-Anforderungen. Verknüpfen Sie Figma-Komponenten direkt mit Storybook-Stories wenn Ihr Tech-Stack das erlaubt – dann bleibt Design und Code-Dokumentation automatisch synchron. Dokumentieren Sie besonders das «Warum» von Designentscheidungen in kurzen Decision-Records: diese Information geht sonst verloren und führt in sechs Monaten zu denselben Diskussionen.