Le site d’un hôtel, c’est la première visite des lieux : le client doit voir la chambre, sentir l’atmosphère et comprendre tout de suite comment réserver. À travers l’apart-hôtel Cardinal, je vous montre comment j’ai réalisé un site avec chambres, spa, restaurant, galerie et formulaires de réservation en fenêtre modale.
L’hôtel et sa demande
Cardinal est un apart-hôtel neuf de cinq étages à Truskavets, aux finitions écologiques : la buvette centrale est à trois minutes à pied, et un parc de promenade se trouve juste à côté. Les chambres disposent d’une cuisine et se vivent comme des appartements indépendants, avec tout autour une véritable infrastructure hôtelière : spa, restaurant avec bar, salon de beauté, salle de conférence, transferts et livraison des repas en chambre.
L’hôtel avait besoin d’un site où le client peut découvrir sa chambre en détail, s’informer sur le spa et le restaurant et envoyer aussitôt une demande de réservation. C’est ce site que j’ai réalisé : dix pages, des carrousels et des onglets, une galerie avec visionneuse et des formulaires de réservation en fenêtre modale.
Structure du site
Toute l’offre de l’hôtel est répartie de sorte que le client trouve ce qu’il cherche en un ou deux clics :
- l’accueil – la vitrine de tous les services de l’hôtel ;
- les chambres – six catégories avec photos, équipements et formulaire de réservation ;
- le spa – sept espaces et une page dédiée au sauna finlandais ;
- le restaurant – horaires, réservation de table par téléphone, dress code et carte en PDF ;
- une galerie filtrable par rubrique, avec agrandissement des photos en fenêtre contextuelle ;
- les avis, les offres, le contact avec plan d’accès et la politique de confidentialité.
L’en-tête est commun à toutes les pages : menu des rubriques à gauche, logo au centre, et à droite téléphone, Facebook, Instagram et bouton « Réserver ». Les pages intérieures s’ouvrent sur un titre et un fil d’Ariane, et le pied de page reprend l’adresse, les téléphones, les réseaux sociaux, le bouton de réservation et les liens vers la politique de confidentialité, le règlement intérieur et le blog. Où que se trouve le client, l’appel ou la demande de réservation n’est qu’à un clic.
Page d’accueil : la vitrine de l’hôtel
Le premier écran montre une chambre en pleine largeur, la mention Apart hotel, le nom CARDINAL en grand et une courte présentation : un hôtel moderne de cinq étages aux finitions écologiques. Juste en dessous, un paragraphe met en avant son principal atout – l’emplacement, près de la buvette centrale et du parc.
La page d’accueil déroule ensuite, une à une, les raisons de choisir l’hôtel :
- un carrousel des chambres avec flèches et une fiche dotée d’un bouton « En savoir plus » ;
- les blocs « Emplacement et détente » et « Vue depuis les chambres », avec une photo du balcon qui domine la ville ;
- quatre tuiles verticales – salle de conférence, spa, restaurant et salon de beauté : au survol, la tuile s’éclaire et fait apparaître un bouton d’accès ;
- huit services illustrés d’icônes : ménage quotidien, Wi-Fi, télévision, service de réveil, transfert, guide pour les excursions, blanchisserie et repassage, livraison en chambre des plats du restaurant.
Chambres : onglets, carrousels et réservation
La page des chambres est celle qui fait vendre. Six catégories – de la chambre double d’une pièce à la super-suite de trois pièces et à la suite exécutive « Cardinal » – se parcourent par onglets, sans rechargement de la page. Chaque catégorie a son propre carrousel de photos, son nom, une pastille indiquant la surface (par exemple 38 m²) et quelques mots sur la vue.
Le bloc « Chaque chambre est équipée » rassemble dans une grille d’icônes ce que les clients demandent d’habitude au téléphone : kitchenette, réfrigérateur avec congélateur, vaisselle, bouilloire et service à thé, cabine de douche, lits 180×200, produits d’accueil, Wi-Fi et petite attention de la maison. Les services complémentaires – blanchisserie, room service, excursions, livraison de fleurs, soins esthétiques, maquillage, massage – s’affichent en grands caractères, et au survol d’un service, sa photo apparaît à côté.
En bas de page se trouve le formulaire « Réserver une chambre » : dates d’arrivée et de départ à choisir dans un calendrier, nombre de personnes, nom, téléphone, e-mail et commentaire, les champs obligatoires étant marqués d’un astérisque. Le même formulaire s’ouvre en fenêtre modale depuis les boutons « Réserver » : on peut donc envoyer une demande depuis n’importe quelle page, sans perdre ce que l’on était en train de regarder.
Le spa et le sauna finlandais
Le spa est l’un des points forts de l’hôtel ; il a donc sa propre page : hammam, sauna finlandais, jacuzzi, jacuzzi en plein air, bar à tisanes, salle de fitness et soins esthétiques. Chaque espace est présenté par un grand carrousel avec légende et bouton « En savoir plus ».
Le sauna finlandais a droit à une page à part, qui montre comment se présente un espace en détail. Ses caractéristiques sont réunies en icônes – température de 80 à 100 °C, humidité de 10 à 20 %, jusqu’à 8 personnes, bois naturel, banquettes sur deux niveaux, boissons du bar à tisanes –, avec à côté un texte sur les bienfaits du sauna et un formulaire « Réserver en ligne » : nom, téléphone et e-mail.
Les formulaires de réservation de chambre et d’espace spa contrôlent la saisie : si une valeur est incorrecte, le champ est mis en évidence avec un message d’erreur, et le client voit aussitôt ce qu’il doit corriger.
Restaurant, galerie, avis, offres et contact
- Restaurant – une page avec photos et réponses aux questions pratiques : ouvert de 8 h à 23 h, téléphone pour réserver une table, dress code, boissons du bar à tisanes et bouton « Télécharger la carte (PDF) ».
- Galerie – les onglets « Extérieurs de l’hôtel », « Spa », « Restaurant » et « Détente » changent de sélection sans rechargement, et un clic ouvre la photo dans une visionneuse avec flèches de navigation.
- Avis – des cartes avec nom, ville, date et note en étoiles, plus une pagination.
- Offres – des cartes d’offres spéciales, par exemple sur les soins spa ou le transfert jusqu’à l’hôtel.
- Contact – photo de la façade, adresse, téléphones, e-mail, réseaux sociaux, bouton « Nous contacter » et carte en pleine largeur.
- Politique de confidentialité – une page dédiée qui explique comment l’hôtel recueille et utilise les données laissées par les clients dans les formulaires.
Le style visuel et sa mise en œuvre
Le site joue sur une palette graphite sombre rehaussée d’or : boutons, onglets actifs, icônes et titres de rubriques ressortent en doré. Les titres sont composés dans un caractère classique à empattements, le texte courant dans une linéale sobre, et un fin dessin au trait de la façade de l’hôtel sert de fond à l’en-tête des pages intérieures, au pied de page et à certains blocs.
Lors du développement, il fallait préserver ce caractère sans rien sacrifier au confort d’utilisation : les photos chaleureuses des intérieurs doivent rester lisibles sur fond sombre, le motif de fond ne pas gêner la lecture, et les onglets, carrousels, fenêtres contextuelles et formulaires fonctionner de la même façon sur toutes les pages. C’est pourquoi les éléments récurrents – en-tête, fiche avec carrousel, grille d’icônes, formulaire de réservation – sont réalisés sous forme de blocs communs, réutilisés dans tout le site.
Ce qui fait un bon site d’hôtel
Un hôtel se choisit avec les yeux : la photo de la chambre, la vue, le spa et le restaurant pèsent plus lourd que de longues descriptions. Son propre site est l’endroit où l’hôtel peut se montrer tel qu’il est et recevoir les réservations en direct. Quand je crée un site pour un hôtel, je m’appuie sur quelques principes :
- de vraies photos plutôt que des images de banque – le client doit reconnaître sa chambre en arrivant ;
- des catégories de chambres avec surface et équipements, pour comparer sans téléphoner ;
- le bouton de réservation et le téléphone sur chaque page, avec un formulaire de demande court ;
- l’infrastructure – spa, restaurant, services – présentée comme une partie de l’offre, pas comme une ligne en petits caractères ;
- des avis, des offres et un plan d’accès qui lèvent les derniers doutes ;
- une politique de confidentialité, puisque le site recueille des noms, des numéros de téléphone et des adresses e-mail.
Si vous avez besoin d’un site pour un hôtel, une maison d’hôtes ou un centre de bien-être, je vous aide à le construire de A à Z – de la structure des pages aux carrousels, à la galerie et aux formulaires de réservation.
Détails du projet
Type de projetnouveau site
CatégorieSite d’entreprise
TechnologiesHTML5, CSS3, JavaScript
Rôledéveloppement du site : intégration des pages, onglets et carrousels, galerie avec visionneuse, formulaires de réservation en fenêtre modale
Clientapart-hôtel Cardinal
PaysUkraine
Travaux réalisés
- Intégration de 10 pages : accueil, chambres, spa, sauna, restaurant, galerie, avis, offres, contact, politique de confidentialité
- En-tête commun avec menu, téléphone, réseaux sociaux et bouton « Réserver »
- Page d’accueil avec carrousel des chambres, tuiles de services animées au survol et bloc des prestations
- Page des chambres : six catégories en onglets, carrousels photo, équipements, services complémentaires avec photo au survol
- Formulaires de réservation de chambre et d’espace spa en fenêtre modale, avec contrôle des champs
- Page spa en sept espaces avec carrousels et page dédiée au sauna finlandais
- Page du restaurant avec horaires, dress code et carte à télécharger en PDF
- Galerie filtrable par rubrique, avec photos agrandies en fenêtre contextuelle
- Avis notés avec pagination, page des offres et page contact avec carte
Résultat
- Un site d’hôtel de 10 pages avec fenêtres modales de réservation
- Choix de la chambre et demande de réservation sur une seule et même page
- Des pages dédiées au spa, au sauna finlandais et au restaurant
- Galerie, avis, offres et contact qui répondent aux questions du client avant même qu’il appelle