Eine Microsite rückt neue Farben & Formen ins richtige Licht

Auf einen Blick

  • Branche: Möbelindustrie
  • Jahr: 2024
  • Projekt: Kampagnen Microsite
  • Leistungen: Konzept, Kreation, Design, 3D Visualisierung, technische Umsetzung, Schnittstellenanbindung
  • Technologie: Blender, Three.js, Bootstrap, NodeJS mit ExpressJS, Handlebars, Webpack, TYPO3

Lista Office LO

Die Lista Office LO ist ein renommiertes Schweizer Unternehmen, das sich auf die Entwicklung und Herstellung innovativer Büromöbel spezialisiert hat. Sie bieten massgeschneiderte Lösungen für die Gestaltung von Arbeitsplätzen, die Funktionalität, Ergonomie und Design harmonisch vereinen.

Ausgangslage und Ziele

Ende des letzten Jahres plante unsere Kundin Lista Office LO eine Marketingkampagne zur Einführung ihrer neuen Materialien und Farben für Büromöbel. Mit dem Wunsch, deren Markteinführung effektiv zu kommunizieren und zu vermarkten, wendeten sie sich an Snowflake, um eine passende Idee zu entwickeln.

Das Ziel war es, eine digitale Strategie zu schaffen, die es ermöglichte, die neuen Materialien und Farben auf innovative und ansprechende Weise zu präsentieren und potenzielle Kunden zu erreichen. Unsere Aufgabe bestand darin, ein Konzept zu entwickeln, das nicht nur die neuen Materialien hervorhebt, sondern auch die Eleganz, Individualität und Anpassbarkeit der Möbel betont.

Das Ergebnis

Meilensteine des Projekts

  • Ideenentwicklung
    Ganz zu Anfang des Projekts haben wir uns zunächst Gedanken dazu gemacht, wie die neuen Farben der Lista Office LO bestmöglichst in Szene gesetzt werden um ein einmaliges und grossartiges Erlebnis zu bieten. In dem Ideenfindungsprozess haben wir uns schliesslich für eine Microsite entschieden.
  • Kreation und Prototyping
    Wir haben mit Figma und Dora ein Konzept für die Microsite entwickelt und einen interaktiven Prototyp erstellt und der Lista Office LO präsentiert.
  • 3D Visualisierungen in Blender
    Durch die Verwendung von 3D-Visualisierungen konnten wir verschiedene Kompositionen und Anwendungen der neuen Materialien auf den Möbelstücken präsentieren, wodurch potenzielle Kunden ein lebendiges und realitätsnahes Bild erhalten.
  • Responsive Umsetzung mit Three.js
    Die erstellten 3D Objekte, als auch die Animationen sollen natürlich auf jeder Displaygrösse perfekt aussehen und funktionieren.
  • Anpassung an verschiedene Framerates
    Um eine reibungslose Darstellung auf allen Endgeräten sicherzustellen, mussten die 3D-Animationen an verschiedene Framerates angepasst werden (60 FPS vs. 240 FPS).
  • Integration von Microanimations
    Für eine Extraportion an Dynamik und Moderne haben wir verschiedene Mikro-Animationen in die Seite eingebaut.
  • Interdiziplinäres "Pairprogramming"
    Ein Team mit Personen aus vier verschiedenen Arbeitsbereichen (Projektmanagement, UX/UI Design, 3D-Design und Programmierung + Kunde) hat an diesem Projekt eng zusammengearbeitet

Vorgehensweise und Lösungen

Konzeption und Kreation

Unser Konzept bestand aus einer Kombination von 3D-Objekten und stimmungsvoller Musik, die die Essenz der Möbelkollektion einfängt. Durch die Verwendung von 3D-Visualisierungen konnten wir verschiedene Kompositionen und Anwendungen der neuen Materialien auf den Möbelstücken präsentieren, wodurch potenzielle Kunden ein lebendiges und realitätsnahes Bild erhalten.

Die Auswahl einer stimmungsvollen Musikuntermalung trägt dazu bei, eine emotionale Verbindung zu den Möbeln herzustellen und die gewünschten Werte von Schlichtheit, Wertigkeit und Eleganz zu vermitteln. Durch die Betonung der individuellen Anpassbarkeit wurde auch die Vielseitigkeit der Möbel hervorgehoben, die es Kunden:innen ermöglicht, ihre Arbeitsumgebung nach ihren eigenen Bedürfnissen und Vorlieben zu gestalten.

Ähnliche Herausforderung?
Sprechen Sie mit uns!

