Stills & Räume
Mit OpenAI-Bildgenerierung entstehen Raketenansichten und Innenräume. Bildbearbeitungen auf Basis bestehender Motive helfen, die Bildwelt weiterzuentwickeln.
01 / Ausgangspunkt
Unsere Leistungen brauchen einen gemeinsamen Raum.
Die Medienachse verbindet unterschiedliche Disziplinen: Konzeption und UX, digitale Entwicklung, Medienproduktion und die Arbeit an intelligenten Abläufen. Für unseren neuen Auftritt suchen wir eine Bildidee, die diese Vielfalt zusammenführt und zum Entdecken einlädt.
Daraus entsteht die Raketenwelt. Der Start führt in unsere Haltung und Leistungen ein. Im horizontalen Flug öffnet sich die Rakete zur Puppenhausansicht. Ihre Räume stehen für unterschiedliche Themen – vom Team in der Ameisenfarm bis zum Labor für Leistungen und Skills.
Die Navigation bleibt geführt: Besucher scrollen durch die Einstiegssequenz und wählen anschließend einen Raum. Eine frei steuerbare 3D-Welt ist für dieses Konzept nicht nötig.
- Projekt
- Website der Medienachse
- Gestalterischer Ansatz
- Reduzierte Illustration mit 2.5D-Tiefe
- Interaktion
- Scrollsteuerung und frei wählbare Räume
- Arbeitsweise
- Gestaltung, KI und Entwicklung in Iterationen
02 / Transparenz
Wo KI mitarbeitet.
Und wo wir entscheiden.
Bei dieser Website setzen wir generative KI für die Bildwelt, eine animierte Startsequenz und die Unterstützung bei der Programmierung ein. Die Ergebnisse werden ausgewählt, geprüft, verändert und in den Auftritt eingebunden. Auch die Texte entwickeln wir im Austausch mit KI und überarbeiten sie anhand unserer tatsächlichen Arbeit.
Generierter Start
Die Startsequenz basiert auf einem Seedance-Clip. In der Website steuert die Scrollposition den Zeitpunkt innerhalb dieses Videos.
KI-gestützte Entwicklung
Codex unterstützt als KI-Coding-Assistent bei HTML, CSS und JavaScript. Gestaltung, Verhalten und technische Fehler werden am laufenden Prototyp geprüft und korrigiert.
Von uns kommen die Richtung, die Auswahl und die Beurteilung: Welche Rakete passt? Wie soll sich der Übergang anfühlen? Welche Inhalte müssen erreichbar bleiben? Diese Entscheidungen prägen das Ergebnis ebenso wie die generierten Assets.
03 / Iteration
Ein gutes Bild ist noch kein funktionierendes System.
Die ersten horizontalen Stills treffen die gewünschte Stimmung. Für einen fließenden Übergang zwischen Außenansicht und Innenleben müssen aber auch Proportionen, Perspektive und Lage zusammenpassen. Separat erzeugte Motive unterscheiden sich darin – selbst wenn sie auf derselben Beschreibung beruhen.
Ein erster Versuch, unterschiedliche Bilder über Masken und Überblendungen zusammenzuführen, erzeugt sichtbare Brüche. Wir ändern den Ansatz: Die bestehende Rakete wird dupliziert und ihr Innenleben mit KI-Bildbearbeitung direkt auf dieser Grundlage angelegt.
Die frühere Raumstudie ansehen
Auch dieser Weg erzeugt keine pixelidentischen Außenkonturen. Er liefert jedoch eine gemeinsame gestalterische Basis, mit der wir den Wechsel weiter ausarbeiten können. Die Nahansichten der Räume entstehen anschließend ausgehend vom neuen Mastermotiv.
04 / Umsetzung
Bewegung entsteht aus dem Zusammenspiel.
Die Website kombiniert unterschiedliche Mittel. Für den Raketenstart nutzen wir einen Videoclip. Der horizontale Flug entsteht aus getrennten Bildebenen für Rakete, Himmelskörper und Sterne. Ein dynamischer SVG-Antrieb und die Bewegung dieser Ebenen ergänzen den räumlichen Eindruck.
2.5D bedeutet hier: Tiefe und Kamerabewegung werden mit Bildebenen und Transformationen angedeutet. Die Website verwendet dafür kein frei navigierbares 3D-Modell.
Start: Video
Die Scrollposition steuert die Videozeit vorwärts und rückwärts. Darüber bleiben Überschriften und Texte echte HTML-Inhalte.
Flug: Bildebenen
Rakete, Sterne und Himmelskörper lassen sich unabhängig bewegen. Das erzeugt Parallaxe und eine ruhige Flugatmosphäre.
Räume: Bild & Interaktion
Die geöffnete Rakete wird sichtbar. Dezente interaktive Flächen und benannte Bedienelemente führen zu den Innenansichten.
Figma begleitet die Planung von Screens und Übergängen. Die aktuelle Umsetzung besteht aus HTML, CSS und JavaScript; der Code wird über GitHub versioniert und die Website über Vercel bereitgestellt.
Ein Übergang als optische Täuschung
Für den Wechsel von der hellen Inhaltsfläche zum Weltraum greifen wir eine Idee aus der gemeinsamen Gestaltung auf: Die helle Fläche wirkt wie ein extremer Nahblick auf die Raketenhaut. Beim Weiterscrollen fährt die Kamera zurück und gibt die horizontale Rakete frei.
Die Rakete muss dafür nicht sichtbar von vertikal auf horizontal gedreht werden. Eine angeglichene Farbfläche verdeckt den Szenenwechsel. Der Eindruck einer zusammenhängenden Bewegung entsteht durch die Inszenierung.
Den Übergang auf der Website erleben05 / Nutzung
Die Inszenierung führt zu den Inhalten.
Die Bildwelt gibt den Einstieg vor. Team, Leistungen, Arbeiten und Kontakt werden als lesbare HTML-Inhalte umgesetzt. Die Raumillustrationen ersetzen diese Inhalte nicht.
Auf kleinen Bildschirmen braucht die Szene eigene Ausschnitte und Abstände. Deshalb schneiden wir den Startclip auf Mobile anders an und führen den Sternenhintergrund außerhalb des Videos weiter. Die Räume bleiben sichtbar; ihre Beschriftungen liegen als zusätzliche Bedienelemente unterhalb der Rakete.
Die Umsetzung berücksichtigt außerdem reduzierte Bewegung. Große Kamerafahrten werden dabei übersprungen und statische Ansichten verwendet. Bei Problemen mit dem Startvideo stehen Standbilder zur Verfügung.
Solche Vorkehrungen sind Teil der Entwicklung. Sie ersetzen keine umfassende Prüfung von Barrierefreiheit, Ladeverhalten und Bedienbarkeit auf unterschiedlichen Geräten.
06 / Erkenntnisse
Moderne Mittel brauchen eine klare Richtung.
Die Arbeit zeigt, wo generative KI für uns hilfreich ist: Bildideen lassen sich konkretisieren, Varianten vergleichen und individuelle Assets weiterentwickeln. Gleichzeitig werden ihre Grenzen sichtbar – etwa bei der Konsistenz eines Modells über mehrere Ansichten hinweg.
Aus den Ergebnissen wird eine Website, indem wir Inhalte strukturieren, passende technische Mittel auswählen und Übergänge, Ausschnitte und Interaktionen wiederholt prüfen. Dazu gehört auch, einen Ansatz zu verwerfen, wenn er im Zusammenspiel nicht funktioniert.
Die Website entwickelt sich weiter. Diesen Case führen wir mit ihr fort und ergänzen Erfahrungen aus dem Betrieb, sobald sie vorliegen.
Eine Idee mit Potenzial?
Gemeinsam herausfinden,
was daraus wird.
Wir verbinden gestalterische Fragen mit konkreten Prototypen und technischer Umsetzung.
Über euer Projekt sprechen