Marmande
Date
2025
Client
Ville de Marmande
Mon rôle
UI Design
Comptétences
UI Design, Accessibilité web, Design System
Collaborateurs
Chef de projet & Développeur front-end
APERCU DU PROJET
Concevoir un site municipal accessible pour 20 000 habitants
"L'accessibilité, ce n'est pas une contrainte. C'est une intention de design"
Stratis est une agence de communication et web spécialisée dans le secteur public. Dans ce cadre, j’ai travaillé sur la refonte du site web de la ville de Marmande, une commune de 20 000 habitants en Nouvelle-Aquitaine
Ma mission était claire : concevoir l’interface du site en respectant les contraintes d’accessibilité web, en m’intégrant dans le process de l’agence et en collaborant avec un chef de projet et un développeur front-end
PROBLEMATIQUE
Concevoir pour tout le monde, sans exception
Un site municipal s’adresse à tous les habitants, sans distinction d’âge, de handicap ou de niveau de maîtrise du numérique. C’est une contrainte légale, mais c’est aussi une vraie responsabilité de design. Sur ce projet, chaque choix de couleur, de typographie et de composant devait respecter les normes d’accessibilité web: contrastes suffisants, tailles de texte lisibles, icônes compréhensibles, tout en restant cohérent avec l’identité graphique de la ville et les exigences du client
OBJECTIFS
Une interface claire, accessible et cohérente avec la charte de la ville
L’objectif était de concevoir la page d’accueil et une page de contenu type, déclinées en versions responsive, en m’appuyant sur le design system de Stratis que j’adaptais graphiquement aux couleurs et à l’identité de la ville de Marmande. Le tout en respectant les allers-retours du process agence : brief créatif, maquette, validation client, recette avec le développeur
DEMARCHE
Un process structuré, du brief à la recette
Travailler en agence sur un projet public, c’est évoluer dans un cadre bien défini. Chaque étape avait son rôle, chaque intervenant avait sa place. Ma mission était de produire des maquettes qui répondent au brief, aux contraintes d’accessibilité, et aux attentes du client, sans jamais avoir de contact direct avec lui
DEMARCHE
Brief créatif
Tout commence par le brief créatif, un document que le client remplit pour exprimer ses attentes graphiques : couleurs, typographie, valeurs, inspirations, sites de référence. C’est mon point de départ. Je l’analyse pour comprendre l’univers de la ville, identifier ses contraintes colorielles et définir la direction graphique à adopter
DEMARCHE
Wireframe & maquette UI
À partir du brief créatif et des wireframes fournis par le chef de projet, je concevais les maquettes sur Adobe XD. Les wireframes définissaient les fonctionnalités à intégrer et leur ordre (accès rapides, actualités, agenda, chiffres clés, carte interactive, kiosque) et je devais les respecter. Certaines personnalisations comme ajouter une vignette supplémentaire à l’agenda sortaient du design system et impliquaient un développement sur mesure de la part des développeurs
Ma liberté créative s’exprimait dans la mise en page et l’habillage graphique: couleurs, typographie, icônes, éléments graphiques, disposition des éléments dans leur ordre défini. J’adaptais le design system de Stratis à l’identité de la ville de Marmande en respectant les contraintes d’accessibilité : contrastes de couleurs, tailles typographiques, lisibilité des icônes
Je livrais une V1, puis j’intégrais les retours du client jusqu’à la validation finale. Chaque page était déclinée en vues responsives : desktop, tablette et mobile
Une fois le site validé et mis en ligne, le client pouvait continuer à faire évoluer son site en demandant l’intégration de nouvelles fonctionnalités sur des pages de contenu type. Le process restait le même — je concevais la maquette de la nouvelle fonctionnalité, le client validait, puis le développeur l’intégrait
DEMARCHE
Validation client
Une fois les maquettes finalisées, le chef de projet les présentait au client. Les retours me parvenaient ensuite sous forme de commentaires, que j’intégrais et ajustais avant une nouvelle validation. Ce circuit d’allers-retours, m’a appris à défendre mes choix graphiques tout en restant à l’écoute des besoins du client
DEMARCHE
Recette du site web
Une fois le site intégré par le développeur, je réalisais la recette, une comparaison minutieuse entre la maquette et l’intégration, en notant les écarts et en formulant des commentaires précis pour les corrections. C’est une étape souvent invisible mais essentielle pour garantir que ce qui a été conçu est bien ce qui est livré
CE QUE JE RETIENS
Collaborer, c'est aussi savoir s'adapter
Marmande m’a appris ce que veut dire travailler en équipe dans un cadre contraignant. Je n’avais pas de contact direct avec le client, je ne choisissais pas les fonctionnalités, et je devais composer avec un design system existant. Mais c’est précisément dans ces contraintes que j’ai appris à être plus précise, plus rigoureuse, et plus attentive aux détails
L’accessibilité m’a aussi forcée à questionner chaque choix graphique. Une couleur qui plaît n’est pas forcément une couleur accessible. Une typographie élégante n’est pas forcément lisible pour tous.
L’étape de la recette, une comparaison minutieuse entre la maquette et l’intégration, m’a appris qu’un bon design ne s’arrête pas à la livraison des fichiers. Il va jusqu’à s’assurer que ce qui a été conçu est bien ce qui est livré
Voir d’autres projets
- DIRECTION ARTISTIQUE, UI DESIGN
Azuréenne de protection
- DIRECTION ARTISTIQUE, NO-CODE, UI DESIGN