Making-of: Microsite fürs Supersportcar GTstreet R

Produkte im Web emotional zu inszenieren ist immer eine Herausforderung, und ein Sportwagen wie der Porsche 911 könnte hier sogar die Königsdisziplin sein, wie Jonas Marckert, Designer und Co-Founder der Digitalagenur Dorfjungs, bestätigt. »Er ist der Kindheitstraum von vielen, ein Kultauto, das über eine lange Historie verfügt.« Für die Karlsruher Krea­tiven also eine gute Gelegenheit, ihr Können in Sachen Experience Design unter Beweis zu stellen. Die auf die Individualisierung von Porsche-Modellen spe­zialisierte Firma TechArt Automobil­design hatte sich im Frühjahr 2021 an sie gewandt – der Auftrag: die Entwicklung einer Microsite zum Release des Supersportcars GTstreet R, ihres neuen Topmodells.

»Gewünscht war, das physische Erlebnis des GTstreet R ins Web zu transferieren«, sagt Joshua Keck, Developer und ebenfalls Co-Founder von Dorfjungs. Da die aktuelle Corporate-Website von TechArt nicht die erforderlichen Möglichkeiten einer emotiona­len Präsen­tation bot, sollte eine Microsite diese Aufgabe übernehmen und neben der digitalen Kampagne für einen entsprechend lauten Knall zum Launch sor­gen. Kleiner Haken: Die Deadline war äußerst eng, nur drei Monate standen der Agentur zur Verfügung. Aber auch diese Herausforderung nahm Dorfjungs gern an. »Uns war sofort klar, dass dies ein Herzens­projekt und eine unglaubliche Chance sein würde. Also zögerten wir nicht lange und sag­ten dem straffen Timing zu«, so Jonas Marckert.

Involvierendes Storytelling

Rein rational spricht wenig für den Kauf eines hochgezüchteten, veredelten Sportwagens – das pu­re Erlebnis und ein einzigartiges Fahrgefühl sind hier alles. »Und dies sollte für den Besucher der Website spürbar werden. Die fehlende Haptik galt es durch Storytelling zu er­setzen. Wir wollten das Gefühl ver­mitteln, dass man direkt in den GTstreet R einsteigen und losfahren kann«, erläutert Jonas Marckert. Um diese Wirkung zu erzielen, sollte die Website auf Ani­mation und Motion Design als zentrale Mittel des Storytellings setzen. »Bewegung und Übergänge len­ken die Aufmerksam­keit der User auf den Content, den sie sehen sollen.«

Ein derartiges Konzept kann aber nur aufgehen, wenn das Ergebnis aus Sicht der Zielgruppe auch wirklich authentisch ist. Dabei spielte neber der visuellen Ebene der Sound eine besonders wichtige Rolle: »Die Abstimmung der Tonspuren war essenziell. Wir mussten minutiös auf jedes Detail achten, denn das geübte Ohr eines Porsche-Liebhabers wür­de jegliche Trickserei sofort erkennen und sich daran stören«, so Joshua Keck. Aber auch die Gestaltung der Navigationselemente lehnt sich an das phy­si­sche Vorbild an. So ist das Hauptmenü inspiriert vom »Mode Selector« des Lenkrads.

Projekt Entwicklung der Microsite für den GTstreet R
Auftraggeber TechArt Automobildesign GmbH, Leonberg
 Agentur Dorfjungs, Karlsruhe
Technik Entwicklung: Node.js, TypeScript, Web Components, Web Audio API, Adobe Audition, GSAP, Canvas API, Docker, Kubernetes; Projektmanagement: Slack, Asana; Prototyping: Figma
Produktionszeitraum Mai bis Juli 2021

Der Aufbau der Microsite wiederum bildet die Er­kundung des Sportwagens ab. »Es beginnt beim ers­ten Blick auf den Ladescreen mit ›Geschwindig­keits‹-Zähler, dann geht es vom Exterieur zum Interieur«, erklärt Jonas Marckert. Dabei setzten die Kreativen Textinformationen möglichst zurückhaltend ein und ließen die Bilder sprechen. »Wir entschieden uns gegen eine klassische Anordnung von Bild und Text als Erklärung. Stattdessen arbeiteten wir mit Scroll-Effekten wie Überblendung und Abstraktion durch un­terschiedliche Hintergründe«, so der Designer. Das GTstreet R bleibt dabei immer im Fokus, da zum Beispiel die Hintergrundmaskierung ans Scrolling gebunden ist. Neben diesem visuellen Storytelling sorgen die verschiedenen Möglichkeiten, mit dem Sportwagen zu interagieren, für ein starkes Involvement des Users oder der Userin.

Look-and-feel: Effizienter Technikeinsatz

Um das generelle Look-and-feel der Site sowie die Dauer und Anmutung der Animationen zu visualisieren, entwarf das Team Prototypen in After Effects, die es dann in Code übersetzte. Dazu gehörte auch die Gestaltung des Hauptmenüs sowie des Custom Cursors, der kontextbasiert Navigationshinweise lie­fert. »Auf diese Weise erhielten wir einen ersten Satz von Animationseigenschaften, die wir als Ausgangs­punkt für alle Elemente auf der Seite wiederverwenden«, sagt Jonas Marckert. Für die Implementie­rung nutzt die Agentur entweder CSS oder bei kom­plexe­re Animationen JavaScript – die Animationsbibliothek GSAP, um genau zu sein.

Da die gesamte Produktion unter Corona-Bedingungen stattfand, konnte Creative Director Norman Dubois beim Shooting der Fotos und Videos nicht vor Ort sein und gab die Anweisungen remote. Wobei der GTstreet R selbst zu Projektbeginn noch gar nicht fertig war, sodass das Team zunächst mit Renderings und Mockups arbeiten musste. Für die Abstimmung im Team und mit dem Kunden wurde kur­zerhand ein eigener Slack-Kanal aufgesetzt. Darüber hinaus nutzte Dorfjungs Asana fürs Projektmanage­ment sowie Figma, um die Entwicklung der UX-Pro­totypen schnell voranzutreiben.

Bei Dorfjungs ist auch die technische Infrastruktur ganz darauf ausgelegt, Zeit zu sparen. »Unser ge­samter Workflow läuft über Docker-Container. Wir haben Base Images für diverse Arten von Projekten, die vorkonfigurierte Webserver, unsere wich­tigsten Module sowie – falls nötig – ein CMS enthalten. So wird die Einrichtung des Projekts ausgelagert. Das stellt sicher, dass wir alle mit einer identi­schen Entwicklungsumgebung arbeiten«, sagt Sys­tem­ad­mi­nis­trator Paul Lorenz. Da die komplette Microsite samt Abhängigkeiten in einem Container verpackt ist, ist es möglich, sie an den Staging Host (ein Kubernetes-Cluster) auf dem Kundenserver zu schicken, ohne dass FTP-Übertragungen oder stressige Probleme mit Abhängigkeiten auftreten.

Auch die Microsite selbst könnte in Zukunft neue Funktionen übernehmen. Aufgrund der positiven Resonanz und der großen internationalen Reichweite dient sie perspektivisch als Kampagnen-Site für den Launch weiterer Produkte. Es reicht dann, einfach das Bildmaterial auszutauschen und kleine Fea­tures als Erweiterung hinzuzufügen. 

Technik, die Zeit spart und kreative Freiheiten bietet

Die Digitalagentur Dorjungs setzt bei ihren Projekten auf Standardwebtechnologien, die sie nach Bedarf anpasst

Web Components Das Set aus wiederverwendbaren und standardisierten Komponenten vereinfacht die Web­entwicklung. Zu den Möglichkeiten gehört zum Beispiel die Interoperabilität einzelner HTML-Elemente. Eigene Webkomponenten setzt Dorfjungs bei fast allen Projekten ein – und verbessert sie kontinuierlich.

Web Audio API Die API bietet eine umfangreiche Palette an Audioeffekten. »Sie erlaubte uns, die Audiodateien des Motors nach Bedarf zu wiederholen und zu steuern, um das Sound­modul zu implementieren«, erklärt Joshua Keck.

Canvas API Sie erlaubt es, Grafiken zu zeichnen und über Java-Script zu animieren. Dorfjungs nutzte die Canvas API für die Gestaltung der Amplitudengrafik des Soundmoduls und für die Implementierung der scrollbasierten Bildsequenzabschnitte.

