From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Duten is known for its sophisticated designs that blend modern aesthetics with sustainable principles. Their product range features a variety of finishes tailored to the needs of architects and interior designers, emphasising elegance and durability. They approached us with a clear objective: redesigning their website to better reflect their brand vision and enhance their SEO performance.
Their goal was twofold: to create a design that highlights Duten’s premium nature and to develop a technically robust platform for improved search engine visibility and scalability.
Design Vision
The design concept for the new Duten website crafted by Sébastien Salord focuses on elegance, minimalism, and clarity to capture Duten’s premium aesthetic. Sébastien used ample white space to give the products room to stand out and emphasised large, high-quality visuals to create a striking impact. The layout was thoughtfully structured to alternate between a fluid design that tells Duten’s story and a precise grid layout for product showcases, creating a seamless blend of brand narrative and product presentation.
Implementation
Tech Stack
We chose WordPress as the core platform for Duten’s new site. Despite the increasing popularity of headless setups, WordPress offers the right mix of flexibility, scalability, and robust SEO features, making it the ideal choice for this project. Using Polar, our custom WordPress starter theme, we can achieve the modularity usually seen in modern JavaScript frameworks, providing reusable components and optimised loading strategies for both CSS and JS.
To deliver a fast and responsive experience, we integrated a set of front-end libraries:
- GSAP: For the smooth, dynamic animations.
- Luge: To control the overall user experience and site’s lifecycle.
- Lenis: Enable smooth scrolling.
- Swiper: Used for implementing sleek, touch-based sliders and carousels.
These libraries combined, using Webpack, to create a seamless, interactive experience that feels light and engaging on both desktop and mobile devices.
Focus 1: 3D Product View
The Challenge
One of the main challenges was presenting Duten’s products in a way that retained the high-quality 3D renderings seen in their images. To achieve this, we decided to use image sequences, allowing us to keep the visual integrity of the renderings while ensuring smooth and responsive interactions.
Our Approach
We worked with Duten’s 3D designer to create sequences of 180 high-quality 3D renderings of their products. This approach allowed us to replicate the 3D effect using image-based animation, ensuring smooth performance across all devices. The interaction is intuitive: as users move their mouse horizontally, the product rotates, offering a complete view.
To give the product a floating effect, we introduced a subtle 2D animation that adds a touch of realism.
Transparency was needed to show the product over a fullscreen title. Instead of using standard PNG images, which would have significantly increased the file size, we converted the images to JPEG format. We separated the alpha channel into simple black-and-white PNG images. Both images are then combined using a 2D canvas operation, effectively preserving quality while optimising performance.
Focus 2: Interactive Shapes
The Inspiration
Duten’s emphasis on precision and modern design inspired Sébastien to incorporate geometric shapes that mimic architectural lines and drawings. We wanted these shapes to be more than static decorations; they needed to be alive, interactive, and fluid.
Implementation
Using SVG and JavaScript, we built an interactive mesh of points that dynamically shifts and moves across the screen. Each point in this mesh moves with a sinusoidal wave effect, creating a soft, rhythmic motion that mimics natural patterns. The mesh reacts to the user’s mouse movement with elastic ripples, adding a layer of interactivity to the user experience.
The design’s flexibility allowed us to play with different visual styles—switching from square grids to circular patterns or attaching circles to each point—transforming the look and feel with minimal adjustments. This adaptability keeps the visuals fresh and engaging as users navigate the site.
Focus 3: Finish Texture Animation
The Objective
Duten’s high-quality finishes are a key differentiator, so we needed a way to highlight these textures in a visually striking and interactive manner. The goal was to showcase the details of each finish using an unexpected effect that would grab attention and invite exploration.
Creative Solution
We developed a liquid-like texture reveal animation using the “gooey” effect technique with SVG filters.
We started by creating a particle system that responds to mouse interactions, with particles growing in size based on cursor speed.
The particles are then merged into smooth, organic shapes that naturally blend as particles move.
To reveal the finish textures, we used a composite filter that fills the gooey particles with the texture image. Finally, a text mask cut off the outer area, keeping only the texture within the text.
This technique not only adds a layer of interactivity but also elevates how users experience Duten’s product finishes in a way that feels innovative and engaging.
Conclusion
The Duten website redesign project showcases how seamless collaboration between designers and developers can take a brand’s digital experience to the next level. The new site communicates Duten’s premium image and modern vision more effectively and sets a strong foundation for future scalability and growth.
Since the relaunch, Duten has seen a significant increase in organic traffic, which has more than doubled thanks to the improved SEO strategy. The website now stands as a robust, high-performance platform that continues to attract and engage users while solidifying Duten’s position as a market leader in premium sanitary solutions.
