UX/UI DesignVue.jsThree.jsNuxt.js

CommeSoie Foodstyling Website Relaunch

A laptop screen displays a website with images of food, including a fruit tart, surrounded by ingredients and kitchen items.

Für diesen Relaunch haben wir uns zum Ziel gesetzt, das Thema Food Appeal auf noch nie dagewesene Art und Weise digital zu inszenieren und eine einmalige User Experience zu kreieren.

Die Experience ist so lebhaft, als würde die Webseiten- Besucherin die Kamera selbst in der Hand halten und durch Sujets scrollen und “abdrücken” – viel Spass.

Die einzelnen Assets liegen auf einem dreidimensionalen Canvas, wobei sich die einzelnen Bilder oder Videos aus dem Raum zum Besucher hin- und von ihm weg bewegen.

Dynamic infographic with four numbered quadrants in various colors, connected by arrows. Labels include "kleinster Zustand" and "größter Zustand.

Die Kamera ist 360° mit dem Cursor steuerbar und verkörpert durch ihre sensitive Einstellung maximalen Freiraum. So lassen sich die Meisterwerke der Photographie ganz neu in Szene setzen.

Um die Dramatisierung der Scrolling Experience nochmals zu verstärken haben wir mit dem Blur-Effekt ein echtes “Take the Shot” Erlebnis geschaffen. On Hover erscheint ein View Finder, der kurz “scharfstellt” bevor die Besucherin in die Bildstrecke eintaucht.

Von der Startseite aus soll die einzelne Fotostrecke aufregend angekündigt werden. Wir symbolisieren hier eine Bühne mit Vorhang in drei Sequenzen – eine rhythmische, abgestimmte Transition mit viel Spannung.

Two hands hold a green plate with a cake topped with sliced oranges and rosemary sprigs on a dark textured background.

Die leicht parallaxierende Anordnung der Bilder auf dem Canvas gemeinsam mit dem dezent justierten Easing der Bewegung schaffen es die Schönheit der Bildkompositionen wieder zu geben – eine echte Bühne für die Kunst der Fotografie.

Chocolate bundt cake on a wire rack, surrounded by lilac flowers and metal bowls on a dark surface.

Die Home Experience wurde mithilfe der three.js Library auf einem HTML-Canvas abgebildet. Die Bilder werden auf sogenannte “Planes” gemapped und bewegen sich im Loop auf der z-Achse auf die Kamera zu.

A rustic table displays a variety of vegetables: purple cabbage, kohlrabi, eggplants, purple potatoes, chard, and basil, arranged on brown paper and a wooden board with a knife.