GSAP Die JavaScript-Animationsbibliothek hat den Vorteil, dass sie für die Leistung und Robustheit in verschiedenen Browsern optimiert ist und eine Standardsyntax mitbringt. Die Möglichkeit der Zeitleisten- und Keyframe-Steuerung macht die Entwicklung von Animationen besonders intuitiv. Dorfjungs arbeitet mit GSAP, sobald die Animationen etwas komplexer sind und CSS dafür nicht mehr ausreicht.

Step-by-step: So wurde das interaktive Beschleunigungsmodul realisiert

Eines der Highlights der Microsite ist die Darstellung der Beschleunigung des Supersportwagens, der in gerade mal 2,5 Sekunden von 0 auf 100 Stundenkilometer kommt. »Un­sere Fragestellung war: Wie können wir diese atemberaubende Beschleunigung erlebbar machen und dem User das Gefühl geben, selbst im Auto zu sitzen?«, berichtet Jonas Marckert. Aus dieser Vorüber­legung ergab sich die Idee, den Au­totacho abstrahiert als Illustration darzustellen und den User damit interagieren zu lassen: Er kann den Wagen starten, beschleunigen und stoppen – und hört dabei den echten Sound des Motors.

1. Illustrationen und Motion Blur erzeugen

Für die Darstellung des Tachometers verwen­deten die Kreativen eine vom Dashboard des GTstreet R abgeleitete Vektorgrafik . Mit der Canvas API erzeugten sie eine zum Sound passende Amplitude . Die Grafik hinterlegten sie wiede­rum mit einem Foto, das parallel zur Beschleunigung weichgezeichnet wird. Dies visualisiert nicht nur die Geschwindigkeit, sondern lenkt die Aufmerksamkeit zugleich auf den Tacho.

2. Echten Motorsound extrahieren und bearbeiten

Die Audiodateien extrahierte Dorfjungs aus dem Video einer Dashboard-Cam, in dem der GTstreet R tatsächlich von 0 auf 100 Stun­denkilometer beschleunigte. Die Kreativen wähl­ten in Adobes Audioeditor Audition die entsprechen­den Tonabschnitte aus, filterten die Hintergrundgeräusche heraus, reduzierten die Dateigröße und exportierten sie als MP3-Dateien. Dabei versuchten sie, die Bitrate so hoch wie möglich zu halten, um fließende Übergänge zwischen den verschiedenen Audioabschnitten zu erreichen.

3. Soundwiedergabe an die User Experience anpassen

Im nächsten Schritt stimmte Dorfjungs die Audiofiles mithilfe der Web Audio API auf die exakten Frames der vier Stufen des Moduls ab: Motor anlassen, beschleunigen, Geschwindigkeit halten und stoppen. Nach mehreren Tests und beim Prototyping des Moduls stellte sich allerdings heraus, dass eine der Echtzeit entsprechende Darstellung der Beschleunigung nicht sinnvoll ist. »2,5 Sekunden sind viel zu schnell, um dem User eine über­zeugende Erfahrung zu bieten. Entsprechend haben wir uns entschieden, zugunsten der User Experience auf eine zu 100 Prozent korrekte Wiedergabe zu verzichten, und das Soundfile etwas länger gezogen«, erklärt Jonas Marckert.

4. Tacho animieren und Interaktivität hinzufügen

Nun animierte das Team mittels GSAP den Geschwindigkeitsmesser samt Zähler. Dabei wurde jede Animation so genau wie möglich auf den entsprechenden Soundabschnitt abgestimmt. Der letzte Schritt bestand darin, die Steuerelemente für die diversen Phasen zu implemen­tieren. Ein interaktives Label, das neben dem nut­zer­de­fi­nier­ten Cursor der Website erscheint, führt die Use­r:in­nen durch jeden Schritt der Beschleunigung.

Dieser Artikel ist in PAGE 02.2022 erschienen. Die komplette Ausgabe können Sie hier runterladen.

PAGE 2.2022

Produkt-Details anzeigen

Digital-Avantgarde Fashion ++ Design im Unternehmen ++ Schriftlizenzen im Wandel ++ Comic-Tools ++ SPECIAL dina Amin ++ Studio DIA und Kinetic Identities ++ Making-of Microsite für GTstreet R ++ Experience Design in der Praxis ++ Paper Art

• Download
• Print-Ausgabe

8,80 €

10,80 €

Lieferzeit: 2-3 Werktage

AGB