Wireframe

Un wireframe, ou maquette fil de fer, est un schéma simplifié d'un écran, généralement en noir et blanc, qui montre l'emplacement, la taille et la hiérarchie des contenus et des fonctions, sans traiter les couleurs, les images définitives ni la typographie. Il répond à la question où se trouve quoi, pas à la question à quoi ça ressemble.

C'est l'équivalent du plan d'architecte avant les échantillons de peinture. On y voit le nombre de pièces, leur enchaînement et la circulation ; on ne discute pas encore du carrelage. Ce dépouillement est volontaire : tant qu'un écran est gris, la conversation porte sur l'utile. Dès qu'il est coloré, elle glisse vers les goûts personnels et le fond du sujet passe à la trappe.

En quoi ça consiste

Un wireframe représente les blocs d'une page par de simples rectangles annotés : zone de titre, image, texte, bouton d'action, formulaire, navigation. Il peut être tracé à la main sur papier, ce qui reste la méthode la plus rapide, ou réalisé dans un outil comme Figma. On distingue les wireframes de basse fidélité, volontairement grossiers, et ceux de haute fidélité, qui intègrent les vrais textes et les proportions exactes. Plusieurs écrans reliés entre eux forment déjà l'ébauche d'un parcours.

À quoi ça sert concrètement

• Trancher vite et sans gaspillage : modifier un rectangle prend deux minutes, modifier une maquette finalisée prend une demi-journée, modifier une page déjà développée prend davantage encore.
• Vérifier la hiérarchie : ce qui compte le plus doit occuper le haut de l'écran et la plus grande surface. Un wireframe rend cette faute visible immédiatement.
• Chiffrer plus juste : en comptant les types d'écrans et les composants, un prestataire estime un budget bien plus fiable qu'à partir d'une description orale.
• Aligner les équipes : direction, marketing et développement regardent enfin le même objet plutôt que chacun sa version imaginaire.

Les erreurs fréquentes

Les remplir de faux textes en lorem ipsum, ce qui masque le vrai problème : le contenu n'est pas écrit. Y ajouter des couleurs et de belles images, ce qui les transforme en maquettes et ramène les débats esthétiques trop tôt. Ne faire que la page d'accueil, alors que la majorité des visiteurs entrent par une page intérieure. Enfin, les valider en réunion sans jamais les confronter à un utilisateur réel.

Comment ça s'articule avec le reste du projet

Le wireframe se situe entre le travail UX (parcours, arborescence) et le design UI. Une fois validé, il devient le squelette de la maquette Figma, puis le point de référence pendant le développement : si un bloc a disparu à l'intégration, on le voit tout de suite. Il sert aussi de brief au rédacteur, qui sait combien de signes prévoir pour chaque zone.