Ein Designertaschen-Konfigurator ist ein vielseitiges digitales Tool, das sowohl internen Prozessen als auch dem Vertrieb dient. Er ermöglicht es Designern, Herstellern und Vertriebsteams, die Tasche an gewünschte Materialien oder Verschlüsse anzupassen und zu visualisieren. Intern vereinfacht er die Design- und Produktionsprozesse und fördert die Zusammenarbeit, die Prototypenerstellung sowie die Entscheidungsfindung im Team. Extern fungiert er als starkes Vertriebstool, mit dem Käufer ihre ideale Designertasche vor dem Kauf individuell anpassen und visualisieren können. Durch ein nahtloses, interaktives Erlebnis steigert der Konfigurator die Effizienz, verkürzt Produktionszeiten und sorgt für eine höhere Kundenbindung und -zufriedenheit.
Ziel dieses Designertaschen-Konfigurators ist es, Produktvarianten und detaillierte Informationen so zu präsentieren, dass sie die Produktanzeige visuell ergänzen. Daher lag der Fokus auf einer kreativen grafischen Umsetzung der Floating UI und ihrer Funktionsweise.
Die Floating UI muss:
Die Designertasche wurde in 3D Studio Max modelliert und in Vectary Studio importiert, wo sie in mehrere Teile zerlegt, texturiert und gebacken wurde. Die Stillleben-Umgebung wurde in Studio von Grund auf neu modelliert.
Die Beleuchtung ist bei diesem Projekt aufgrund des Schattenwurfs entscheidend. Ein zentrales rechteckiges Licht beleuchtet die Designertasche, während ein gerichtetes Licht Schatten von einer Pflanze in einem bestimmten Winkel auf den Hintergrund wirft. Dieses Setup ist dynamisch.
Die Szenenelemente, die die Stillleben-Umgebung bilden, weisen eine Pastell-Farbpalette auf, wodurch das Hauptobjekt im Vordergrund steht. Alle Objekte wurden gebacken, um den Realismus zu erhöhen. Die Designertasche ist in vier verschiedenen Farbvarianten erhältlich – jede eine Kopie eines Materials mit modifizierter Farbe, was die Dateigröße gering hält. Verschiedene Ledertexturen sind neben anderen Materialkategorien in der Studio-Materialbibliothek zu finden.
Tipp: Halte die Hintergrundgröße gering und nutze sie in Kombination mit Fading, um eine geringere Auflösung für gebackene Texturen zu verwenden.
Eine kleine Floating UI steuert die Sichtbarkeit von drei weiteren Floating UIs. Sie haben ähnliche Einstellungen, wobei die Position auf rechts und die Höhe auf „Ausfüllen“ (fill) eingestellt ist, um ein Layout ähnlich wie bei E-Commerce-Websites zu erzielen. Die Beschreibungs-FUI besteht nur aus Textelementen, die in verschiedenen Containern ausgerichtet sind. Die FUI mit Bildern, die als Trigger für den Materialwechsler dienen, ist durch ein 2x2-Raster in Container unterteilt. Die FUI mit Augmented Reality enthält einen QR-Code mit Text, der AR startet.
Standardmäßig sind nur die FUI mit dem Menü, das Wasserzeichen und das Logo sichtbar, während die anderen ausgeblendet sind. Durch Klicken auf verschiedene Buttons im Menü wird die Sichtbarkeit der ausgewählten FUIs ein- und ausgeschaltet.
Folgendes wird verwendet:
