Wireframe

Un wireframe est une maquette filaire d’une interface (site, application, logiciel) : un schéma simplifié qui fixe la structure d’une page, la hiérarchie des contenus et l’enchaînement des actions avant tout travail de design visuel. On parle aussi de maquette fil de fer ou de zoning détaillé. Il se dessine en niveaux de gris, avec des blocs, des titres et des boutons génériques.

Ce qu’un wireframe montre, et ce qu’il laisse de côté

Un bon wireframe répond à quatre questions : où se trouve chaque élément, dans quel ordre on le lit, ce qu’il permet de faire, et où il mène. On y voit donc les blocs de contenu, les titres, les libellés réels des boutons, la navigation et, en annotation, le comportement attendu (« ouvre une fenêtre », « affiche une erreur si le champ est vide »). On n’y trouve en revanche ni palette de couleurs, ni typographie définitive, ni photographies : tout ce qui détournerait la discussion de la structure.

À quoi sert un wireframe

• Valider l’organisation d’une page avant d’investir dans le graphisme et le développement : les informations importantes sont-elles visibles, le chemin vers l’action principale (contact, achat, inscription) est-il clair ?
• Aligner les parties prenantes. Il est plus simple de se disputer sur un schéma gris que sur une page terminée.
• Révéler le contenu à produire. Un wireframe qui prévoit trois témoignages et une FAQ pose la question : qui les écrit, et pour quelle date ?
• Estimer l’effort de développement : le nombre de gabarits et de composants se compte sur les wireframes.
• Limiter le coût des erreurs. Corriger un wireframe prend quelques minutes ; corriger une page déjà développée peut prendre des jours.

Trois niveaux de fidélité

Figma distingue trois niveaux (guide consulté en octobre 2026). Le wireframe basse fidélité se limite aux blocs, à la navigation et à l’organisation de l’information, avec du texte de remplissage. Le niveau intermédiaire ajoute des annotations et du vrai contenu pour décrire les fonctions et les interactions clés. Le wireframe haute fidélité ressemble à une première maquette, avec polices, couleurs et logo, mais sans la logique d’un prototype. Sur un projet de site Webflow, nous commençons en basse fidélité pour aligner l’équipe, puis nous montons en fidélité page par page.

Wireframe, maquette, prototype : la chaîne

Le wireframe définit la structure. La maquette applique ensuite l’identité visuelle : couleurs, typographies, images, espacements définitifs, c’est le terrain de l’UI design. Le prototype rend le tout cliquable pour tester la navigation. On passe ainsi du schéma gris à la page finie, puis à l’essai en situation, chaque étape ajoutant une couche sans remettre en cause la précédente.

Comment faire un wireframe, étape par étape

1. Fixer l’objectif de la page : une action principale attendue, et une seule.
2. Partir du contenu réel, pas d’un gabarit : les vrais titres, les vraies questions, les vraies preuves.
3. S’appuyer sur le parcours : d’où vient le visiteur, que cherche-t-il, quelle étape de son parcours utilisateur la page sert-elle ?
4. Esquisser au crayon trois ou quatre dispositions possibles, en quelques minutes chacune.
5. Dessiner la structure dans l’outil : blocs, titres, boutons, du plus important au moins important.
6. Penser mobile d’abord : ce qui tient sur un petit écran est l’essentiel, le reste est un bonus pour les grands. La logique responsive se pose dès cette étape.
7. Annoter et faire valider la structure avant de passer au design.

Le wireframe, un bon moment pour le SEO

C’est sur le wireframe qu’on décide du titre principal, de l’ordre des sections, de la place d’une FAQ, des liens vers les pages voisines et des appels à l’action. Ces choix pèsent ensuite sur la lecture, la conversion et le référencement. Modifier la structure d’une page publiée coûte plus cher que de la repenser sur un schéma : autant y associer la personne qui s’occupe du SEO dès cette étape.

Les outils pour faire un wireframe

Figma est l’outil de référence : sa version gratuite suffit pour concevoir des wireframes, les partager et recueillir des commentaires. Balsamiq est apprécié pour son rendu volontairement croquis, qui rappelle que tout est encore provisoire. Whimsical et Miro conviennent aux ateliers collaboratifs, Excalidraw à un schéma rapide sans compte, Canva et Wireframe.cc aux premiers essais. Le papier et le crayon restent très efficaces en phase d’idéation. Peu importe l’outil, l’important est que l’équipe puisse commenter et corriger sans friction.

Zoning, wireflow : les mots voisins

Le zoning est une version très schématique du wireframe : des zones nommées (en-tête, bandeau, contenu, pied de page), sans détail interne. Le wireflow relie plusieurs wireframes par des flèches pour montrer comment on passe d’un écran à l’autre : c’est la jonction entre le wireframe et le user flow. Choisissez celui qui répond à la question posée : où va chaque chose (zoning), à quoi ressemble chaque écran (wireframe), comment passe-t-on de l’un à l’autre (wireflow).

Les erreurs qui reviennent

• Du faux texte partout : il cache les titres trop longs et les cas qui cassent la mise en page.
• Des détails visuels trop tôt (couleurs, ombres, photos), qui déclenchent des débats de goût au lieu de débats de structure.
• Aucun objectif de page : on dessine des blocs sans savoir ce qu’ils servent.
• Des états oubliés : liste vide, message d’erreur, chargement.
• Un wireframe jamais relu par la personne qui développera.
• Une version mobile reportée à plus tard.

Notre façon de travailler

Chez Mazette.co, nous dessinons les wireframes directement dans Figma, avec des composants réutilisables qui deviennent ensuite la base du design system. Le wireframe s’inscrit dans la démarche d’UX design et précède le webdesign : voir notre expertise Webdesign sur mesure.