Responses by Robbert Schefman, art director; Rob Smittenaar, developer; and Ronald Gijezen, design and motion designer, Exo Ape.

Background: The purpose of the site was to create an extra layer of digital experience to support the opening of the brand new The St. Regis Venice hotel.

The website was built for what The St. Regis calls “The Luminaries,” a class of global influencers and tastemakers who are ambitious, cultured and self-assured. They appreciate discretion and the beautiful things in life: intelligent, curated and detailed. This is exactly the reason why we came up with this tailor-made solution that strikes the perfect balance between avant-garde aesthetics and technical performance.
 
Design core: It was our job to translate a classic brand of great subtlety and refinement into a one-of-a-kind digital experience. The final product is a unique one-pager, divided by chapters, that guides visitors through the St. Regis’s brand promise and key benefits while highlighting hotel specific details.

Every module was meticulously crafted with a great eye for detail. We have extended the colors and interior design of the hotel into the online experience to create a seamless transition between the online and offline worlds.
 
Challenges: The initial request was a one-pager with a few components that eventually resulted in a complete website with a large number of different assets and interactions on just one page. The amount of content caused some serious performance issues, which we managed to optimize into a smooth scrolling experience.
 
Navigation structure: Since the page is quite long, we added chapters and a smooth-anchor scroll feature to make navigating the page a breeze.
 
Technology: The front end is built using HTML5, SCSS, Webpack, JavaScript ES6 and package management program Yarn. Animations were created with the GreenSock Animation Platform. The logo animation was first created in After Effects and rendered for the web with Lottie. The back end is a custom Wordpress theme with flexible content blocks that give the content manager the possibility to drag and drop any custom-created modules they desire.

Anything else? Since the client requested a one-page website without the need for deep linking, a lot of content was pushed on a single page—resulting in heavy loading. We reduced some of the image-loading times by adding lazy load techniques, meaning images load while the user scrolls and reaches the modules. The modal content was loaded through AJAX to reduce loading even more.

All components can be colorized with a field in the back end. These color transitions happen when users interact with the website or scroll through different components. We built a custom cursor that interacts with the user mouse position and click state.

To complete the overall experience, we added some subtle parallax, image masks and sticky scroll effects to display all the different content in various ways.