E.ON: Interaktives 3D-Framework für komplexe Energiesysteme

E.ON Flex Big Picture Tool

Von der Textwüste zum Infotainment: Komplexität wird erlebbar 

3D Design
Konzeption
UX/UI-Design
Web/App Development
Illustration
Systemarchitektur
Administration/DevOps
Kommunikation/Koordination
Go-Live
Projektmanagement

Jahr
2024

Kunde
E.ON

Sektor
Energiewirtschaft

Herausforderung
Komplexität visuell Auflösen

Technologien
3D-Design, Html, TypeScript, php

Unsere Rolle
Beratung, Konzeption und technische Umsetzung komplexer Prozesse

Die ursprüngliche Anforderung?

Eine digitale Visualisierung für Politik und Industrie, die Netzflexibilitäten verständlich erklärt.

Was daraus wurde?

Ein interaktives 3D-Erlebnis, das zeigt: Komplexität verschwindet nicht durch Vereinfachung, sondern durch die richtige Inszenierung.

Eines der komplexesten Themen unserer Zeit einfach und visuell erklärt. Das ist Infotainment pur.

Die Aufgabe und die Lösung
Die Aufgabe
Die Aufgabe

Der Begriff „Flexible Netze” ist spätestens seit der Energiewende in der breiten Öffentlichkeit angekommen. Ein einfacher Begriff für ein äußerst komplexes Thema.

Aufgrund der immer weiter wachsenden Menge an Eigenenergieerzeugung auf allen Spannungsebenen ist es mehr als nötig, dass das Stromnetz auf dadurch höher schwankende Spannungen schnell reagieren kann. Auch die Stromerzeugung und -einspeisung ist ein komplexes Thema, weshalb ein großer Bedarf an Digitalisierung, Transparenz und Handlungsbedarf besteht. Diese großen Abhängigkeiten galt es einfach und anschaulich zu erklären.

E.ON suchte einen Dienstleister, der eine Möglichkeit findet, „das große Ganze“ möglichst einfach und verständlich sowie interaktiv zu visualisieren. Die Zielgruppe sind Vertreter aus Politik und Wirtschaft.

Zum Zeitpunkt der Anfrage hatte E.ON selbst allerdings noch keine konkrete Idee, wie sich ein so komplexes Thema einfach und verständlich vermitteln ließe.

Unsere Idee
Unsere Idee

Wir entwickelten ein orthogonales, flexibles Grid-System, in dem unterschiedliche Akteure und Szenarien flexibel miteinander kombiniert werden können. Diese Grundidee testeten wir zunächst mit 3D-Dummy-Objekten und den gestaltungsprägenden, orthogonalen, quadratischen Bodenplatten, um herauszufinden, ob dieses Grid den sehr unterschiedlichen Szenarien standhalten kann. 

Um den Grundaufbau herum entwarfen wir außerdem eine User Experience, die den Einstieg, den Auf- und Abbau sowie den Ablauf eines Szenarios so einfach und zugänglich wie möglich macht.

Visuelle Umsetzung & Nutzererlebnis
Visuelle Umsetzung & Nutzererlebnis

Zum Zeitpunkt der Anfrage stand E.ON gerade mitten in einem der größten Rebranding-Prozesse seiner Geschichte. Daher hatten wir bei der Gestaltung keinerlei Anhaltspunkte dafür, wie die Visualisierung in der Vergangenheit ausgesehen hatte. 

Wir entschieden uns für einen 3D-Stil, der einerseits realistisch ist, da es sich größtenteils um technische Darstellungen handelte, andererseits aber so einfach und verständlich sein musste, dass er die Gesamtszene nicht visuell überfrachtet. 

Eine weitere Herausforderung waren die sehr unterschiedlichen Größen innerhalb einer Szene. So sollte beispielsweise der Bundestag neben einem Smart Meter gezeigt werden. Durch die abstrakten Bodenplatten als Grundelement war hiermit die Flexibilität von Proportionen unterschiedlichster Art gegeben. Somit ging das visuelle Grundkonzept voll auf.

