LA VISITE DÈS L'ACCUEIL
Le persona vient autant pour l'expérience que pour la bière : la réservation de visite est un appel à l'action principal, au même rang que la boutique.
LA BRIQUE À BIÈRE · ANNEXE 04
CONCEPTION UX / UI
Conception et maquettes
« Structurer d'abord, décorer ensuite. »
- Figma
- Wireframes
- Bibliothèque de composants
- Mobile-first, 3 breakpoints
EN BREF
Ce que j'ai fait
Trois pages menées du wireframe gris à la maquette finale, sur une bibliothèque de composants Figma.
Le parti pris
Aucune couleur avant validation de la structure : deux réunions distinctes, deux décisions claires.
Le bénéfice
Des maquettes prêtes pour une conception sur WordPress, avec des styles nommés et des tailles précisées.
De l'esquisse au pixel
Quatre étapes sous Figma, chacune validée avant la suivante.
-
Zoning et grille
Une grille commune aux trois pages, puis découpage de chaque écran en blocs fonctionnels. C'est le contrat qui rend l'intégration prévisible.
-
Wireframes en niveaux de gris
Structure et hiérarchie du contenu, sans décision graphique. Tout se discute ici, où corriger ne coûte presque rien.
-
Bibliothèque de composants
Boutons et états de survol, en-tête, pied de page, échelles typographiques. Une modification se propage sur toutes les pages d'un coup.
-
Maquettes haute fidélité
La charte du moodboard appliquée sur les wireframes validés. Rien n'est inventé ici, tout vient de décisions déjà prises.
Le livrable final
ÉTAPE 1 · LES WIREFRAMES
Structure et architecture des pages avant toute décision graphique.
Accueil
Vitrine, mise en avant produit, accès boutique
Notre Histoire
Récit familial, réassurance, réservation de visite
Contact
Formulaire court, coordonnées, plan d'accès
ÉTAPE 2 · LA BIBLIOTHÈQUE DE COMPOSANTS
Interactions, échelles typographiques desktop et mobile, palette et déclinaisons du logo, réunies dans une planche unique.
ÉTAPE 3 · LES MAQUETTES HAUTE FIDÉLITÉ
La charte appliquée sur les wireframes validés, prête pour l'intégration.
Accueil
Notre Histoire
Contact
OUTIL
Figma, fichier partagé
PAGES MAQUETTÉES
3, du wireframe au rendu final
GRILLE
colonnes, breakpoints
DESTINATION
WordPress, thème enfant
Trois décisions à défendre
Chaque choix répond à un constat de la phase de recherche.
LE RÉCIT COMME RÉASSURANCE
Le manque de transparence figurait parmi les frustrations relevées : Notre Histoire est placée haut dans le menu.
UN FORMULAIRE COURT
Le concurrent audité n'offre aucun moyen de contact : quatre champs, visibles sans défilement sur mobile.