BuWiK – Online-Publikation mit interaktiven Infografiken
Das iit in der VDI/VDE Innovation + Technik GmbH publiziert den Bundesbericht BuWiK zu Wissenschaftskarrieren in Deutschland. Wir haben die begleitende WordPress-Website mit animierten Infografiken und filterbarer Mediathek realisiert.
Leistungen
- UX/UI Design
- Responsive Design
- Frontend-Development
- Barrierefreiheit
- WordPress–Development
- Interaktive Infografiken
Projektzeitraum
Unsere Aufgabe
Das Institut für Innovation und Technik (iit) in der VDI/VDE Innovation + Technik GmbH erhielt Zuwendungen, um den »Bundesbericht Wissenschaftlerinnen und Wissenschaftler in einer frühen Karrierephase« (BuWiK 2025) zu erstellen.
Pünktlich zum Erscheinen des ca. 240-seitigen Berichts sollte eine neue Website entstehen, die eine interaktive Kurzfassung, detaillierte Unterseiten zu den zentralen Ergebnissen sowie eine filterbare Mediathek beinhaltet. Die im Bericht statisch abgedruckten Grafiken sollten zudem als einbettbare und herunterladbare interaktive Infografiken umgesetzt werden. Der Veröffentlichungstermin war durch einen Pressetermin fest vorgegeben. Der Website-Launch war damit nicht verhandelbar.
Im Kick-off haben wir das Projekt und die besonderen Anforderungen besprochen
Der Projektstart erfolgte durch einen Präsenz-Kick-off in Berlin. In der Vorbereitung sichteten wir umfangreiches Ausgangsmaterial: die Leistungsbeschreibung, das Konzeptpapier des iit sowie Beispiele für interaktive Inhalte und Grafiken, auf die sich der Auftraggeber bezog.
Im Kick-off selbst arbeiteten wir gemeinsam die Anforderungen an die Website und an die interaktiven Grafiken heraus. Besonders wichtig war dabei die Klärung eines komplexen Abstimmungswegs: Das iit verantwortet die Website inhaltlich, muss Design und Inhalte aber mit dem BMBF als Zuwendungsgeber abstimmen. Diese Freigabeschritte mussten wir in die Planung einkalkulieren.
Konzept und Informationsarchitektur haben wir iterativ entwickelt
Im Anschluss an den Kick-off planten wir Seitentypen, User Flows und die Informationsarchitektur der Website. Da der BuWiK wie ein strukturiertes Sachbuch aufgebaut ist – mit Einleitung, thematischen Kapiteln und zentralen Ergebnissen – musste das Navigationskonzept diesen Aufbau widerspiegeln, ohne die Komplexität des Berichts eins zu eins auf die Website zu übertragen.
Wir entwickelten eine Struktur, die drei zentrale Anforderungen sicherstellte: Eine interaktive Kurzfassung, detailliert beschriebene Ergebnisse und eine Mediathek für den Download der Materialien.
Die Sitemap und die Seitentypen wurden in Figma dokumentiert und iterativ abgestimmt. Parallel legten wir fest, welche CMS-Module für die spätere redaktionelle Pflege notwendig sein würden.
In der Design-Phase haben wir den Look der Print-Welt ins Web übertragen
Das Design der Website orientierte sich am Corporate Design der Printversion des Berichts. Die Farbwerte wurden uns vom Auftraggeber zur Verfügung gestellt. Unsere Aufgabe war es, diese für den digitalen Einsatz zu adaptieren – mit besonderem Blick auf Kontraste und Lesbarkeit am Bildschirm.
Wir entwickelten verschiedene Varianten für Startseite und Kapitelseiten und stellten diese dem iit zur Abstimmung vor. Das iit leitete die Designs intern an das BMBF weiter, was die Abstimmungsschleifen verlängerte. Nach Abnahme des Grobdesigns erarbeiteten wir die vollständigen Screens aller Seitentypen und Module.
Den Workflow zur Erstellung der Animationen haben wir detailliert besprochen
Die Anforderungen an die Infografiken waren ungewöhnlich: Die Grafiken sollten animiert, barrierefrei, extern verlinkbar, selbstgehostet, in andere Websites einbettbar und in verschiedenen Formaten herunterladbar sein.
Einen fertigen Werkzeugkasten für all das gibt es nicht, zumindest nicht innerhalb des Budgets. Wir evaluierten daher verschiedene Ansätze: Flourish als Datenviz-Plattform, Chart.js als JavaScript-Bibliothek, Rive als Animationstool sowie After Effects für SVG-Animationen.
Nach intensiver Recherche, der Erstellung von Test-Grafiken und diversen internen Abstimmungsrunden entschieden wir uns für einen handhabbaren Workflow: Die Grafiken werden für den Print-Bericht in Adobe Illustrator aufgebaut, als SVG exportiert und die Animationen anschließend mit der JavaScript-Bibliothek Motion One realisiert. Dieser Ansatz ermöglichte uns die volle Kontrolle über Barrierefreiheit, Einbettbarkeit und Downloadformate.
Die animierten Infografiken haben wir aus Druckdaten abgeleitet
Die statischen Druckgrafiken wurden von einem Verlag erstellt, der die Printversion des Berichts verantwortete. Wir standen in engem Kontakt mit dem Verlag, um die Rohdaten und Illustrator-Dateien zu erhalten, die als Ausgangsmaterial für unsere Webversionen dienten.
Die gelieferten Dateien waren für den Druck optimiert und mussten für das Web erheblich nachbearbeitet werden: Farben, Schriften, Strukturen und Dateipfade mussten bereinigt und auf unseren Animationsworkflow abgestimmt werden. Wir entwickelten dafür ein standardisiertes Template, das den Aufbereitungsprozess für alle rund 20 Grafiken vereinheitlichte.
Jede Grafik wurde einzeln konzipiert, in Figma animiert dargestellt, in Illustrator aufgebaut, als SVG exportiert und schließlich mit Motion One animiert. Neben der animierten Darstellung entwickelten wir für jede Grafik eine tabellarische Ansicht der Rohdaten sowie eine barrierefreie Textalternative.
Das CMS haben wir als Custom WordPress FSE-Theme umgesetzt
Parallel zur Grafikentwicklung bauten wir die Website als Custom Full Site Editing-Theme in WordPress auf. Alle Inhaltsmodule wurden als eigene Block-Patterns umgesetzt, sodass der Auftraggeber die redaktionellen Arbeiten selbstständig vornehmen kann. Sämtliche Seitenstrukturen, Navigationen und dynamisch generierten Texte wurden vollständig übersetzt.
Für die Mediathek entwickelten wir ein System auf Basis von Custom Post Types und Custom Taxonomies, das Dokumente, Grafiken, PDFs und Begleitstudien filterfähig kategorisiert. Nutzerinnen und Nutzer können die Inhalte nach Kategorie, Sprache und Grafiktyp filtern und direkt herunterladen.
Kurz vor dem Launch musste das Konzept angepasst werden
Eine besondere Herausforderung des Projekts war der Umstand, dass der Bericht selbst zum Zeitpunkt des Projektbeginns noch nicht fertiggestellt war. Erst kurz vor dem Launch lagen finale Inhalte, Grafiken und Strukturentscheidungen vor.
Als klar wurde, dass die Inhalte anders aussehen würden als bisher besprochen, ergab sich kurzfristiger Änderungsbedarf am bereits abgenommenen Konzept. Wir überarbeiteten die Startseite und passten CMS-Module entsprechend an.
Der erste Launch erfolgte dann termingerecht zum Pressetermin mit einem Startangebot. In den Wochen nach dem ersten Launch komplettierten wir die Website schrittweise. Für Datentabellen ohne zugehörige Grafik entwickelten wir eine eigene Darstellungslösung. Zudem schulten wir das Team des iit im Umgang mit dem CMS und dokumentierten alle projektspezifischen Besonderheiten, damit der Auftraggeber redaktionelle Folgearbeiten selbstständig durchführen kann.
