Hôtel de Diane

Contexte

Depuis la reprise de l’hôtel, l’hôtel de Diane a bien évolué pour offrir une expérience haut de gamme à Sable d’Or les Pins, tout proche du Cap Fréhel. Le propriétaire souhaite faire évoluer son site Internet pour le mettre en adéquation avec ces changements. Elles doivent donner une large place aux visuels, et plus globalement une modernisation de l’expérience utilisateur.

Durant mon alternance chez Altelis, j'ai eu l'opportunité de prendre en charge la refonte du site web de l'Hôtel de Diane. Une première étape de wireframing et de maquettage a permis de donner au client un aperçu de l'apparence du nouveau site. Puis j’ai pu développer et intégrer ces maquettes sur Webflow.

Identité visuelle

L'Hôtel de Diane possédait déjà son propre logo, mais son identité visuelle n'était plus cohérente avec sa nature et demandait à être renouvelée.

Avec une décoration d'intérieur typique des années folles et des années 20, c'est à travers la typographie principale que sont apparues les prémices d'une charte en harmonie avec l'hôtel.
Cette typographie droite et fine qui apporte plus d'élégance aux titres, mais aussi avec parfois des ligatures étonnantes rappelant des insignes que l'on retrouve en bord de mer.

Contrasté avec une typographie de corps de texte minimale et moderne, l'Hôtel de Diane noue son histoire passée et son développement futur.

Ce contraste se retrouve également dans les couleurs avec une palette limitée d'un noir-vert très profond et à un blanc-vert très légèrement cassé. Brisant avec l'ancienne charte, considérée par les propriétaires comme trop terne et datée.

Maquette

Le nouveau site de l'Hôtel de Diane s'inspire des mises en page des magazines de décoration d'intérieur en laissant une grande place pour les photographies permettant de mettre en valeur l'hôtel et ses services. Chaque section est clairement définie avec un titre clair, facilement identifiable par les utilisateurs.

J'ai souhaité apporter l'univers des vacances avec des illustrations de timbres aux traits fins et représentatifs des paysages que l'on retrouve autour de l'hôtel. Mais aussi par les carrousels de photos sous la forme de piles de photos de vacances que l'on fait défiler.

Les maquettes Figma ont permis de retranscrire l'identité de l'hôtel sur le site web et proposer des versions convaincantes au client avant de passer au développement.

Développement Webflow

Une fois validée, j'ai pu développer le nouveau site web sur Webflow. Webflow m'a permis de développer aisément de nombreuses animations, notamment avec les carrousels qui apportent de la fluidité dans la navigation et permet de se démarquer d'un simple site statique.

Un point important concerne le responsive du site de l'hôtel, car aujourd'hui de nombreux utilisateurs réservent avec leurs smartphones, demandant ainsi une expérience aussi agréable que celle disponible pour les grands écrans.

Le SEO et l'accessibilité du site ont de même été travaillés afin que celui-ci soit bien classé dans les résultats de recherche et permettre à tous les utilisateurs de réserver.