Loading ...

Responses by Monogrid.

Background: This site elevates Gucci Beauty’s festive campaign through a captivating WebGL-powered experience. Users explore a nocturnal enchanted garden, set in an aquatic environment, to discover hero products. A Gift Finder prompts users with questions to identify the perfect gift.

Larger picture: The site was crucial in the ecosystem of Gucci Beauty’s Christmas gift campaign, with the site accessible through Gucci stores, through QR code totems, as well as through select global retailers like Sephora and Marrionaud. The site’s design aligned with both in-store and online sales events to enchant the audience, promote product lines and facilitate individual product sales. Numerous Gucci retailers also integrated the Gift Finder experience into their brand sections.

Design core: The site employs advanced real-time 3-D graphics that enable users to navigate freely in a realistic flower field. Using advanced lighting, animation and post-processing techniques, we are able to create a truly magical atmosphere in the experience.

Favorite details: The quality of the real-time 3-D render, which creates enchanting elements such as water reflection, the aurora and the magical flower that blooms. The smooth animation coupled with great performance across various devices made us really happy with the outcome.

Challenges: Ensuring an optimal performance on various devices, including tablets and mobile phones that may not have the same hardware capabilities that can match the robust performance of computers. This is especially crucial for a 3-D heavy website.

Alternate paths: We could have designed the flower field in a different matter by utilizing simple quads instead of the custom planes exported from Blender. This choice would have rendered the field responsive to a simulated wind, akin to the effect we applied to the background trees. Additionally, we might have adopted an alternative strategy for depicting the products within the flowers, harnessing the capabilities of motion vector textures to achieve a more realistic appearance.

New lessons: We learned how to seamlessly blend multiple WebGL scenes using render targets. Additionally, we explored a suitable approach to managing camera spline animations, allowing us to finely control both its movement and focus.

Navigation structure: With our navigation, we wanted the user to feel like they were within the Gucci Beauty campaign, moving from flower to flower in a magical garden and discovering products hidden in the colorful petals. Every transition and camera movement were carefully designed to represent the point of view shifting between different sections of the environment. We let the user move between flowers by scrolling, normalizing the velocity between trackpad, drag and mouse wheel, and we also added left and right arrows to help them explore the flower one by one and facilitate the platform’s usability.

Shifting from the garden view in the product hero section to the lake view in the Gift Finder, we also created an immersive camera movement with a magical page transition to create the illusion of pivoting the user’s perspective.

Technology: We used the latest web technologies to deliver the website with the best practices of HTML, CSS and JavaScript, using a Vue.js framework alongside GSAP for an enhanced user experience. For the realtime 3-D experience, we exploited the power of WebGL with the three.js library.

Special technical features: A custom 3-D particle generator seamlessly triggered by mouse movement with projecting distance based on camera movement. This feature adds an extra layer of interactivity and visual appeal, providing a dynamic element to the user interface.

Refined reflections with a custom reflector material—we implemented a custom reflector material, letting us finely control resolution and the bounding box for the reflection mesh. This attention to detail enhances the overall visual quality of our website based on each device.

Optimized WebGL performance with a custom WebGL performance optimizer (WPO). Our use of a custom WPO ensures an efficient rendering process tailored to the specifications of the user’s device. This adaptive approach guarantees a smooth and responsive experience, regardless of the device’s capabilities.

guccibeautywishes.gucci.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In