%% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | [[Design et Création Numérique/Design/User Interface/4 Écrans adaptatifs et textes d'interface\|← Écrans adaptatifs et textes d'interface]] | | > |:---|---:| %% nav-fin %% # 📘 5. De la maquette au développeur Une interface passe par trois représentations avant d'être codée. Chacune sert à décider une chose. Cette page dit laquelle, et ce que le développeur attend à la fin. ## 5.1 Trois représentations | Représentation | Ce qu'elle montre | Ce qu'elle décide | Temps | |---|---|---|---| | **Maquette filaire** (wireframe) | Des rectangles gris, des blocs de texte, la place de chaque élément. Sans couleur ni police. | La structure, la hiérarchie, le parcours entre écrans. | Minutes par écran. Se refait sans regret. | | **Maquette fidèle** (mockup) | L'écran tel qu'il sera vu : couleurs, polices, textes réels, composants dans leurs états. | L'apparence, la cohérence avec le système de composants. | Heures par écran. | | **Prototype** | Les maquettes fidèles reliées entre elles, cliquables. | Le parcours vécu : l'utilisateur trouve-t-il, comprend-il, réussit-il. C'est le support des tests utilisateurs de User eXperience. | Heures pour relier, une fois les maquettes faites. | Commencer par la maquette fidèle est l'erreur la plus fréquente : on discute la couleur d'un bouton dont la place n'est pas décidée. **À manipuler :** retournez chaque carte pour lire ce que la représentation décide. ```sq-cartes Maquette filaire :: Décide la structure, la hiérarchie et le parcours entre écrans. Sans couleur ni police. Maquette fidèle :: Décide l'apparence et la cohérence avec le système de composants. Prototype :: Décide le parcours vécu par l'utilisateur. Support des tests utilisateurs. Documentation de remise :: Écrans, composants avec états et dimensions, palette, typographie, espacement, comportements, textes. ``` ## 5.2 Les outils Un outil de maquettage dessine les trois représentations et exporte les valeurs pour le développeur. Outils courants, relevés en novembre 2026 : Figma, en ligne, avec une offre gratuite ; Penpot, libre et en ligne ; Excalidraw pour les filaires rapides. Les offres commerciales changent : vérifiez-les avant de choisir. Le choix de l'outil importe moins que la discipline : un fichier par projet, une page par écran, les composants dans une bibliothèque. ## 5.3 Ce que le développeur attend Le développeur reçoit la maquette fidèle et une documentation. Il code ce qu'il voit et ce qu'il lit. Ce qui manque est deviné, et deviné autrement que prévu. La documentation contient : - la **liste des écrans** et le parcours entre eux, avec le point d'entrée ; - pour chaque composant, ses **variantes**, ses **états** et ses **dimensions** : hauteur, marges, rayon des angles, taille du texte ; - la **palette** avec les codes des couleurs et le rôle de chacune ; - l'**échelle typographique** : police, tailles, graisses, interlignes ; - l'**échelle d'espacement** ; - les **comportements** : ce qui se passe au clic, au survol, en cas d'erreur, pendant le chargement ; - les **textes** de l'interface, tous, y compris les messages d'erreur et les états vides ; - les **trois largeurs** de chaque écran, ou la règle de réorganisation. ## 5.4 La remise - Une réunion de trente minutes avec le développeur, maquette ouverte, pour parcourir les écrans dans l'ordre du parcours. - Le développeur pose ses questions ; chaque réponse s'écrit dans la documentation le jour même. - Ce qui est hors de la maquette est hors du projet. Une demande qui arrive après la remise est une nouvelle version, datée. ## 5.5 Vers la quête Cette compétence se valide par un test. La mise en pratique se fait dans une quête, sur un projet qui vous appartient : une application, un site, un outil pour une association, un jeu. La quête produit une maquette fidèle, un prototype et la documentation de remise. Le catalogue des quêtes en précise le guide, le temps de travail et les XP. ## 5.6 Exercice Prenez un écran de l'application SkillQuest et refaites-en la maquette filaire en dix minutes, sur papier ou dans un outil. Comparez avec l'écran réel : ce que vous avez placé ailleurs dit ce que vous jugez plus important. ## 5.7 À retenir - Filaire pour la structure, fidèle pour l'apparence, prototype pour le parcours. Dans cet ordre. - Le développeur code ce qu'il voit et ce qu'il lit. Le reste est deviné. - La documentation liste les écrans, les composants avec leurs états et leurs dimensions, la palette, la typographie, l'espacement, les comportements et tous les textes. %% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | [[Design et Création Numérique/Design/User Interface/4 Écrans adaptatifs et textes d'interface\|← Écrans adaptatifs et textes d'interface]] | | > |:---|---:| %% nav-fin %% --- 🗓️ Historique Dernière mise à jour : `26 septembre 2026` Rédigé par : [[Julien DUQUENNOY]]