Décider des pages avant la couleur.
Une maquette finie déclenche des débats sur une nuance et pas sur la structure. Le gris sert exactement à ça : tant qu’il n’y a pas de couleur, on parle de ce qui doit être sur la page et dans quel ordre.
MarkdownHTMLLes étapes, dans l’ordre.
- L’arborescence d’abord. Les pages, leur hiérarchie, les adresses qu’elles porteront. C’est la décision qui tient le plus longtemps, et la moins chère à changer maintenant.
- Les parcours, écran par écran. Le chemin d’un visiteur qui achète, celui qui cherche, celui qui revient. Un parcours dessiné à plat révèle les étapes qu’on avait oubliées.
- Les wireframes, en gris. Blocs, hiérarchie, libellés réels. Les libellés réels, parce qu’un faux texte de remplissage ne dit jamais qu’un bouton est trop étroit.
- On tranche, puis on dessine. La maquette part d’une structure validée : c’est ce qui évite trois tours de direction artistique sur une page qui ne devait pas exister.
À la fin, vous avez ça.
- L’arborescence du site ou du produit, et les adresses prévues
- Les parcours principaux, schématisés et commentés
- Les wireframes en gris, avec les libellés réels
- La décision écrite : ce qui est dans le périmètre, et ce qui attend
Les fonctionnalités qui servent ici.
Les questions qu’on nous pose.
Et s’il en manque une, le Discord répond plus vite que cette page.
Peut-on sauter cette étape ?
Sur une page unique, oui. Sur un site de trente pages ou un produit, c’est l’étape qui fait économiser les autres : changer une arborescence après l’intégration coûte des redirections et du référencement.
Faut-il vraiment du gris ?
C’est une discipline, pas une esthétique. La couleur attire tous les avis vers elle ; sans elle, la conversation porte sur ce qui doit figurer et dans quel ordre.
Comment le client valide-t-il ?
Par un lien de relecture, comme pour une maquette : il commente sur la zone désignée. Un wireframe commenté vaut mieux qu’un compte rendu de réunion.
Dans la même famille.
Maquettes de site
Des pages ambitieuses, bureau et mobile dans le même fichier, corrigées à la zone près.
Écrans d’application
Tableaux de bord, formulaires, parcours : les écrans d’un produit, avec tous leurs états.
Prototypes cliquables
Les écrans reliés entre eux, animés, montrés au client par un simple lien.
Design system et tokens
Couleurs, typographies, espacements : les mêmes valeurs pour la maquette et le code.