Responses by Simona Frulio, art director; Antonio Starace, web designer; Alberto Oliva, developer; Giuseppe Langella, strategist; and Rossella Oliva, strategist, Mediasoul.

Background: Hotel Capo La Gala is a luxury hotel located on a particularly stunning stretch of the Sorrento Coast. The location, a rocky cliff literally sitting over the sea, makes it no wonder that the hotel has experienced a significant increase in its business over the past five years mainly from the United States and the United Kingdom. The hotel’s wider visibility and growing reputation drove the need to revamp its digital platform in a way that would help communicate the experiential value of this luxury hotel. We were asked to define a new content strategy and a new website for the hotel to better convey its identity and offerings.

Design core: The main challenge was to create a instantly captivating home page that would immediately convey the USP of this hotel. We built the pool setup in the hero image to enhance the feeling of freedom and ease given by the hotel’s natural environment, a feeling that extends into its accommodations as well. The chosen perspective communicates the hotel’s values effectively, keeping the “on the sea” promise. Our intention was to make customers feel the sea breeze on their skin, and this was a key aspect of the communication strategy. We achieved this by creating a stop-motion image along with a Cinemagraph to support our copy.

Challenges: The most complex aspect was imagining and creating the opening hero image, the production of which required more than one photo-shooting session to evaluate all daylight possibilities and mood throughout the whole day. The site’s photography was shot by Umberto D’Aniello and Gianni De Gennaro.

Divergent paths: If we could redo the site, we would certainly give more room to video content in order to better drive our storytelling idea—especially in the dining section.

Navigation structure: We think that navigation menus should have its own embellishments to encourage the user to make use of it. That’s why we put special care into this on the site with scripted animations that make the words appear letter by letter. We also used the same technique to achieve a very pleasant rollover effect, which appears as a veil on the menu button—rather than just a color change.

Since we strive to apply our storytelling approach to every luxury web project, we designed the navigation layout on Capo La Gala’s site to let users browse without opening the menu once. Contextual calls to action are placed at the bottom of every page. Our added special touch persuades users to click on them.

Technology: We at Mediasoul like to consider ourselves “web artisans.” We love to start all our projects from scratch. There is no visual composer, no projecting tool or any kind of template: only well-written code. Apart from the well-defined basic skills we all know about—HTML5, CSS, etc.—we tried to take advantage of everything we had at our disposal in order to enhance the UX and UI: Whenever possible, we used SVG logos to make them appear crispy even when scaled down for mobile phones. We used Canvas to enhance the “fluid” appearance of the word AQUARIUM, which directs customers to enter the wellness section. And we used WebGL animations to simulate a water layer on each call to action at the bottom of pages—this kind of effect reinforces, once again, the natural ocean environment felt throughout the whole website.

Every animation on the website takes advantage of hardware compositing—using the dedicated video card of your desktop or mobile device—and by using a self-written framework that we define as “JavaScript-driven CSS animations.”