Um die Netzflexibilität in all ihren Facetten abzubilden, müssen mehrere Ebenen berücksichtigt werden. Um diese gut miteinander kombinieren zu können, haben wir ein universelles und leicht zugängliches Userinterface entwickelt. Es zeigt die verschiedenen Dimensionen auf, kombiniert sie und verbindet sie miteinander. Szenen bauen sich dynamisch auf und ab, Szenarien werden automatisiert abgespielt. 

So macht interaktives Nutzererlebnis eines so komplexen Themas richtig Spaß!

Der Gewinn für E.ON
Der Gewinn für E.ON

Mit dieser Art der Kommunikation kann sich E.ON als Innovator und Marktführer sehen lassen. Die positiven Rückmeldungen aus Politik und Wirtschaft zu diesem Thema sind überwältigend!
 

Damit belegt E.ON seine Vorreiterrolle, das Thema „Flexible Netze” auch in der Kommunikation ernsthaft voranzutreiben.
 

Check mal unsere Disziplinen Konzeption
und Strategische Beratung aus!

Die technische Dimension hinter der 3D-Matrix

Wenn Konfigurierbarkeit auf Automatisierung trifft – Zahlen, die Innovation messbar machen.

Verschiedene Anwendungsfälle

Flexibilität in allen Dimensionen visualisiert

Verschiedene Szenarien zeigen die Vielfalt moderner Netzflexibilität. Von Lastverschiebung in der Industrie über Smart-Home-Integration bis zu Speicherlösungen für erneuerbare Energien. Jeder Anwendungsfall hat eigene Akteure, eigene Prozesse, eigene Abhängigkeiten.

Technische Implikation:

Jeder Anwendungsfall wird aus der konfigurierbaren 3D-Matrix zusammengestellt. Keine hardcodierten Szenen, sondern dynamische Komposition basierend auf Konfigurationsdaten. Automatisierte Animationen führen den Betrachter von der Auswahl bis zum Verständnis durch den Prozess.

Der Vorteil für Stakeholder:

Politik und Industrie können gezielt die für sie relevanten Szenarien erkunden. Kein Informations-Overload, sondern fokussierte Wissensvermittlung. Jeder Anwendungsfall steht für sich und ist gleichzeitig Teil des großen Ganzen.

29 konfigurierbare 3D-Objekte

Modular, kombinierbar, zukunftsfähig

Von Energieanlagen über Strommasten bis zu generischen Gewerken: 29 hochauflösende 3D-Objekte bilden das Fundament. Jedes Objekt wurde so konzipiert, dass es in verschiedenen Anwendungsfällen wiederverwendet werden kann. Die Balance zwischen Abstraktion und Realismus macht sie vielseitig einsetzbar.

Technische Implikation:

Die Objekte wurden in unterschiedlichen Größenverhältnissen für verschiedene Anwendungsgeräte optimiert. Hochauflösend für Desktop-Präsentationen, performant für Touch-Geräte auf Messen. Die 3D-Assets sind so strukturiert, dass neue Objekte einfach hinzugefügt werden können.

Der Vorteil für E.ON:

Neue Anwendungsfälle können schnell visualisiert werden, ohne komplett neue 3D-Welten erstellen zu müssen. Das System wächst organisch mit den Anforderungen. Investitionssicherheit durch Wiederverwendbarkeit.

3D-Matrix-Architektur

Konfigurierbarkeit als Kern-Innovation

Die flexible 3D-Matrix ist das Herzstück der Lösung. Sie ermöglicht die freie Platzierung und Kombination aller Objekte. Orthogonale Darstellung sorgt für klare räumliche Orientierung. Die Matrix ist nicht statisch, sie passt sich dem jeweiligen Anwendungsfall an.

Technische Implikation:

Die Matrix-Logik wurde als eigenständiges Framework auf Basis von TypeScript und Webpack entwickelt. Config-as-Code ermöglicht schnelle Anpassungen. Animations-Sequenzen werden automatisch aus der Konfiguration generiert. Zoom-Funktionen und interaktive Feedbacks sind nativ integriert.

