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

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.

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.

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.