Duten is thought for its refined designs that mix trendy aesthetics with sustainable ideas. Their product vary options quite a lot of finishes tailor-made to the wants of architects and inside designers, emphasising magnificence and sturdiness. They approached us with a transparent goal: redesigning their web site to higher replicate their model imaginative and prescient and improve their search engine optimization efficiency.
Their purpose was twofold: to create a design that highlights Duten’s premium nature and to develop a technically strong platform for improved search engine visibility and scalability.
Design Imaginative and prescient
The design idea for the brand new Duten web site crafted by Sébastien Salord focuses on magnificence, minimalism, and readability to seize Duten’s premium aesthetic. Sébastien used ample white house to provide the merchandise room to face out and emphasised giant, high-quality visuals to create a hanging impression. The structure was thoughtfully structured to alternate between a fluid design that tells Duten’s story and a exact grid structure for product showcases, making a seamless mix of name narrative and product presentation.
Implementation
Tech Stack
We selected WordPress because the core platform for Duten’s new website. Regardless of the growing recognition of headless setups, WordPress affords the right combination of flexibility, scalability, and strong search engine optimization options, making it the best alternative for this undertaking. Utilizing Polar, our customized WordPress starter theme, we are able to obtain the modularity often seen in trendy JavaScript frameworks, offering reusable elements and optimised loading methods for each CSS and JS.
To ship a quick and responsive expertise, we built-in a set of front-end libraries:
- GSAP: For the sleek, dynamic animations.
- Luge: To regulate the general consumer expertise and website’s lifecycle.
- Lenis: Allow clean scrolling.
- Swiper: Used for implementing glossy, touch-based sliders and carousels.
These libraries mixed, utilizing Webpack, to create a seamless, interactive expertise that feels mild and fascinating on each desktop and cell gadgets.
Focus 1: 3D Product View
The Problem
One of many foremost challenges was presenting Duten’s merchandise in a approach that retained the high-quality 3D renderings seen of their photographs. To realize this, we determined to make use of picture sequences, permitting us to maintain the visible integrity of the renderings whereas making certain clean and responsive interactions.
Our Method
We labored with Duten’s 3D designer to create sequences of 180 high-quality 3D renderings of their merchandise. This strategy allowed us to copy the 3D impact utilizing image-based animation, making certain clean efficiency throughout all gadgets. The interplay is intuitive: as customers transfer their mouse horizontally, the product rotates, providing a whole view.
To present the product a floating impact, we launched a delicate 2D animation that provides a contact of realism.
Transparency was wanted to indicate the product over a fullscreen title. As a substitute of utilizing normal PNG photographs, which might have considerably elevated the file dimension, we transformed the photographs to JPEG format. We separated the alpha channel into easy black-and-white PNG photographs. Each photographs are then mixed utilizing a 2D canvas operation, successfully preserving high quality whereas optimising efficiency.
Focus 2: Interactive Shapes
The Inspiration
Duten’s emphasis on precision and trendy design impressed Sébastien to include geometric shapes that mimic architectural strains and drawings. We needed these shapes to be greater than static decorations; they wanted to be alive, interactive, and fluid.
Implementation
Utilizing SVG and JavaScript, we constructed an interactive mesh of factors that dynamically shifts and strikes throughout the display screen. Every level on this mesh strikes with a sinusoidal wave impact, making a tender, rhythmic movement that mimics pure patterns. The mesh reacts to the consumer’s mouse motion with elastic ripples, including a layer of interactivity to the consumer expertise.
The design’s flexibility allowed us to play with totally different visible types—switching from sq. grids to round patterns or attaching circles to every level—remodeling the feel and appear with minimal changes. This adaptability retains the visuals recent and fascinating as customers navigate the positioning.
Focus 3: End Texture Animation
The Goal
Duten’s high-quality finishes are a key differentiator, so we wanted a solution to spotlight these textures in a visually hanging and interactive method. The purpose was to showcase the main points of every end utilizing an surprising impact that may seize consideration and invite exploration.
Inventive Answer
We developed a liquid-like texture reveal animation utilizing the “gooey” impact method with SVG filters.
We began by making a particle system that responds to mouse interactions, with particles rising in dimension based mostly on cursor velocity.
The particles are then merged into clean, natural shapes that naturally mix as particles transfer.
To disclose the end textures, we used a composite filter that fills the gooey particles with the feel picture. Lastly, a textual content masks reduce off the outer space, protecting solely the feel throughout the textual content.
This method not solely provides a layer of interactivity but in addition elevates how customers expertise Duten’s product finishes in a approach that feels progressive and fascinating.
Conclusion
The Duten web site redesign undertaking showcases how seamless collaboration between designers and builders can take a model’s digital expertise to the subsequent degree. The brand new website communicates Duten’s premium picture and trendy imaginative and prescient extra successfully and units a powerful basis for future scalability and development.
Because the relaunch, Duten has seen a big improve in natural visitors, which has greater than doubled because of the improved search engine optimization technique. The web site now stands as a sturdy, high-performance platform that continues to draw and have interaction customers whereas solidifying Duten’s place as a market chief in premium sanitary options.
