Page rejoindre Citotel

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.

Intégration du site internet Les Messageries

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 mobile et tablette du site internet responsive
vue ordinateur 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.

boutons « en savoir plus » animés

Obtenir plus d’infos sur Otelico – sites internet pour hôtels

Technique

  • Site réalisé sous la plateforme développée par Otelico
  • Framework PHP Cakephp
  • Framework CSS Foundation
  • Optimisation du workflow par npm et gulp
  • Site internet responsive
  • Menu fixe en haut de page au scroll

Refonte du site internet de l’hôtel Raymond 4

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
footer du site internet mettant en avant les valeurs de l’hôtel

Obtenir plus d’infos sur Otelico – sites internet pour hôtels

Technique

  • Site réalisé sous la plateforme développée par Otelic
  • Framework PHP Cakephp
  • Framework CSS Foundation
  • Optimisation du workflow par npm et gulp
  • Site internet responsive
  • Menu fixe en haut de page au scroll

Refonte du site internet de l’hôtel Amarys

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.

amarys - version ordinateur site internet responsive
le widget activité – vue ordinateur site internet responsive

Obtenir plus d’infos sur Otelico – sites internet pour hôtels

Technique

  • Site réalisé sous la plateforme développée par Otelico
  • Framework PHP Cakephp
  • Framework CSS Foundation
  • Optimisation du workflow par npm et gulp
  • Site internet responsive
  • Menu fixe en haut de page au scroll

Identité visuelle d’AS-Sophrologie

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…

as-sophrologie : creation site internet bordeaux responsive
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.

as-sophrologie : creation site internet bor
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 :

  • Foundation 6
  • SASS
  • Jquery

Optimisation du workflow par

  • npm,
  • gulp et
  • webpack

Site internet de Michèle Rabreau

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