The Sustainable World Campaign Page
Für Zühlke haben wir das Thema Nachhaltigkeit neu gedacht. Die Kommunikation setzt auf eine Verbindung aus Technologie und Simplicity. Die Waschmaschine als Consumer Product ist Trägerin der Hauptbotschaft.
Anstelle der viel gesehen grünen Idealwelt-Darstellung einer nachhaltigen Welt, haben wir uns bewusst für eine technisch komplexe und urbane Welt entschieden. Die reduzierte und eigenständige Designsprache fügt sich nahtlos in die bestehende Markenwelt von Zühlke ein.
Verschiedene Kamerabewegungen lassen den Fokus auf die detailgetreue 3D-Waschmaschine richten. Über mehrere Rotationen und Drehungen erklären wir was Nachhaltigkeit in der Planung, im Design, in der Entwicklung, im Bau, im Unterhalt und im Wiederverwertungsprozess bedeutet. Konkrete Inhalte, knapp formuliert und technologisch raffiniert in Szene gesetzt.
Google Lighthouse misst einen Speed Index von 3 Sekunden und ganze 89 Punkte. Unsere kontinuierlichen Optimierungs- bestrebungen haben sich ausbezahlt. Wir haben die ganze Datenmenge auf rund 50MB reduziert und den JavaScript- Anteil so gering wir möglich gehalten und die Spielereien hauptsächlich mit nativem CSS Code umgesetzt. Für eine optimale Performance im Browser, wurde jeweils der Impact des Stylings (CSS) und der Impact des JavaScript getestet und kontinuierlich optimiert.
Wir haben mehr als eine responsive Umsetzung implementiert. Je nach Aspect Ratio (Portrait oder Landscape) setzen sich die Inhalte anders zusammen. Innerhalb der Aspect Ratios verhalten sich die Inhalte grösstenteils fluid, d.h. sie wachsen proportional zur Bildschirmgrösse bis ca. 3’200 Pixel Bildschirmbreite.
Die initiale Weltkugel wird mit Three.js gerendert und liegt auf einem mit glsl-Shaders generierten Sternenhimmel. Die einzelnen Sequenzen der Assets werden auf dem Canvas als Sprites je nach Screen Size unterschiedlich gross ausgegeben. Durch die Umsetzung der 3D Renderings als Sprites können wir den Konsum von CPU und GPU minimieren und bieten so auch auf dem Smartphone die gleich tolle Experience.
Die Animationen beruhen hauptsächlich auf nativem CSS Code, punktuell wurde unterstützend GSAP (JavaScript- Library) eingesetzt. Die ganze Experience wird mit Nuxt basierend auf Vue 3 in eine statische Webseite generiert.