Kontakt
Interdisziplinäre Zusammenarbeit

Um das angestrebte Ziel zu erreichen, arbeiteten das Designteam, unser 3D-Spezialist sowie das Entwicklungsteam eng zusammen und stimmten sich laufend ab. Das Designteam erschuf die gestalterische Vision, während die 3D-Abteilung die Darstellungen der Möbel und deren neuen Materialien lieferten. Das Entwicklungsteam integrierte sowohl die 3D-Objekte also auch die weiteren interaktiven Elemente in die Microsite. Diese enge Zusammenarbeit führte zur Realisierung einer inspirierenden und benutzerfreundlichen Anwendung.

Das Ergebnis

Herausforderungen und Besonderheiten

Die Entwicklung stand während des Projekts "Lista Office Colors" vor verschiedenen Herausforderungen.

3D Visualisierungen

Für die Bearbeitung und Erstellung der 3D-Objekte wurde Blender verwendet, eine Open Source Software für 3D-Modellierung und Animation. Die erste Schwierigkeit bestand darin, die Polygonanzahl der Modelle zu reduzieren, um eine bessere Performance im Web zu erreichen. Polygone sind vergleichbar mit Pixeln in einem Bild und je weniger Polygone, desto weniger Leistung verbraucht das 3D-Modell. Die Herausforderung bestand darin, dass alle Modelle manuell reduziert werden mussten, damit keine wichtigen Details verloren gingen.

Die grösste Challenge war es, Licht und Schatten so realistisch wie möglich darzustellen. Da es technisch nicht möglich ist eine realistische Lichtberechnung live im Web zu erstellen, wurden Licht und Schatten in Blender berechnet und in die Materialien eingefügt. Auf diese Weise war eine Echtzeitberechnung nicht mehr notwendig.


Technische Umsetzung

Um die Möbel bestmöglich als 3D Modelle darzustellen und ihre Ästhetik zu betonen, war es wichtig, die optimale Kameraperspektive zu finden. Eine Herausforderung bestand darin, die Schatten bei den Möbeln korrekt zu handhaben, um eine realistische Darstellung zu gewährleisten und die visuelle Wirkung zu verbessern.

Mikro-Animationen

Schliesslich war die Integration vieler Mikro-Animationen erforderlich, um das Benutzererlebnis zu verbessern und eine dynamische und ansprechende Präsentation der Möbel zu ermöglichen. Hierfür wurden spezielle Techniken und Tools verwendet, dazu gehörte die Verwendung von THREE.js, eine leistungsstarke JavaScript-Bibliothek. Es war das erste Mal, dass THREE.js in einem Kundenprojekt eingesetzt wurde, was Herausforderungen mit sich brachte, aber auch neue Möglichkeiten eröffnete.

Hinter dem Namen LO Colors verbirgt sich ein sehr komplexes Projekt der Lista Office LO. LO Colors steht für ein aktualisiertes Farbsortiment sämtlicher LO Produkte.

Hinter dem Namen LO Colors verbirgt sich ein sehr komplexes Projekt der Lista Office LO. LO Colors steht für ein aktualisiertes Farbsortiment sämtlicher LO Produkte.

Einen massgeblichen Erfolg bei der Markteinführung von LO Colors darf hier Snowflake zugestanden werden. Mit ihrem herausragenden Gespür für Design, einem professionellen Projektmanagement und einer top Umsetzungsqualität ist es LO gelungen, die gewünschte Aufmerksamkeit im Markt zu erzielen. Wir bedanken uns für die tolle Zusammenarbeit beim gesamten Snowflake-Team.

Einen massgeblichen Erfolg bei der Markteinführung von LO Colors darf hier Snowflake zugestanden werden. Mit ihrem herausragenden Gespür für Design, einem professionellen Projektmanagement und einer top Umsetzungsqualität ist es LO gelungen, die gewünschte Aufmerksamkeit im Markt zu erzielen. Wir bedanken uns für die tolle Zusammenarbeit beim gesamten Snowflake-Team.

Es freut uns, euch bei diesem wichtigen Projekt eine passende und ansprechende Lösung geboten zu haben, die eure neuen Farben gebührend präsentiert. Vielen Dank an euch für das Vertrauen und die hervorragende Zusammenarbeit.

Es freut uns, euch bei diesem wichtigen Projekt eine passende und ansprechende Lösung geboten zu haben, die eure neuen Farben gebührend präsentiert. Vielen Dank an euch für das Vertrauen und die hervorragende Zusammenarbeit.