Responses by Monwest and Rōnin Amsterdam.

Background: Zeelander Yachts creates elegant, pristine yachts for those who seek only the finest and most extraordinary craftsmanship. The Zeelander website transformed the product’s excellence into a complete brand experience. Potential Zeelander owners can experience the brand’s philosophy firsthand by exploring its website, which has a contemporary, timeless visual language that seeks to cultivate serenity through style and interaction.

Larger picture: The site forms a part of Zeelander Yachts’s rebranding, designed by Rōnin Amsterdam. The website serves as the digital introduction to the new brand identity where people can discover its yachts at any time online. We wanted to create a high-end digital representation that accurately represents its extraordinary craftsmanship.

As a customer’s online experience has become more important than ever, Rōnin Amsterdam created an environment where digital plays a crucial role in how customers interact with the Zeelander brand. We’ve created a new user experience design, uniquely designed pages and motion graphics for the entire website.

Design core: It’s hard to find the words needed to describe a Zeelander yacht; sometimes, you just need to experience it. At Rōnin Amsterdam, we believe in speaking to the heart of the customer and letting the rational mind follow. We do so by emphasizing the emotional value of the product in user experience, design and motion graphics. One of the site’s core features is making dense and information-heavy product specifications and descriptions easy to understand and delightful to browse through.

The Zeelander site has exceptional photography throughout, and we’ve ensured that it’s presented in high quality. As a result, the products are able to speak for themselves, while visitors have an enjoyable experience discovering more about the brand online.

Favorite details: We struck a balance between telling the product’s story and inspiring desire without overselling it. Our typography treatment elevates and emphasizes copywriting in a modest way. The website animation is minimal, smooth and calm, guiding the user through the site as they get immersed in the brand’s experience without being distracted.

Challenges: We wanted to bring the smooth, luxurious and effortless feel of the product into the site without overanimating elements or making it hard for the audience to navigate or read the content.

Based on motion designs made by Rōnin Amsterdam, the development and the creative teams worked together to fine-tune the feeling we wanted to get across while visiting the website. In the end, this resulted in an excellent balance between subtly animated photography and eye-catching content reveals.

Technology: Performance and quick loading times were high priorities for this project, so we used Next.js for the foundation of the website. The images are loaded asynchronously, and when loading, an aesthetically pleasing placeholder generated with BlurHash is displayed. Custom logic is written to create a smooth-scrolling experience with seamless page transitions. All microanimations and details are created with the GSAP library.

Special technical features: On the sliders, we use the GSAP Inertia plugin that makes navigating through the slides just a little bit more natural and smooth. For animating signatures to get a handwritten feel, a character-by-character mask works the best in our honest opinion.