Emotional Design:
Transferring the Cap Rocat brand experience to the online environment has required an immersion in that personal universe, which is the result of the mixture of Antonio Obrador‘s vital and aesthetic sense with the exquisiteness of experience and personalised service that define the hotels managed by Marugal. An exercise in emotional design that is born from the power of storytelling, from the capacity of human beings to marvel, to get hooked on good stories and to bond with them. And Cap Rocat’s is one of them.
The first piece of that construction is posed in the copies. In them, the aseptic description gives way to the narration of the experience, almost delightful, turning the virtual walk around Cap Rocat into the beginning of what will be the experience for the client, and the memory of his stay there, the travel album of those experiences that mark lives.
Three key aspects have been worked on in the design part. On the one hand, the weight of photography in the construction of Cap Rocat’s imagery was obvious, and it has been applied to all the images (from different photographers and different styles) to a profile that would achieve that dominant golden light in this dream setting with a homogeneous result.
An Unique typoghraphic work:
Moreover, Cap Rocat’s experiential storytelling and style required unique typographical work. Using the Freight Big Pro Light family of typefaces in big headlines gave us the elegance, the restful and distinguished style we were looking for. Its combination with the same family in italics within the same sentence helped us to create the rhythm, cadence, and pause characteristic of great travel stories, emphasizing what we wanted to highlight in each block of content.
Design has also taken into account the awards and acknowledgements received by the rehabilitation project, such as those of UNESCO heritage, Europa Nostra, España Nostra, the Fortress study award or Natura2000.
A visual journey:
Finally, we needed a design that was natural, that did not present the contents as watertight compartments but connected some themes with others in a simple and continuous way. The modular design was proposed in two directions, one horizontal to differentiate types of content within the same page, and at the same time a liquid interface that poses a vertical visual tour. Thus, the eye manages to read in a continuous route from the top of the interface to the bottom in a natural and uncut way. Smooth, continuous, delicate… like good bedtime stories.
On a technological level, parallax effects and hidden preloads were implemented that make caprocat.com a much more fluid journey, without page refreshing, and that accelerate navigation in a transparent way. We took advantage of the interaction of the mouse over the links to launch the preload of the content when rollover. When the user clicks, we already have some of the new content loaded, achieving faster navigation.