Der Vorteil für Wartbarkeit:

Änderungen erfolgen über Konfigurationsdateien, nicht im Code. Neue Szenen können in Stunden statt Tagen erstellt werden. Die Fachbereiche bei E.ON können nach kurzer Einarbeitung selbst Anpassungen vornehmen.

Automatisierte Prozessanimationen

Geführte Navigation durch Komplexität

Jeder Anwendungsfall läuft automatisiert ab: Objekte bauen sich auf, Pfeile zeigen Abhängigkeiten, Texte erklären Zusammenhänge. Der Betrachter wird geführt, ohne dass Klicken, Scrollen oder Suchen nötig wird. Die Automatisierung nimmt die Komplexität aus der Bedienung.

Technische Implikation:

Animation-Engine synchronisiert visuelle Elemente mit Textpassagen. Timing ist präzise choreographiert: Wann erscheint welches Objekt? Wann wird welcher Text eingeblendet? Wann zeigen Pfeile auf Abhängigkeiten? Pausierungsmöglichkeiten für Präsentatoren sind integriert.

Der Vorteil für User Experience:

Maximale Einfachheit bei maximaler Informationstiefe. Der Betrachter kann sich auf den Inhalt konzentrieren, die Navigation übernimmt das System. Keine Überforderung durch zu viele Klickoptionen. Infotainment im besten Sinne.

Nicht einfach nur ein Bild,
sondern ein konfigurierbares 3D Erlebnis
Unsere Lösung
Ein interaktives 3D-Framework für komplexe Energiesysteme

Komplexe Zusammenhänge visuell erlebbar machen

Check mal unsere Disziplinen Grafikdesign
und Technische Entwicklung aus!

Säule 1
Konfigurierbare 3D-Matrix

Das Herzstück der Flexibilität

Was wir gebaut haben

Eine flexible 3D-Matrix, die als Grundgerüst für alle Anwendungsfälle dient. Statt separate 3D-Welten zu bauen, haben wir eine intelligente Architektur geschaffen, die Objekte dynamisch platziert und kombiniert.

Die Matrix-Logik im Detail

Die Matrix funktioniert nach dem Baukasten-Prinzip: Jedes der 29 3D-Objekte kann an definierten Positionen platziert werden. Die orthogonale Darstellung (dreidimensional, aber klar strukturiert) sorgt für räumliche Orientierung. Größenverhältnisse passen sich automatisch an, je nachdem, wie viele Objekte in einer Szene sind.
 

Konfiguration erfolgt über strukturierte Datensätze: Welche Objekte in welchem Anwendungsfall? An welchen Positionen? In welcher Reihenfolge erscheinen sie? Wie sind die Abhängigkeiten zwischen ihnen? Diese Konfiguration ist unabhängig vom Code, Änderungen erfordern keine Entwickler.

Automatisierter Auf- und Abbau

Wenn ein Anwendungsfall ausgewählt wird, baut sich die Szene automatisch auf: Objekte erscheinen nacheinander, Pfeile zeigen Energieflüsse, Textpassagen erklären Zusammenhänge. Der Ablauf ist choreographiert, jedes Element erscheint zum richtigen Zeitpunkt. Übergangsanimationen zwischen Szenen sorgen für visuellen Fluss.

Business-Vorteil

Neue Anwendungsfälle können in Stunden statt Wochen erstellt werden, keine Entwickler erforderlich für inhaltliche Anpassungen. Das System skaliert mit den Anforderungen. E.ON kann selbstständig neue Szenarien visualisieren.

Säule 2
Custom TypeScript Framework

Technische Exzellenz unter der Haube

Was wir gebaut haben

Ein eigenentwickeltes Framework auf Basis von TypeScript und Webpack, spezialisiert auf interaktive 3D-Visualisierungen mit fixer 3D-Perspektive.

Warum Custom-Built?

