Valentin Guitton
UX/UI Designer & Intégrateur Le Mans, France UX/UI Designer & Intégrateur Le Mans, France
Chargement en cours ... 0%
UX/UI Designer & Intégrateur Le Mans, France UX/UI Designer & Intégrateur Le Mans, France
Chargement en cours ... 0%
Le Mans, France
Le projet de Poillé-sur-Vègre avait pour objectif de créer une véritable identité visuelle pour la commune, accompagnée d’un site web moderne permettant de valoriser le village, et d'informer ses habitants. Le conseil communication souhaitait moderniser l’image du village tout en conservant son authenticité. Appart le blason existant, aucun univers graphique clair n’était défini.
Une phase d’analyse a été menée autour des identités visuelles des communes voisines et de plusieurs villes de la Sarthe, de la Mayenne et du Maine-et-Loire.
Cette veille a mis en évidence un constat récurrent : de nombreuses petites communes utilisent encore des logos anciens ou des blasons peu adaptés aux usages numériques actuels.
L’objectif était donc de proposer une identité à la fois moderne, durable et authentique, capable de représenter le village sans perdre son caractère.
Trois axes graphiques ont été développés autour des éléments emblématiques du village : le cèdre de l'Atlas, le pont de la Vègre, l’église et l’architecture locale.
Chaque proposition explorait un équilibre différent entre modernité, patrimoine et authenticité, avec un travail poussé sur les typographies, les couleurs et les symboles.
La proposition finale est née d’une fusion entre plusieurs axes : une typographie manuscrite associée à une icône simplifiée représentant les éléments identitaires du village.
Un important travail d’harmonisation graphique a été réalisé afin d’éviter l’effet “assemblage” et garantir une cohérence visuelle globale entre l’icône et la typographie.
Plusieurs itérations ont également été nécessaires autour de la représentation du cèdre afin de trouver un équilibre entre fidélité au réel et simplicité graphique.
Une fois l’identité validée, le travail de conception du site a débuté avec la création de personas, de user stories, d’une arborescence et de premiers wireframes en prenant en compte des lois UX comme la loi de Miller.
Plusieurs échanges avec le conseil communication ont permis d’identifier les besoins principaux des habitants et des visiteurs afin de définir les contenus et fonctionnalités prioritaires.
Les maquettes ont ensuite été conçues sur Figma en version desktop et mobile pour plusieurs pages clés : accueil, mairie, commerces, contact et collecte des déchets.
Une attention particulière a été portée à la lisibilité, à la simplicité de navigation et à l’accessibilité, afin de proposer une expérience claire pour tous les publics.
Un design system a été mis en place afin d’assurer une cohérence globale entre les différentes pages du site.
Il regroupe les composants principaux, les styles typographiques, les couleurs, les espacements et les règles d’utilisation des différents éléments d’interface.
Afin de valoriser le village avec des contenus authentiques, j’ai réalisé les prises de vues photo et vidéo du projet à l’aide d’un Lumix G9 et d’un DJI Mini 3 Pro.
Un travail spécifique a ensuite été réalisé sur l’optimisation des médias pour le web afin de garantir un bon équilibre entre qualité visuelle et performances du site.
Les images ont été traitées sur Adobe Lightroom Classic, avec une attention particulière portée à la compression, au redimensionnement et à la cohérence globale des rendus.
Un plugin permettant l’export en WEBP a été intégré afin de réduire le poids des fichiers tout en conservant une qualité optimale. Les images les plus grandes sont limitées à environ 300 Ko, et les visuels secondaires à environ 100 Ko.
Les dimensions ont également été adaptées en fonction des usages, allant d’environ 400 px de largeur pour les petits éléments jusqu’à 1920 px pour les visuels pleine largeur.
Enfin, une attention particulière a été portée à l’accessibilité avec la complétion systématique des attributs alt, ainsi qu’à l’utilisation de formats optimisés comme le SVG pour les icônes, logos et éléments vectoriels, et l’ajout d’aria-label sur ces derniers.
Le site est actuellement en cours d’intégration sous WordPress avec Elementor, complété par du CSS et du JavaScript personnalisés via un thème enfant.
Cette approche permet de conserver une grande flexibilité sur les animations, les composants interactifs et certains éléments spécifiques comme la carte interactive des commerces.
Une attention particulière est également portée au SEO, aux performances et à l’accessibilité : optimisation des images, structure sémantique, hiérarchie des titres, balises alt, maillage interne et conformité RGPD.
Le site de Poillé-sur-Vègre a été développé sous WordPress avec Elementor, complété par du code personnalisé afin de répondre à des besoins spécifiques non couverts par le constructeur de pages.
Les styles additionnels ont été structurés avec Sass, dans une logique modulaire et maintenable. Une méthodologie BEM (Block Element Modifier) a été appliquée afin de garantir une nomenclature claire et une meilleure organisation du code CSS ajouté en dehors d’Elementor.
Cette approche permet de garder un code propre, lisible et évolutif, tout en évitant les conflits de styles avec les classes générées par le builder.
Des scripts JavaScript ont également été intégrés ponctuellement pour enrichir l’expérience utilisateur, notamment la mise en place d’un menu sticky dont l’état évolue au scroll (changement de style, comportement adaptatif selon la position de la page).
Une carte interactive des commerces et services du village est actuellement en cours de développement, avec pour objectif de faciliter l’accès aux informations locales et d’améliorer la navigation dans les ressources du territoire.
