For U&I
Concevoir le site et l'identité d'une agence web « sans chichi », du benchmark au prototype.
- Client
- For U&I, agence web lyonnaise imaginaire
- Cadre
- Projet de formation, Nepsod
- Mon rôle
- UX/UI designer, de la recherche aux maquettes
- Livrables
- Benchmark, arborescence, wireframes, charte, maquettes, prototype
- Outils
- Figma, Illustrator, InDesign, WordPress
En 30 secondes
-
Le défi
Faire exister une nouvelle agence web parmi des dizaines de concurrents qui promettent tous la même chose.
-
Ce que j'ai fait
Benchmark d'environ 35 agences, naming, arborescence, user flows, wireframes mobile-first, charte graphique, maquettes et prototype interactif.
-
Le résultat
Une identité et un site fidèles au ton « sans chichi » : 5 pages en desktop et mobile, reliées dans un prototype Figma.
Une agence web « sans chichi »
For U&I est une agence web lyonnaise imaginaire. Le brief : définir son positionnement, ses valeurs et son public, puis concevoir son identité et son site. Son approche : « sans chichi », un ton direct et humain.
- Brief clientPositionnement, valeurs, public cible
- BenchmarkEnviron 35 agences web en France
- ArchitectureNaming, arborescence, user flows
- WireframesMobile-first, 5 pages navigables
- CharteLogo, typographie, couleurs
- MaquettesDesktop et mobile, prototype
35 agences passées au crible
Environ 35 agences web analysées à travers la France : 5 par grande région, complétées par Paris et Lyon. Pour chacune, j'ai cartographié le positionnement, les forces, les faiblesses et les opportunités de différenciation.
La structure avant le style
Stratégie de naming, arborescence du site et user flows, puis la structure complète en basse fidélité, avant de toucher à la couleur : 5 pages, une navigation cohérente, une hiérarchie de l'information claire.
L'approche mobile-first part des contraintes les plus strictes, pour ensuite enrichir vers le desktop.
Le ton « sans chichi » s'est traduit dans l'interface : boutons d'action ronds, blocs de service très contrastés et un formulaire de contact simple et rassurant.
U pour « you », I pour l'agence
Un logo typographique fort, qui superpose les lettres U et I. UI, ce sont les initiales d'UX/UI, mais aussi la relation entre l'agence et son client : « U » pour you, le client, et « I » pour l'agence. Le logo incarne ce lien.
- Rose#F5A7B5
- Bleu#1B3A8C
- Noir#0D0D0D
- Blanc#FFFFFF
5 pages, desktop et mobile
Le design final, décliné en desktop et en mobile : Accueil, À propos, Services, Portfolio et Contact.
Prototype interactif
Tous les écrans reliés sur Figma, du menu aux cinq pages : de quoi tester le parcours réel avant l'intégration.
Le ton se dessine aussi
-
Un benchmark large révèle les espaces libres
35 agences, c'est assez pour voir ce que tout le monde promet, et ce que personne ne dit.
-
Le mobile d'abord oblige à choisir
Sur un petit écran, chaque bloc doit mériter sa place : la hiérarchie se décide tôt.
-
Un ton, c'est aussi une forme
« Sans chichi » guide la forme des boutons, le contraste et la longueur du formulaire.