Les écrans, et leurs états.
Un écran d’application se dessine quatre fois : vide, en cours de chargement, rempli, en erreur. Les trois derniers manquent presque toujours à la maquette, et ce sont eux qui font la moitié du travail d’intégration.
HTMLPNGLes étapes, dans l’ordre.
- L’inventaire des écrans, et de leurs états. Chaque écran avec son état vide (le premier que verra un utilisateur), son état chargé, son état d’erreur et ce qu’il dit alors.
- Les composants avant les pages. Un tableau, un formulaire, une carte, une barre d’outils : dessinés une fois, déclarés comme composants, réutilisés. Sinon la quinzième page diverge.
- Les parcours, cliquables. Les écrans reliés entre eux, pour que l’on juge l’enchaînement et pas seulement les pixels. Un parcours se juge en cliquant.
- Les mesures qui comptent. Densité d’information, longueur des libellés réels, contrastes. Un tableau beau avec trois lignes et illisible avec trois cents n’est pas un tableau.
À la fin, vous avez ça.
- Les écrans du produit, avec leurs états vide, chargé et en erreur
- Les composants déclarés et réutilisés, plutôt que recopiés
- Le prototype cliquable des parcours principaux
- Les contrastes vérifiés, et les libellés aux longueurs réelles
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.
Pourquoi insister sur l’état vide ?
Parce que c’est le premier écran de chaque utilisateur, et le plus souvent oublié. Un tableau vide qui ne dit ni ce qu’il attend ni comment le remplir se lit comme une panne.
Faut-il dessiner tous les écrans ?
Non. Les écrans structurants et un exemplaire de chaque motif. Le reste se déduit, et se corrige en recette sur l’application réelle, ce qui est plus rapide que de maquetter trente variantes.
Les contrastes sont-ils vérifiés ?
Ils se mesurent, et le Studio sait le faire sur la vraie palette plutôt qu’à l’œil. Un texte gris clair sur fond clair passe tous les goûts et aucun contrôle.
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.
Prototypes cliquables
Les écrans reliés entre eux, animés, montrés au client par un simple lien.
Parcours et wireframes
L’arborescence et les écrans en gris, pour décider des pages avant la couleur.
Design system et tokens
Couleurs, typographies, espacements : les mêmes valeurs pour la maquette et le code.