Wir brauchten keine freie Kameraführung, keine Echtzeit-Physik, keine komplexen Shader. Wir brauchten: Präzise Kontrolle über Animationen, performantes Rendering auf verschiedenen Geräten, einfache Konfigurierbarkeit für Nicht-Entwickler.

Unser Framework ist genau darauf optimiert. Weniger Code bedeutet bessere Performance. Klare Architektur bedeutet einfache Wartung. TypeScript bedeutet Typ-Sicherheit und bessere Developer Experience.

Die technische Architektur

Rendering-Layer: Verantwortlich für die Darstellung der 3D-Objekte in fixer Perspektive. Optimiert für Browser-Performance. Lazy Loading für Assets. Responsive für verschiedene Bildschirmgrößen.

Animation-Engine: Orchestriert den automatisierten Ablauf. Timeline-basiert: Jedes Element hat definierte Start- und Endpunkte. Synchronisation zwischen visuellen Elementen und Textpassagen. Easing-Funktionen für natürliche Bewegungen.

Konfigurations-Layer: JSON-basierte Szenendefinition. Objekte, Positionen, Animationsabläufe, Texte, alles konfigurierbar. Validierung stellt sicher, dass Konfigurationen syntaktisch korrekt sind.

Event-System: Handhabt User-Interaktionen (Szenen-Auswahl, Pause/Play).

Business-Vorteil

Maximale Performance auch auf älteren Geräten. Einfache Integration in E.ON-Infrastruktur. Wartbar und erweiterbar durch klare Architektur. Keine Lizenzkosten für externe 3D-Engines.


 

Säule 3
Design zwischen Seriosität und Markenstil

Visuelle Innovation für kritische Infrastruktur

Was wir gebaut haben

Ein visuelles Design, das die Balance zwischen E.ONs Markenstil und der Seriosität des Themas findet. Die 3D-Objekte sind weder zu abstrakt noch zu realistisch, sondern treffen den Sweet Spot.

Die Design-Strategie

Abstraktionsgrad: Objekte sind erkennbar (ein Kraftwerk sieht wie ein Kraftwerk aus), aber nicht fotorealistisch. Klare Formen, reduzierte Details. Farben folgen dem E.ON-Styleguide, aber mit angepasster Sättigung für Seriosität.

Generische Objekte: Nicht alle Akteure sind physische Gebäude. "Flexibilität" oder "Netzsteuerung" sind abstrakte Konzepte. Hierfür haben wir visuelle Metaphern entwickelt: Geometrische Formen, die Funktion symbolisieren statt abbilden.

Animationsstil: Smooth, aber nicht zu verspielt. Bewegungen sind funktional. Sie verdeutlichen Abhängigkeiten, nicht Entertainment. Timing ist bewusst langsam: Betrachter müssen Zeit haben, Zusammenhänge zu verstehen.

Typografie und Textintegration: Kurze, prägnante Texte direkt in der 3D-Szene. Keine separaten Infoboxen. Die Texte sind Teil der Animation. Sie erscheinen synchron zu den relevanten Objekten. Schriftgröße responsiv für verschiedene Geräte.

Das Ergebnis: Pionierarbeit für E.ON

Diese Kombination aus seriösem Inhalt und Markenstil war Neuland, sowohl für E.ON als auch für uns. Die 3D-Illustrationen setzen einen neuen Standard für E.ONs visuelle Kommunikation. Seriös genug für Vorstands-Präsentationen. Attraktiv genug für Messe-Auftritte.

Business-Vorteil

E.ON positioniert sich als innovativ und nahbar. Die Visualisierung ist einprägsam, das Design wiederverwendbar für zukünftige Projekte. Brand-Consistency bei gleichzeitiger Innovation.

Das Ergebnis
Sichtbarkeit des Themas
erhöht

Durch visuell attraktive Darstellung

Darstellung des komplexen Themas
einfach

Automatisierte Führung unterschiedlicher Szenarien

Entwicklung
Agil

