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.
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
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.
Prestataire pour Otelico, j’ai intégré les maquettes de ce site web sur la plateforme de sites internet pour hotel.
Bien que réalisant moi-même charte graphique, maquette de site internet, sur ce projet de site internet, les maquettes ont été réalisées par une autre graphiste prestataire.
Ma mission s’est donc concentrée sur l’intégration de ces maquettes c’est à dire transformer une image figée en une page web dynamique grâce aux langages HTML, PHP, CSS, Javascript.
vue mobile et tablette du site internet responsive
vue ordinateur du site internet responsive
Animation CSS d’éléments clés du site internet pour le rendre plus dynamique
Animer les boutons « en savoir plus » attire l’oeil du visiteur pour l’inciter à, justement, cliquer pour en savoir plus.
Créé en 2016, le site internet de cet hôtel à bénéficié d’un lifting graphique.
Un site responsive pour une meilleure expérience utilisateur et un meilleur référencement.
Un site internet non adapté aux différentes tailles d’écran fait fuir les internautes et nuit au bon référencement du site dans les moteurs de recherches.
Aujourd’hui, avoir un site internet responsive c’est à dire adaptés à toutes les tailles d’écran est donc une obligation tant pour le confort de l’utilisateur que pour le référencement du site.
version mobile et tablette du site internet responsive
Inciter le visiteur à faire défiler un slider
Le saviez-vous ? Les internautes interagissent peu avec les sliders. Souvent, seule la première diapo est vue.
Par sa mise en page deux tiers / un tiers, laissant apparaitre en partie la 2e diapo, le slider présentant les activités aux alentours de l’hôtel invite le visiteur à faire défiler pour découvrir les autres slides.
vue du carousel des activités du site internet responsive
Une mise en avant des valeurs éco-responsables et locavores de l’hôtel
La création d’un bandeau en bas des pages du site internet (footer pour les initiés) met en avant les valeurs éco-responsables, locavore et d’engagement dans la défense des animaux.
footer du site internet mettant en avant les valeurs de l’hôtel
La refonte du site web de cet hôtel lui a permis de bénéficier des nouvelles fonctionnalités proposées par la plateforme Otelico.
Un header simplifié pour une meilleure visibilité des informations de favorisant la conversion.
Le menu latéral est aujourd’hui accessible par la maintenant célèbre icone « hamburger ».
Seules apparaissent le logo, les informations de téléphone, e-mail, localisation de l’hôtel et le bouton « réserver ». Le header (en-tete de page internet) est toujours visible, pour garder les informations accessible immédiatement.
vues mobile et tablette du site internet responsive
Intéresser le visiteur par l’intégration des widgets sur la page d’accueil
Par exemple, l’affichage du widget « activités dans la région » sur la page d’accueil peut susciter l’intérêt de passer un séjour dans l’hotel.
le widget activité – vue ordinateur site internet responsive
La refonte graphique et structurelle du site internet existant a permis de moderniser l’image de marque et augmenter sa visibilité en ligne.
Un site internet avec une communication visuelle décalée pour se démarquer de la concurrence à Bordeaux et en Gironde.
Sortir de l’imagerie classique liée au domaine du bien-être et de la santé. Se démarquer des autres praticiens bordelais et girondins déjà présents sur la toile.
La thématique des fruits et légumes illustrant les différents domaines d’action de la sophrologie apportent dynamisme et fraicheur au site web. Une réelle volonté de sortir de la norme tant sur l’aspect visuel que sur le message à faire passer. Tel étaient les objectifs fixés par Amélie Sainz.
La symbolique n’a toutefois pas été oubliée puisque chaque image illustre à sa façon le thème abordé : dessert à la composition presque architecturale pour le développement personnel par exemple, ou fruits gâtés pour le burn-out…
version ordinateur du site internet
Inciter le client à l’action par un bouton d’appel téléphonique toujours visible
Quand il s’agit de passer à l’acte, nous reculons souvent l’échéance…
Le bouton d’appel à l’action, toujours visible, que ce se soit sur ordinateur, tablette ou mobile, est bien identifiable et explicite (icône, sa phrase d’action, le numéro de téléphone) invite le visiteur à agir tout de suite.
Limiter le nombre de clics menant à l’information, c’est augmenter le taux de conversion et permettre également un meilleur référencement internet.
un bouton d’appel à l’action toujours visible sur mobile, tablette et ordinateur
La promotion du stage de sophrologie sur « Être amoureux de demain » ne pouvait faire l’impasse d’une communication papier.
Pour communiquer et se faire connaitre localement, rien ne remplace le flyer
Jouant avec les formes, textures et couleurs, l’illustration du flyer s’appuie sur le principe de la triple exposition afin de combiner les symboliques de l’union, l’univers et l’enracinement à la terre.
Flyer de communication distribué au Bouscat, Bordeaux et agglomération bordelaise, en Gironde
Technique
Site internet réalisé sous WordPress,
Conception des maquette du site internet,
Intégration des maquettes par la création d’un thème sur mesure,
Site responsif, adapté à toutes les tailles d’écran,
Plugin SEO pour optimiser le référencement naturel,
Plugin WordPress de cache pour un affichage rapide des pages,
Plugin Worpdress de sécurisation
Utilisation du framework FoundationPress avec prise en charge de :
Le site internet est volontairement sobre et épuré afin de laisser toute l’attention aux sculptures de l’artiste.
version mobile et tablette du site internet
Intégration Web : Thème WordPress sur mesure
Grâce à la création d’un thème WordPress sur mesure, la cliente n’a plus à se soucier de la mise en page de son site. Le nouveau contenu saisi est automatiquement intégré au site en respectant la charte graphique.
Pour cela, plusieurs modèles de page WordPress ont été développés pour :
la page d’accueil,
la page galerie,
les pages des sculptures selon le nombre de photos disponibles pour chaque œuvre :
une photo,
deux photos,
ou un diaporama quand il y a plus de 2 photos
la page des expositions passées et à venir
Développement Web : WordPress
Développé sur le CMS WordPress, l’artiste peut gérer son site internet toute seule : ajouter du contenu, le modifier, etc…
Le modèle de page « diaporama » pour les sculptures
La navigation interne entre les pages des sculptures a été personnalisée. L’intégration des images des œuvres en plus de leurs noms met à nouveau l’accent sur le travail de l’artiste.
Afin de minimiser le nombre d’action lors de l’ajout d’une nouvelle œuvre, la page galerie des œuvres est générée et mise à jour dynamiquement : dès l’ajout d’une nouvelle sculpture, elle est automatiquement ajoutée à cette page.
Pour plus de flexibilité, la cliente choisit l’ordre d’affichage dans l’administration du site de façon très intuitive : un simple clic et glisser-déplacer suffit.
Les photos et vidéos des sculptures ont été réalisées par Pascal Rousse
