ZDF DetLines
- Design Systems
- Design Strategy
- Interaction Design
- Information Architecture
- Cross-Platform
Projekt 4—10
Für den Launch der neuen ZDF-Streaming-Plattform im Jahr 2025 habe ich bei JAKALA die Konzeption und Entwicklung des DetLines Designsystems verantwortet. Gemeinsam mit dem ZDF wurde die Designvision in eine umfassende, plattformübergreifende Komponentenbibliothek überführt. Dieses System bildet das neue digitale Fundament des ZDF: Es garantiert visuelle Konsistenz über alle Produkte sowie Interfaces hinweg und sichert eine effiziente Entwicklung auf Web, Mobile und Smart TV. Zudem bildet diese Arbeit das gestalterische Fundament für die strategische Streaming OS Initiative, die partnerschaftlich mit der ARD umgesetzt wird.
Figma Designsystem
Warum DetLines?
Die Vielzahl an Anwendungen des ZDF machte eine gemeinsame Basis notwendig, um ein inklusives und performantes Streamingerlebnis zu gewährleisten. Das daraus entstandene Designsystem bündelt technisches Knowhow, integriert redaktionelle Anforderungen und beschleunigt Prozesse. Durch wiederverwendbare, konsistent benannte Komponenten in Design und Code lassen sich neue Features deutlich schneller umsetzen; festgelegte Namenskonventionen für Komponenten, Varianten und Zustände sichern das schnelle Auffinden der Bausteine und erleichtern die Abstimmung im Team. Zugleich werden Übergaben präziser, Qualitätssicherungsprozesse effizienter und die Wiederverwendungsrate erhöht, was eine Basis schafft, die Onboarding erleichtert, Wissenstransfer fördert und die Zusammenarbeit zwischen Designteams und Entwicklungsteams stärkt.
Foundation: Tokens, Grids und Styles
Die Grundlage bilden zentrale Designtokens für Farben, Typografie, Abstände, Interaktionen und responsive Grids, die ein konsistentes Erscheinungsbild über alle Touchpoints hinweg sichern und volle Skalierbarkeit gewährleisten: Jede Anpassung wird zentral gesteuert und wirkt sich unmittelbar in allen Produkten aus.
Components, Patterns und Pages
Auf Basis der Designtokens entstehen wiederverwendbare Komponenten wie Buttons, Inputfelder oder Notifications, die sich zu komplexeren Patterns wie Navigationen, Modaldialogen oder Heromodulen zusammensetzen. Diese modularen Bausteine lassen sich flexibel kombinieren und plattformspezifisch adaptieren, sodass markenkonsistente Interfaces entstehen. Plattformspezifische Interaktionen wie Hoverstates und Tastaturfokus sowie der gezielte Einsatz systemeigener Steuerelemente (Native Controls) stellen sicher, dass alle Interfaces konsistent und kontextgerecht umgesetzt werden.
Dokumentation & Implementierung
Alle Regeln, Komponenten und Beispiele sind zentral in Zeroheight dokumentiert und eng mit Codebeispielen in Storybook verknüpft. Eine Single Source of Truth stellt identische Komponenten in Figma, der Dokumentation und im Code bereit. DetLines wird kontinuierlich weiterentwickelt und erhält flexiblere Themingoptionen, eine stärker automatisierte Tokenizationpipeline sowie zusätzliche Guidelines, die neue Features systematisch integrieren.
„Manuel überzeugte mit seinem tiefen Verständnis für nutzerzentriertes Design und einer klaren Designvision. In unserer angenehmen und lösungsorientierten Zusammenarbeit verband er kreative Ideen mit fundierter technischer Expertise. Wir empfehlen ihn sehr gerne weiter.“