GRAPHIC DESIGN by CÉDRIC VÉRAUD

2017 L'hôtel Vice Versa, décoré par Chantal Thomass sur le thème des sept péchés capitaux, avait besoin d'un site web à la hauteur de ses envies et s'est naturellement tourné vers le spécialiste parisien du genre : l'agence Webcom. Prestataire régulier pour cette agence depuis quelques années, j'ai été mis à contribution pour imaginer et mettre en oeuvre la maquette graphique complète de ce projet.

MA MISSION
Créer une maquette web responsive pouvant être intégrée facilement au CMS Webcom - Prévoir l'habillage spécifique du module de réservation - Respecter l'identité de l'hôtel aux caractères graphiques chics et à l'identité décadente très marqués - S'appuyer sur la dominance quasi-noire + rouge imposée.

Après quelques échanges préparatoires nous avons opté pour une mise en page en colonnes alternées (chaque ligne est inversée) : quatre sur les écrans larges, deux en version tablette, et une seule colonne en version mobile. Des pages spéciales sont ajoutées (business, actu, situation...) ayant chacune certaines spécificités (footer différent, gestion de contenu dynamique, etc...). Techniquement, nous nous appuyons sur le framework adaptative déjà présent dans le CMS Webcom (voir plus bas).

Les menus
Par défaut le menu principal est minimisé (burger) et reste toujours fixe en haut à gauche du logo, le module d'accès rapide aux réservations reste également accessible en haut à droite sur toutes les pages mais est minimisé au scroll pour ne pas gêner la lecture. Enfin, une pop-up s'ouvre sur le header en cas d'offre spéciale ou temporaire.

L'offre de Vice-Versa s'axe autour de deux gammes (Classique / Deluxe) à l'intérieur desquelles le niveau de prestation est similaire pour toutes les chambres. Le choix se porte alors sur l'une des 7 ambiances proposées dans chaque gamme.

En pratique
La page "Chambres" s'ouvre donc sur le modèle de listing développé précédemment. Chaque chambre est présentée accompagnée d'un diaporama actif que l'on peut agrandir. Les services pour chaque gamme sont présentés sous forme de listing en accordéons verticaux, sur deux colonnes.