Colibri est un organisme spécialisé dans la formation des professionnels de la chirurgie dentaire. Sa pédagogie repose notamment sur des démonstrations cliniques en direct, réalisées dans des conditions proches de la pratique quotidienne.
Les formations abordent la dentisterie biomimétique, adhésive, esthétique et conservatrice. Elles sont animées par le Dr Olivier Leroux et le Dr Chloé Plassart, qui exercent respectivement à Dunkerque et au Mans.
Colibri propose deux formats principaux : des journées de formation programmées autour de thématiques précises et des formations sur mesure permettant aux praticiens de composer un programme adapté à leurs besoins, à leur niveau et à leurs priorités cliniques.
L’ancien site de Colibri disposait déjà d’un univers visuel distinctif, dominé par le violet, les compositions graphiques ondulées et des références à l’univers de la dentisterie esthétique.
Il regroupait les principales informations concernant l’organisme, les formateurs, les formations, les centres, les publications et les partenaires. Cependant, son organisation restait relativement linéaire et certaines sections ne permettaient pas de hiérarchiser efficacement les informations.
Les formations étaient notamment présentées dans un carrousel assez restreint, avec peu d’éléments permettant d’identifier immédiatement leurs dates, lieux, thématiques ou disponibilités. Les contenus changeant régulièrement nécessitaient également une gestion plus structurée pour éviter de modifier manuellement plusieurs sections du site.
La refonte avait donc deux objectifs complémentaires. Le premier était de créer une interface entièrement nouvelle, plus dynamique, plus agréable et davantage tournée vers l’expérience pédagogique proposée par Colibri. Le second était de construire un système d’administration permettant à l’équipe de faire évoluer les contenus récurrents depuis WordPress, sans modifier la structure des pages.
Le projet a été réalisé en collaboration avec Florian Perrier. L’ensemble des pages a été construit avec Elementor, tandis que des champs personnalisés ont été utilisés pour simplifier la gestion des formations, formateurs, centres, événements et autres informations amenées à évoluer.
L’ancien site disposait d’une identité reconnaissable, mais son organisation et ses compositions visuelles donnaient parfois une impression assez statique.
La nouvelle interface devait préserver le violet et l’univers graphique de Colibri tout en proposant une expérience beaucoup plus contemporaine. Le travail a porté sur les espacements, les formes arrondies, les contrastes, la hiérarchie typographique, les photographies et les transitions entre les différentes sections.
L’objectif était de créer un site à la fois professionnel, accessible et énergique, cohérent avec une méthode de formation fondée sur l’observation, la pratique et les échanges entre confrères.
Les dates, lieux, intervenants et thématiques des formations sont amenés à évoluer régulièrement.
Le site devait rendre ces informations immédiatement compréhensibles pour les chirurgiens-dentistes, tout en évitant de surcharger la page d’accueil. Il fallait distinguer les formations programmées, les interventions avec des invités, les événements particuliers et les programmes sur mesure.
Chaque contenu devait pouvoir être mis à jour ou remplacé sans reconstruire manuellement les cartes et les sections correspondantes.
Une page réalisée uniquement avec des blocs Elementor classiques aurait obligé l’équipe à intervenir directement dans la mise en page à chaque nouvelle formation ou modification d’un formateur.
Le défi consistait donc à séparer les contenus de leur présentation. Les utilisateurs de WordPress devaient pouvoir renseigner des champs clairement identifiés — titre, date, lieu, image, intervenant, description ou lien — puis laisser le site générer automatiquement l’affichage approprié.
L’inscription à une formation professionnelle demande plusieurs niveaux de confiance. Le visiteur doit comprendre la méthode pédagogique, connaître les formateurs, consulter le programme, vérifier les modalités pratiques et lire l’expérience d’anciens participants.
La nouvelle page devait organiser ces informations dans un parcours progressif, depuis la découverte de la promesse Colibri jusqu’à la consultation des formations et à la prise de contact.
Le projet a commencé par une analyse de l’ancienne interface, de son architecture et des contenus que l’équipe devait régulièrement modifier.
Les différentes familles d’informations ont été identifiées : valeurs, statistiques, formateurs, formations programmées, formations sur mesure, centres, questions fréquentes, témoignages et contenus sociaux.
Cette étape a permis de déterminer quels éléments pouvaient rester directement éditables dans Elementor et lesquels nécessitaient une gestion structurée avec des champs personnalisés.
Une interface entièrement nouvelle a été conçue autour d’une expérience plus fluide et plus humaine.
Le premier écran associe désormais une photographie immersive à une promesse pédagogique directe : « Regarder. Apprendre. Grandir. ». La suite du parcours présente les valeurs, les chiffres clés, les formateurs, les différentes modalités de formation, les centres, la FAQ et les témoignages.
Les sections utilisent des formes arrondies, des compositions asymétriques et des variations de fond pour rythmer la consultation tout en conservant une identité cohérente.
Les pages ont été développées avec Elementor afin de préserver la flexibilité de la mise en page et de permettre des ajustements visuels sans intervention dans le code.
Des composants réutilisables ont été créés pour les titres, cartes, boutons, blocs d’information, témoignages et appels à l’action. Cette approche garantit une cohérence graphique entre les différentes sections et facilite les futures évolutions du site.
Le responsive a été travaillé pour adapter les compositions, les portraits, les grilles et les contenus détaillés aux ordinateurs, tablettes et smartphones.
Les contenus les plus fréquemment modifiés ont été associés à des champs personnalisés dans WordPress.
L’équipe peut ainsi gérer les informations depuis des formulaires d’administration simplifiés, sans ouvrir directement les modèles Elementor. Les données renseignées sont ensuite automatiquement injectées dans les cartes et les sections prévues.
Cette organisation permet notamment d’actualiser une date, un lieu, une photographie, un texte ou un lien sans risquer de modifier involontairement l’apparence générale du site.
Les contenus existants ont été repris et adaptés à la nouvelle structure. Les différentes configurations ont ensuite été testées afin de vérifier le comportement des formations, des cartes, des témoignages et des sections dynamiques.
Une attention particulière a été portée à la simplicité de l’administration. L’objectif était que l’équipe puisse effectuer les mises à jour courantes depuis WordPress avec un minimum d’étapes et sans dépendre systématiquement d’un développeur.
Création d’une nouvelle interface plus dynamique, avec une hiérarchie visuelle modernisée, des compositions arrondies, une meilleure utilisation des photographies et un parcours plus agréable.
Construction des différentes pages et sections avec Elementor, création de composants réutilisables et adaptation complète aux écrans d’ordinateur, de tablette et de smartphone.
Mise en place d’un système permettant de renseigner et d’afficher les formations à partir de données structurées telles que le titre, la date, le lieu, l’image, l’intervenant et le lien associé.
Création de champs d’administration adaptés aux informations régulièrement modifiées, afin que l’équipe puisse actualiser le site sans intervenir directement dans la mise en page Elementor.
Réorganisation de la page d’accueil autour de la promesse pédagogique, des valeurs, des chiffres clés, des formateurs, des formations, des centres, de la FAQ, des avis et des contenus sociaux.
Intégration de témoignages de stagiaires, d’informations sur les centres, d’une FAQ, d’appels à l’action et de liens vers les formations afin d’accompagner le visiteur jusqu’à la prise de contact ou l’inscription.
La nouvelle version conserve les marqueurs essentiels de Colibri, notamment le violet et l’identité du logo, mais les utilise dans un langage graphique entièrement renouvelé.
Les anciennes sections très verticales ont été remplacées par des compositions plus aérées, des blocs arrondis, des photographies mieux intégrées et des éléments visuels qui accompagnent naturellement la lecture.
L’équipe n’a pas besoin de modifier directement les templates pour actualiser les informations principales.
Les champs personnalisés encadrent la saisie et permettent de modifier uniquement les données nécessaires. La structure visuelle reste ainsi cohérente, même lorsque plusieurs personnes interviennent dans l’administration du site.
Le nouveau site ne présente plus uniquement une liste de formations.
Il explique les valeurs de Colibri, sa pédagogie fondée sur les démonstrations cliniques, les modalités d’une journée, les lieux de formation et les retours des participants. Les praticiens peuvent ainsi mieux se projeter avant de choisir un programme.
La séparation entre les données, les templates et les pages permet au site d’accueillir de nouvelles formations, de nouveaux intervenants, des événements et de futurs formats pédagogiques.
La plateforme peut évoluer sans remettre en cause sa direction artistique ni reconstruire les principales sections.
La nouvelle page d’accueil propose un parcours plus rythmé et plus immersif.
Les visiteurs découvrent successivement la promesse de Colibri, ses valeurs, ses formateurs, ses formations, ses centres et les témoignages des stagiaires, sans être confrontés à une longue succession de sections indépendantes.
Les informations amenées à changer régulièrement sont administrées depuis des champs structurés dans WordPress.
L’équipe peut mettre à jour les formations et les différents contenus sans modifier directement leur design ou leur positionnement dans la page.
Les formations programmées et les programmes sur mesure disposent désormais de présentations distinctes.
Les dates, lieux, intervenants et thématiques peuvent être identifiés plus rapidement, tandis que les appels à l’action facilitent la consultation des détails ou la prise de contact.
La combinaison d’Elementor et des champs personnalisés offre à Colibri une plateforme à la fois flexible et sécurisée.
Les équipes peuvent assurer les mises à jour quotidiennes, tandis que les modèles conservent automatiquement la cohérence graphique définie lors de la refonte.
La refonte de Colibri avait pour objectif de transformer un site visuellement identifiable, mais relativement statique, en une plateforme de formation plus vivante, structurée et facile à administrer.
Réalisé en collaboration avec Florian Perrier, le projet a débuté par une refonte complète de l’expérience et de la direction visuelle. Les codes violets de la marque ont été conservés, mais intégrés dans des compositions plus aérées, dynamiques et contemporaines.
La structure a également été repensée afin de mieux présenter la pédagogie de Colibri, ses valeurs, ses formateurs, ses formations programmées et sur mesure, ses centres ainsi que les témoignages de ses stagiaires.
Le site a été entièrement développé sous Elementor. Les contenus qui évoluent fréquemment ont été reliés à des champs personnalisés dans WordPress, permettant à l’équipe de modifier les informations sans toucher à la mise en page.
Colibri dispose désormais d’une plateforme plus agréable pour les visiteurs et beaucoup plus simple à maintenir au quotidien.
Vous avez un projet de création ou de refonte de site web professionnel ? On applique la même rigueur — architecture de l’information, design orienté conversion, SEO technique, performance mobile — à chaque projet, quel que soit votre secteur.