Flexible Architektur bewältigt Anforderungsänderungen

Einbettung in E.ON-Infrastruktur
nahtlos

Das Tool läuft im E.ON Content Management System. Keine externen Dependencies. E.ON hostet selbst, hat volle Kontrolle. Updates und Erweiterungen können intern durchgeführt werden.

E.ON Flex Big Picture Tool: Privatkunde
E.ON Flex Big Picture Tool: 3D Modelle. Windkraftanlagen, LKW, Wärmepumpe.
E.ON Flex Big Picture Tool: 3D Modelle 3. PV Anlage, Strombörse, Privatkunde
Unsere Tools
Beratung
Beratung
Confluence
Confluence
Adobe XD
Adobe XD
Cai
Cai
Google Analytics
Google Analytics
Google Tag Manager
Google Tag Manager
RapidUsertests
RapidUsertests
XOVI
XOVI
Konzeption
Konzeption
Atlassian
Atlassian
Confluence
Confluence
Adobe XD
Adobe XD
Adobe Illustrator
Adobe Illustrator
Adobe InDesign
Adobe InDesign
Google Analytics
Google Analytics
Miro
Miro
Design
Design
Adobe XD
Adobe XD
Blender
Blender
Adobe Aero
Adobe Aero
Adobe After Effects
Adobe After Effects
Adobe Animate
Adobe Animate
Adobe Audition
Adobe Audition
Adobe Illustrator
Adobe Illustrator
Adobe InDesign
Adobe InDesign
Adobe Lightroom
Adobe Lightroom
Adobe Photoshop
Adobe Photoshop
Adobe Premiere Pro
Adobe Premiere Pro
Adobe Substance
Adobe Substance
Apple Logic Pro
Apple Logic Pro
Figma
Figma
Flux
Flux
Midjourney
Midjourney
Pika
Pika
Procreate
Procreate
Runway
Runway
Sora
Sora
Stable Diffusion
Stable Diffusion
Steinberg Cubase
Steinberg Cubase
Suno
Suno
Veo
Veo
Weavy
Weavy
Entwicklung
Entwicklung
Deployer
Deployer
CI/CD-Pipelines
CI/CD-Pipelines
Bitbucket
Bitbucket
npm
npm
TypeScript
TypeScript
jQuery
jQuery
Cursor
Cursor
Docker
Docker
Webpack
Webpack
Angular
Angular
Angular Material
Angular Material
Azure
Azure
Bootstrap
Bootstrap
Composer
Composer
Contao
Contao
CookieHub
CookieHub
D3.js
D3.js
Doctrine
Doctrine
Flow
Flow
Fusion
Fusion
Google Analytics
Google Analytics
GSAP
GSAP
Gulp
Gulp
Handlebars
Handlebars
Helm
Helm
JavaScript
JavaScript
JWT
JWT
krpano
krpano
Kubernetes
Kubernetes
Llama
Llama
Mercure
Mercure
Moment.js
Moment.js
MySQL
MySQL
n8n
n8n
Neos
Neos
Pattern Lab
Pattern Lab
PHP
PHP
PHP Unit
PHP Unit
Podman
Podman
Protractor
Protractor
React
React
Redshift
Redshift
Sass
Sass
Selenium
Selenium
Shopware
Shopware
Sulu
Sulu
Symfony
Symfony
Three.js
Three.js
Twig
Twig
TYPO3
TYPO3
Usercentrics
Usercentrics
WordPress
WordPress
Projektmanagement
Projektmanagement
Scrum
Scrum
Bitbucket
Bitbucket
Jira
Jira
Atlassian
Atlassian
Cai
Cai
Match?
Starte jetzt
dein Projekt

Von der Idee zur Realität: Als Boutique-Agentur analysieren wir, denken mit und entwickeln passgenaue Konzepte. 
Unsere Digitale Originale® sind kreativ, relevant und technisch perfekt umgesetzt.

Suchst Du auch individuelle Visualisierungen für komplexe Sachverhalte?

Marcus hilft dir gerne.