Un wireframe est le plan d'un écran en noir et blanc, une maquette est ce même écran avec son apparence finale, et un prototype relie les maquettes pour qu'on puisse cliquer d'un écran à l'autre comme dans l'application réelle. Les trois servent à prendre des décisions avant d'écrire du code, chacun à un niveau différent.
Les confondre coûte cher : une équipe qui discute de couleurs alors que le parcours n'est pas fixé refera ses écrans deux fois. Voici ce que chaque étape doit trancher, et dans quel ordre les enchaîner.
À quoi sert un wireframe ?
Le wireframe répond à une question : qu'y a-t-il sur cet écran, et où ? On y place des blocs gris, des titres, des boutons sans style, des zones de texte factice. Il se dessine sur papier, au tableau ou dans Figma en quelques minutes par écran. Sa pauvreté visuelle est voulue : personne ne commente une police, tout le monde commente l'ordre des informations.
Pour une application de prise de rendez-vous chez un kinésithérapeute, le wireframe fixe par exemple que le choix du créneau vient avant la saisie de l'identité, et que le bouton d'annulation se trouve sur l'écran de confirmation. C'est aussi à ce stade qu'on dessine l'enchaînement des écrans, souvent sous forme de schéma de flux, pour vérifier qu'aucun parcours ne mène à une impasse.
Qu'apporte une maquette par rapport au wireframe ?
La maquette, appelée aussi maquette haute fidélité ou mockup, habille le wireframe : couleurs de la marque, typographies, icônes, images, vrais textes. Elle montre l'écran tel qu'il sera livré, en version mobile et souvent en version ordinateur.
C'est l'étape où l'on construit un design system, même modeste : une palette, deux ou trois styles de texte, des composants réutilisables comme les boutons, les champs et les cartes. Dans Figma, l'auto-layout permet ensuite à ces composants de s'adapter à la longueur du texte ou à la largeur de l'écran. Le temps passé ici se récupère plus tard, puisqu'un bouton modifié une fois se met à jour sur tous les écrans.
La maquette sert aussi à vérifier ce que le wireframe ne montrait pas : le contraste des textes, la taille des zones à toucher au doigt, la lisibilité sur un petit écran en plein soleil.
Pourquoi passer par un prototype avant de développer ?
Un prototype relie les maquettes entre elles : un clic sur un bouton mène à l'écran suivant, un menu s'ouvre, une fenêtre se ferme. L'application n'existe pas encore et aucune donnée n'est enregistrée, mais l'expérience ressemble assez à la réalité pour voir si un utilisateur s'y perd.
On le fait tester par quelques personnes du public visé, avec une tâche précise à accomplir, et on observe sans aider. Le cabinet Nielsen Norman Group a montré dès mars 2000 qu'un test avec cinq utilisateurs comparables fait apparaître environ 85 % des problèmes d'utilisabilité (Nielsen Norman Group). Le même article recommande plusieurs petites séries de tests, en corrigeant entre chacune, plutôt qu'un seul grand test.
Corriger un parcours dans Figma se fait dans la journée. Le corriger dans une application déjà développée mobilise aussi les développeurs, une nouvelle série de tests et une nouvelle mise en ligne.
Dans quel ordre enchaîner les trois étapes ?
L'ordre classique va du plus grossier au plus fin, et chaque étape commence quand la précédente a tranché ses questions :
- Utilisateurs et parcours : qui utilise l'application, pour faire quoi, en combien d'étapes.
- Wireframes des écrans clés, relus par les personnes qui connaissent le métier.
- Maquettes haute fidélité et design system.
- Prototype cliquable, testé auprès de cinq utilisateurs, puis corrigé.
- Transmission aux développeurs, avec les mesures, les états des composants et les écrans d'erreur.
Sur un petit projet, wireframe et maquette se confondent parfois, surtout quand un design system existe déjà. Sauter le test du prototype, en revanche, est le raccourci qui se paie le plus cher. Les décisions à prendre avant même le premier écran sont détaillées dans notre article sur le cadrage d'une application avant de la construire avec l'IA.
Quel rôle pour l'IA dans ces étapes ?
L'IA accélère surtout les tâches autour du dessin. Elle aide à analyser les applications concurrentes, à rédiger les micro-textes (libellés de boutons, messages d'erreur, écrans vides) et à synthétiser les notes prises pendant les tests. Des outils comme Lovable produisent aussi une première version fonctionnelle à partir d'une description. Les arbitrages restent humains : quel parcours privilégier, quoi retirer d'un écran trop chargé. Pour un site plutôt qu'une application, notre retour sur la création d'un site vitrine avec Claude et Webflow montre la même répartition des rôles.
Questions fréquentes
Wireframe et zoning, c'est la même chose ?
Le zoning est encore plus sommaire : il découpe la page en grandes zones (en-tête, contenu, colonne). Le wireframe précise ensuite les éléments de chaque zone.
Faut-il un prototype pour un site vitrine ?
Rarement. Le prototype prend son sens quand l'utilisateur doit accomplir une tâche en plusieurs écrans : réserver, commander, remplir un dossier.
Quel outil utiliser pour les trois étapes ?
Figma couvre wireframes, maquettes et prototypes dans le même fichier, et sa version gratuite suffit pour démarrer. Le papier reste imbattable pour les premiers wireframes.
Qui doit relire les wireframes ?
Les personnes qui font le métier au quotidien, avant les décideurs. Ce sont elles qui repèrent l'étape oubliée ou le champ inutile.
La formation UI/UX Design d'application avec Figma et l'IA suit ce chemin en deux jours, du parcours utilisateur au prototype testé puis transmis aux développeurs.
