Empreintes Citoyennes
- Rôle
- UI Designer
- Date
- 2026
- Outils
- Figma
- Équipe
- En binôme avec un collègue de l'agence (wireframe)
Résultat : La maquette Figma de la nouvelle page d'accueil, en version desktop
Voir le site actuel ↗
01 · Contexte et objectif
Un site riche en contenu, mais difficile à parcourir.
Empreintes Citoyennes accompagne les collectivités et les organisations dans leurs démarches citoyennes depuis 2014. Leur site actuel contient beaucoup d'informations, mais présentées en longs blocs de texte et en listes.
Ce qui posait problème :
- un menu de huit entrées et une deuxième rangée de boutons, sans hiérarchie claire ;
- peu de repères visuels pour savoir quoi faire ensuite ;
- des actions importantes, comme adhérer ou se connecter, peu visibles.
L'objectif : une page d'accueil qui donne envie d'agir, avec une direction artistique à la fois chaleureuse et sérieuse.
02 · Structure
Une page pensée pour guider chaque visiteur vers une action.
Je suis parti du wireframe réalisé par un collègue de l'agence pour construire la maquette.
- Le menu est regroupé en quatre thèmes, avec deux accès directs : l'association et la citoyenneté.
- L'espace adhérents passe en bouton rouge, bien visible à droite du menu.
- Des chiffres clés juste sous l'accroche rassurent tout de suite : création en 2014, membres actifs, communes labellisées.
- En bas de page, trois cartes orientent vers la suite : les villes adhérentes, l'adhésion, mise en avant, et l'espace adhérent.
03 · Direction artistique
Garder l'ADN tricolore, en plus chaleureux.
J'ai repris le bleu, le blanc et le rouge du logo, en les rendant plus vivants.
- Des rubans rouges et bleus traversent la page comme un fil conducteur.
- La mascotte de l'association, une Marianne déjà présente sur leur site, accompagne chaque section comme un guide.
- Des photos lumineuses, des cartes arrondies et de petits confettis rendent l'ensemble accueillant, sans perdre le sérieux d'une association d'intérêt général.
- Les actualités et les ressources affichent leur catégorie et leur temps de lecture, pour choisir d'un coup d'œil.
04 · Le fond bleu
Un fond qui porte le nom de l'association.
Le grand fond bleu de l'accueil, des chiffres clés et du pied de page n'est pas un simple aplat.
- La base : le bleu du logo.
- Par-dessus, une empreinte digitale très agrandie, posée en filigrane.
- Le résultat : une texture discrète, qui donne de la profondeur sans gêner la lecture.
Ce n'est pas un hasard : l'empreinte rappelle directement le nom, Empreintes Citoyennes, et ce que défend l'association, l'engagement de chacun dans la vie de sa commune. Chaque citoyen laisse sa trace.