Un lien, et ça clique.
Un prototype ne vaut que s’il fonctionne chez celui qui le regarde. Ici, les liens entre écrans sont de vrais liens dans une vraie page : le client clique dans son navigateur, sur son téléphone, sans compte et sans rien installer.
AperçuLien sans compteLes étapes, dans l’ordre.
- Les écrans, déclarés comme des cadres. Chaque écran porte son identifiant ; un lien d’un écran à l’autre est un lien de page. Rien d’exotique, donc rien qui casse ailleurs.
- Les animations, posées sur la page. Apparitions, transitions, états au survol. Le mouvement vit dans la feuille de style, et il se reprend tel quel à l’intégration.
- Le lien de partage. Une adresse, une durée, et le client regarde. Il peut commenter sur la zone exacte ; chaque lien ne voit que ses propres commentaires.
- Les retours deviennent des corrections. On coche ceux qui partent, l’agent les lit, les traite et les clôture. Le client voit « pris en compte », jamais vos états internes.
À la fin, vous avez ça.
- Le prototype cliquable, dans le Studio et derrière un lien de partage
- Les parcours principaux reliés et essayés dans un vrai navigateur
- Les commentaires du client, posés sur les zones désignées
- Le suivi de ce qui a été traité, et de ce qui a été refusé et pourquoi
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.
Le client a-t-il besoin d’un compte ?
Non. Le lien porte son jeton dans le fragment de l’adresse — la partie que ni le serveur ni l’aperçu d’une messagerie ne reçoivent — et la page ne dit rien de ce qu’elle ouvre tant qu’on ne l’a pas ouverte.
Le prototype marche-t-il sur téléphone ?
Oui, et la page s’affiche au format de l’appareil du visiteur, pas au format sur lequel on a conçu. C’est voulu : on conçoit en grand, on visite comme le visiteur.
Que devient le prototype après validation ?
Il reste la référence de l’intégration. La version validée fait autorité, et l’agent qui écrit le code la lit : structure, couleurs, typographies, et même les animations.
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.
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.