Marmande
Date
2025
Client
Ville de Marmande
Mon rôle
UI Design
Compé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.
MAQUETTE UI
Wireframe & maquette UI
À partir du brief créatif et des wireframes fournis par le chef de projet, je conçu 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’ai adapté 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.
J’ai livré 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.
VALIDATION
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.
RECETTE
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
Travailler dans un cadre contraignant, sans contact direct avec le client, avec des fonctionnalités imposées et un design system existant, c’est précisément ce qui oblige à être précise, rigoureuse et attentive aux détails.
L’accessibilité m’a aussi poussé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. C’est une discipline qui s’intègre dès la conception, pas en correction.
L’étape de la recette, une comparaison minutieuse entre la maquette et l’intégration, confirme qu’un bon design se mesure au résultat final livré, pas aux fichiers envoyés. C’est une étape que je considère comme faisant partie intégrante du processus de conception.
Voir d’autres projets
- DIRECTION ARTISTIQUE, NO-CODE, UI DESIGN
- UI DESIGN