Wasserstoff-Roadmap
Interaktive Anwendung zur Entwicklung der Wasserstoffinfrastruktur in Deutschland und Europa für TransHyDE / Fraunhofer IKTS
- Web
„Die Entwicklung war für uns alle spannend, da es kaum vergleichbare Projekte gibt. Wir haben daher gemeinsam mit der Arbeitsgruppe, viel Basisarbeit geleistet und individuelle Lösungen entwickelt.“
Dietmar (Creative Director Konzept bei der Netzbewegung)
Wie kann sich die Wasserstoffinfrastruktur in Deutschland und Europa entwickeln?
Dieser Frage gehen den Forschenden der Arbeitsgruppe TransHyDE nach und haben dafür verschiedene Modelle durchgerechnet. TransHyDE ist eines der Wasserstoff-Leitprojekte unter der Schirmherrschaft des Bundesministeriums für Bildung und Forschung. Mit dem Ziel, die Modellierungsergebnisse, Szenarien und Perspektiven durch eine interaktive Anwendung sichtbar zu machen, trat das Team von TransHyDE an uns heran.
Rapid Prototyping zur Modellierung der Anwendung
In engem Austausch modellierten wir zusammen mit Mitgliedern der Arbeitsgruppe in mehreren Sessions Struktur und Interface-Elemente der Seite. Dazu kamen einfache Prototypen auf Basis von Axure und Figma zum Einsatz, mit denen Funktionalität und Nutzerführung diskutiert und feingeschliffen wurden.
Interaktive Roadmap
Auf der neuen TransHyDE -Website können Modellierungsergebnisse für die Entwicklung der Wasserstoffinfrastruktur, Handlungsoptionen und vieles weitere entdeckt werden. Die Ergebnisse verschiedener Modelle für Erzeugung, Infrastruktur und Nachfrage können sowohl aus Akteurs- oder Systemperspektive als auch für Deutschland oder Europa betrachtet werden. Besonders spannend: Die Seite macht verschiedene Szenarien und Zeithorizonte sichtbar.
Isometrische Projektlandkarte
Ein weiteres Herzstück der Website ist die interaktive, illustrierte Projektlandkarte die Anwendungen, Infrastruktur und Erzeugung visualisiert. Dazu wurden von Schiffen, Flugzeugen oder Industrieanlagen über 30 verschiedene Elemente in isometrischer Perspektive aufbereitet.
Individuelle XML-Struktur
Die Anwendung wurde als Single Web App mit virtuellem Routing konzipiert und mit Vue.js umgesetzt.
Vue.js generiert die Inhalte vollständig dynamisch aus XML-Dateien. Zur Pflege der Inhalte durch die Arbeitsgruppe wurden individuelle Markups erstellt, die den Redakteur*innen eine breite Palette an Stylingoptionen bietet. Die Pflege erfolgt über einen eigenen Online-Editor.
