Client Otelico

Catégories Intégration Web, Webdesign

Mes rôles Intégrateur web, Designer web

Collabs Otelico

Citotel souhaitait présenter tous les avantages d’appartenir à leur réseau. Le message se devait clair et simple tout en étant le plus complet possible.

version ordinateur de la page web
affichage ordinateur de la page web

Optimiser le contenu pour le web

La présentation PDF de 25 pages fournie par le groupement d’hôtel était très dense en informations. Il a donc a été nécessaire de réorganiser, hierarchiser et optimiser le contenu dans une optique web et orienté avantage hôteliers.

Créer une page web attractive et dynamique

C’est à partir de ce travail préalable sur le contenu initial que maquette de site internet et intégration web ont pu être réalisées.

Le choix d’une page unique du type « Onepage » en fait une page chargée d’informations. Chaque section est identifiée par une couleur, couleur extraite de la présentation PDF afin de respecter la charte graphique fournie.

Au fur et à mesure du défilement les éléments clés apparaissent et animent la page, apportant à la fois du dynamisme et un focus sur l’information ainsi mise en avant.

affichage mobile et tablette de la page web
affichage mobile et tablette de la page web

Accompagner le visiteur de façon différentiée sur mobile et ordinateur

En plus du code couleur, il apparaissait primordial d’accompagner plus encore le visiteur.

Un menu dynamique sur écran d’ordinateur et tablette

Sur ordinateur, le menu s’anime en fonction de la section parcourue. Ainsi lorsque le visiteur survole une section, dans le menu apparait un onglet coloré – de la couleur de la section, vous l’aurez deviné 😉

Un titre de section ferré en haut sur mobile

Sur mobile, il est d’usage de masquer le menu, afin de gagner en place et visibilité. Une approche différente à donc été choisie pour mieux identifier chaque section.

Ainsi, lorsque le visiteur survole une section, son titre reste fixé en haut de page jusqu’à la partie suivante qui viendra ferrer son titre.

Voir le site en live