Un wireframe est le plan simplifié d'une page web ou d'un écran d'application, sans couleurs ni visuels définitifs. Définition, différences avec le zoning et la maquette, méthode en 6 étapes et outils actuels.
Un wireframe est un schéma simplifié d’une page web ou d’un écran d’application, qui montre où se placent les éléments (titres, textes, images, boutons, formulaires, navigation) et comment ils s’organisent, sans couleurs, sans typographie définitive et sans visuels réels. C’est le plan d’architecte du site : il fixe la structure, la hiérarchie de l’information et le parcours de l’utilisateur avant que le graphiste ne travaille l’apparence. On le réalise après l’arborescence et avant les maquettes graphiques, parce que corriger une structure sur un schéma prend quelques minutes, alors que la corriger sur un design fini ou un site développé coûte des jours.
Le vocabulaire du webdesign peut dérouter. On définit ici ce qu’est un wireframe et ce qu’il n’est pas, la différence avec le zoning, la maquette et le prototype, les niveaux de fidélité, les raisons de ne pas sauter cette étape, qui s’en charge, la méthode en six étapes pour en créer un et les outils à utiliser en 2026.
- Qu’est-ce qu’un wireframe ?
- À quoi ressemble un wireframe ?
- Qu’est-ce que le wireframing et quels sont les niveaux de fidélité ?
- Zoning, wireframe, maquette, prototype : quelle différence ?
- Quels éléments mettre dans le wireframe d’une page d’accueil ?
- Pourquoi faire un wireframe avant les maquettes ?
- Ce qu’un wireframe est, et ce qu’il n’est pas
- Qui réalise les wireframes ?
- Comment créer un wireframe en 6 étapes ?
- Quels outils utiliser pour créer des wireframes ?
- Peut-on se passer de wireframes ?
- Quelles erreurs éviter ?
- Questions fréquentes
- Sources
Qu’est-ce qu’un wireframe ?
Le mot anglais wireframe signifie littéralement « structure en fil de fer ». En français, on parle de maquette fil de fer ou de schéma filaire, mais le terme anglais est le plus employé en agence. Le Nielsen Norman Group, référence internationale en ergonomie, décrit les wireframes comme des documents qui visualisent un parcours utilisateur, la mise en page, la hiérarchie de l’information, voire les interactions.
L’analogie la plus parlante est celle de la maison. Le plan définit le nombre de pièces, leur taille, leur disposition et les passages entre elles, mais ne dit rien de la couleur des murs ni du choix des meubles. Le wireframe fait la même chose pour une page : il indique quelles zones existent (en-tête, présentation, liste de services, témoignages, formulaire, pied de page), leur importance relative, leur ordre, et ce que chaque élément permet de faire. La décoration, c’est-à-dire le design graphique, vient après.
Le wireframe sert aussi bien pour un site web que pour une application mobile, un logiciel métier ou un tableau de bord. Il se place dans le processus de conception après l’arborescence du site (la liste des pages et de leurs liens) et avant la maquette graphique puis le développement.
À quoi ressemble un wireframe ?
Un wireframe est volontairement dépouillé. On y trouve généralement :
- des rectangles pour délimiter les blocs de contenu ;
- des rectangles barrés d’une croix pour indiquer l’emplacement d’une image ou d’une vidéo ;
- des lignes ou du texte provisoire pour les paragraphes, et de vrais titres dès que possible ;
- des boutons et des champs de formulaire dessinés simplement, avec leur libellé ;
- la navigation principale et les liens importants ;
- des annotations dans la marge qui expliquent un comportement (« ce bloc se replie sur mobile », « liste filtrable par catégorie », « contenu géré depuis l’administration »).
Tout est en noir, blanc et niveaux de gris. Ce choix n’est pas esthétique : il empêche les discussions de dériver vers les couleurs ou les photos, et concentre l’attention sur la structure et l’usage. Voici la différence entre un wireframe et le design qui en découle :
À gauche, le wireframe n’a rien d’attrayant, mais il définit l’organisation de la page et les types de contenus qu’elle contiendra. À droite, la même structure a été habillée par le design graphique.
Il y a quelques années, les wireframes étaient remis aux clients sous forme de documents Word ou PDF annotés. Les outils actuels permettent de les partager en ligne, de les commenter à plusieurs et même de les rendre cliquables pour simuler la navigation d’une page à l’autre.
Qu’est-ce que le wireframing et quels sont les niveaux de fidélité ?
Le wireframing désigne l’activité de conception des wireframes : réfléchir à la structure des écrans, la dessiner, la confronter aux besoins des utilisateurs et l’ajuster. C’est une étape itérative, on produit plusieurs versions avant d’en valider une.
Un wireframe peut être plus ou moins détaillé, on parle de fidélité, c’est-à-dire de sa ressemblance avec le produit final.
| Niveau | Aspect | Contenu | Usage |
|---|---|---|---|
| Basse fidélité | Croquis à main levée ou blocs grossiers | Emplacements et intitulés | Explorer plusieurs idées en quelques minutes, en atelier |
| Moyenne fidélité | Réalisé sur logiciel, proportions et alignements respectés, en niveaux de gris | Vrais titres, textes proches du final, libellés précis | Faire valider la structure au client, préparer le design |
| Haute fidélité | Proche de l’écran final, parfois cliquable | Contenus réels, états des composants | Tester le parcours avec des utilisateurs, cadrer le développement |
Le Nielsen Norman Group recommande la basse fidélité quand on veut aller vite, pouvoir modifier le schéma pendant un test et montrer clairement aux interlocuteurs que le travail n’est pas terminé, et la haute fidélité quand on teste des composants ou un parcours précis dans des conditions proches du réel. Notre article dédié compare en détail les wireframes basse fidélité et haute fidélité.
Quand il faut montrer l’enchaînement de plusieurs écrans (un tunnel de commande, une inscription), on relie les wireframes par des flèches : NN/g appelle ce livrable un wireflow, mélange de wireframe et de diagramme de parcours.
Zoning, wireframe, maquette, prototype : quelle différence ?
Ces quatre livrables se suivent dans un projet et se confondent souvent. Chacun répond à une question différente.
| Livrable | Question à laquelle il répond | Niveau de détail | Moment |
|---|---|---|---|
| Zoning | Quelles grandes zones et dans quel ordre ? | Des blocs nommés (en-tête, bandeau, services, contact), sans contenu | Juste après l’arborescence |
| Wireframe | Que contient chaque zone et comment s’utilise-t-elle ? | Éléments précis, libellés, hiérarchie, en niveaux de gris | Après le zoning |
| Maquette (mockup) | À quoi ressemblera l’écran final ? | Couleurs, typographies, images, charte graphique | Après validation des wireframes |
| Prototype | Comment se comporte l’interface quand on l’utilise ? | Écrans cliquables, transitions, interactions | Pour tester avant le développement |
Le zoning est donc l’étape préliminaire du wireframe : il découpe la page en zones fonctionnelles et fixe la surface dédiée à chaque fonction. Le wireframe remplit ces zones avec les éléments réels. La maquette habille ensuite ce squelette avec l’identité visuelle, comme l’explique notre article sur le maquettage. Le prototype, enfin, rend l’ensemble interactif pour le tester.
Quels éléments mettre dans le wireframe d’une page d’accueil ?
Pour rendre les choses concrètes, voici les zones que l’on retrouve typiquement dans le wireframe de la page d’accueil d’une PME de services, de haut en bas, avec les questions que chacune doit trancher.
- En-tête : logo, menu principal (combien d’entrées, lesquelles), bouton d’action visible en permanence (« Demander un devis », « Prendre rendez-vous »), numéro de téléphone si les appels comptent. Sur mobile : menu replié, bouton d’appel direct.
- Bandeau principal : un titre qui dit ce que fait l’entreprise et pour qui, une phrase d’appui, un appel à l’action, l’emplacement d’une image ou d’une vidéo. C’est la zone qui doit répondre en quelques secondes à « suis-je au bon endroit ? ».
- Preuves rapides : note moyenne des avis, logos de clients, chiffre clé vérifiable, labels. Juste sous le bandeau pour rassurer tôt.
- Services ou produits : trois à six cartes avec un titre, une phrase et un lien vers la page détaillée. Le wireframe fixe le nombre de cartes et ce qui se passe s’il y en a davantage demain.
- Méthode ou différenciation : comment vous travaillez, en trois ou quatre étapes, ou ce qui vous distingue.
- Réalisations ou témoignages : format (carrousel, grille, citation unique), nombre d’éléments, lien vers la page complète.
- Contenus récents : derniers articles de blog ou actualités, utiles au référencement et à la crédibilité.
- Appel à l’action final : un bloc de contact ou un formulaire court pour ceux qui ont lu jusqu’au bout.
- Pied de page : coordonnées, liens secondaires, mentions légales, politique de confidentialité, réseaux sociaux.
Pour chaque zone, le wireframe précise le contenu attendu (titre de quelle longueur, combien de paragraphes, quelle image), son comportement (lien, ouverture d’une fenêtre, défilement) et son ordre d’affichage sur mobile. C’est aussi le moment de vérifier que les mots-clés visés par la page ont une place naturelle dans les titres et les textes.
Et pour une application mobile ?
Le principe est le même, mais on raisonne en écrans et en parcours plutôt qu’en pages. Le wireframe d’une application précise la barre de navigation (onglets en bas, menu latéral), les zones accessibles au pouce, les états de chaque écran (chargement, liste vide, erreur, succès), les messages de confirmation et l’enchaînement des écrans, d’où l’intérêt des wireflows. Les écrans d’une application étant plus petits et plus nombreux qu’une page web, on les dessine généralement par parcours complet : inscription, recherche, commande, paiement.
Pourquoi faire un wireframe avant les maquettes ?
Un site doit concilier beaucoup de contraintes : objectifs commerciaux, besoins des visiteurs, tailles d’écran, charte de la marque, contenus disponibles, référencement. Le wireframe permet de régler ces questions une par une, dans l’ordre, au moment où les changements coûtent le moins cher.
Rendre concrète la structure du site
Une arborescence reste abstraite, surtout pour un site de plusieurs dizaines de pages. Le wireframe la transforme en quelque chose de tangible : on voit l’organisation des pages principales et des sous-pages, la navigation, le chemin de l’utilisateur jusqu’à la conversion. Tout le monde, client comme équipe, parle enfin de la même chose.
Clarifier les fonctionnalités et leur utilité
« Module de filtres », « carte interactive », « galerie en visionneuse » : ces termes n’évoquent pas la même chose pour tout le monde. Placées sur un wireframe, les fonctionnalités deviennent compréhensibles : on voit où elles se trouvent, comment elles fonctionnent et si elles servent vraiment. Il arrive souvent qu’on en supprime une en la voyant sur le schéma, parce qu’elle ne sert pas les objectifs de la page. C’est autant de développement économisé.
Mettre l’expérience utilisateur au premier plan
Sans couleurs ni images pour détourner l’attention, on regarde objectivement la facilité d’utilisation : les chemins vers la conversion, le nom des liens, la place de la navigation, la hiérarchie visuelle des éléments. Les failles d’architecture apparaissent tôt, quand elles sont faciles à corriger.
Anticiper le responsive et la croissance des contenus
Un même parcours peut commencer sur mobile et se terminer sur ordinateur : on découvre un produit sur son téléphone, on le compare le soir sur un grand écran. Faire les wireframes des pages clés en version mobile et bureau oblige à décider ce qui s’affiche en premier sur petit écran. Le wireframe révèle aussi si la structure supportera la croissance : un catalogue de dix produits aujourd’hui en comptera peut-être cent dans six mois, et la page doit pouvoir les accueillir sans refonte.
Obtenir des retours plus tôt et plus utiles
En traitant la structure avant le style, on sépare deux sujets qui se mélangent sinon dans chaque réunion. Le client réagit plus facilement sur l’organisation de ses services ou l’ordre de ses pages quand rien ne l’attire vers une couleur ou une photo. Sauter cette étape repousse ces retours au moment où il faut retravailler des maquettes complètes, voire du code.
Gagner du temps sur l’ensemble du projet
- Le design part d’une base validée et ne se refait pas pour des questions de structure.
- L’équipe de développement sait exactement ce qu’elle construit.
- La rédaction des contenus devient plus claire : on sait combien de textes, de quelle longueur, pour quel emplacement.
- On évite les bricolages de dernière minute pour caser un élément oublié.
Ce qu’un wireframe est, et ce qu’il n’est pas
Un wireframe, c’est :
- un plan en niveaux de gris des pages clés, notamment celles qui doivent convertir ;
- une vue de la façon dont le site et chaque page racontent votre histoire ;
- l’occasion d’explorer les fonctionnalités, les éléments, les appels à l’action et la navigation ;
- un premier aperçu des titres, des sections à parcourir rapidement et des sections plus détaillées ;
- le moyen de vérifier comment chaque page mène vers la conversion ;
- le bon moment pour modifier la structure et repérer ce qui manque.
Un wireframe, ce n’est pas :
- le moment de choisir les couleurs, les polices ou les photos ;
- la version définitive des textes ;
- le design final, ni une promesse sur l’apparence du site ;
- une vérité intangible : il est fait pour susciter des réactions et des questions, et il va évoluer.
Qui réalise les wireframes ?
Le plus souvent, c’est le designer UX (expérience utilisateur), parfois appelé designer UX/UI ou architecte de l’information. Son rôle est de concevoir une interface facile à comprendre et à utiliser. C’est donc lui qui définit, à travers le wireframe, la navigation et l’organisation des écrans.
Il ne travaille pas seul. Le chef de projet apporte les objectifs et les contraintes, le client sa connaissance des clients et des produits, le rédacteur ou le spécialiste SEO les contenus et les mots-clés à placer, le développeur les limites techniques, et le designer graphique prépare la suite. Dans une petite structure, une même personne peut cumuler plusieurs de ces rôles. L’essentiel est que les personnes qui connaissent le métier et les clients relisent les wireframes avant validation : ce sont elles qui repèrent un service oublié, une question fréquente sans réponse ou un parcours qui ne correspond pas à la réalité du terrain.
Comment créer un wireframe en 6 étapes ?
Avant de commencer, fixez l’objectif : qu’est-ce que ce wireframe doit permettre de décider ? Et inutile de dessiner toutes les pages : concentrez-vous sur les pages clés et les parcours qui comptent (accueil, page service, fiche produit, tunnel de commande, formulaire de contact). Les pages secondaires réutiliseront les mêmes gabarits.
Étape 1 : rassembler les informations
Objectifs du site, personas (profils types de visiteurs) et leurs difficultés, analyse des sites concurrents, statistiques du site actuel s’il existe, contenus disponibles, contraintes techniques et SEO. Sans ces données, on dessine des wireframes qui ne résolvent aucun problème précis.
Étape 2 : définir l’arborescence et les parcours
Listez les pages et leurs liens, puis les parcours qui mènent aux objectifs : de l’arrivée sur Google jusqu’à la demande de devis, de la page d’accueil jusqu’à l’achat. Ces parcours donnent une direction commune à l’équipe et limitent le nombre d’options proposées à chaque étape.
Étape 3 : inventorier les contenus et les fonctionnalités
Pour chaque page clé, dressez la liste de ce qu’elle doit contenir et permettre, puis classez ces éléments par priorité. Appuyez-vous sur des principes éprouvés et sur les conventions que les visiteurs connaissent déjà (logo en haut à gauche qui ramène à l’accueil, panier en haut à droite) : l’originalité se joue sur le design, pas sur la place du menu.
Étape 4 : dessiner le zoning puis le wireframe
Commencez par les grandes zones, puis détaillez. Deux approches se complètent. Le croquis sur papier ou tableau blanc est rapide, facile à jeter, et montre clairement aux interlocuteurs qu’il s’agit d’un travail en cours, ce qui les encourage à donner un avis franc. L’outil numérique prend plus de temps mais facilite le partage, le travail à plusieurs et la précision : les libellés exacts, par exemple, comptent beaucoup pour tester une navigation. Dans les deux cas, restez simple : blocs, lignes, textes provisoires, niveaux de gris.
Étape 5 : tester et itérer
Montrez les wireframes, papier ou cliquables, à quelques utilisateurs représentatifs et posez-vous les bonnes questions. Comprennent-ils comment naviguer ? Reconnaissent-ils les fonctionnalités ? Où se bloquent-ils ? L’enchaînement des pages leur paraît-il logique ? Chaque réponse alimente une nouvelle version, un peu plus fidèle que la précédente.
Étape 6 : passer à la maquette
Une fois la structure validée, le designer graphique l’habille avec les couleurs, les typographies, les images et les composants de la charte. Ce n’est plus un wireframe mais une maquette, qui sera à son tour validée, puis transmise aux développeurs avec toutes les mesures et spécifications nécessaires.
Quels outils utiliser pour créer des wireframes ?
| Outil | Type | Points forts | À savoir |
|---|---|---|---|
| Papier, tableau blanc | Croquis | Le plus rapide pour explorer, accessible à tous en atelier | À numériser ensuite pour le partage |
| Figma | Outil de design en ligne | Collaboration en temps réel, du wireframe au prototype et à la maquette dans le même fichier | Offre gratuite Starter, formules payantes pour les équipes |
| Balsamiq | Wireframing basse fidélité | Rendu volontairement « croquis » qui garde la discussion sur l’idée, génération de wireframes assistée par IA | Version en ligne et version de bureau |
| Penpot | Outil de design open source | Gratuit, hébergeable sur vos propres serveurs | Intéressant si la maîtrise des données compte |
| Adobe XD | Outil de design | Encore présent dans d’anciens projets | Adobe l’indique en mode maintenance : à éviter pour un nouveau projet |
Certains outils souvent cités dans les anciens articles ne sont plus d’actualité : InVision a fermé ses services de collaboration le 31 décembre 2024, et Adobe XD ne reçoit plus de nouvelles fonctionnalités. Pour comparer les deux principaux outils de design d’interface, voyez notre article Adobe XD vs Figma. L’outil compte d’ailleurs moins que la méthode : un bon wireframe au crayon vaut mieux qu’un mauvais wireframe numérique.
Les outils d’intelligence artificielle savent désormais générer un premier wireframe à partir d’une description. C’est utile pour gagner du temps sur une page standard, mais ils produisent des structures génériques : le travail de réflexion sur vos utilisateurs, vos contenus et vos objectifs reste à faire.
Peut-on se passer de wireframes ?
Certains prestataires passent directement de l’arborescence au design. Trois arguments reviennent, aucun ne tient vraiment.
« C’est plus rapide de sauter cette étape »
Sur le moment, oui. Mais chaque problème de structure découvert plus tard se corrige sur des maquettes complètes, voire sur un site développé, ce qui coûte bien davantage. Il est beaucoup plus rapide d’ajouter, déplacer ou supprimer un bloc dans un wireframe que de reprendre un design.
« Les clients ne comprennent pas ce qu’est un wireframe »
C’est au prestataire de l’expliquer, sans jargon. Présenté comme le plan de la maison avant la décoration, le wireframe se comprend immédiatement, et un client qui a vu l’intérêt de valider la structure sur un schéma plutôt que sur une maquette finale ne veut plus s’en passer.
« Les autres livrables font déjà le travail »
En pratique, quand on saute les wireframes, certains éléments manquent presque toujours : une architecture pensée pour l’usage, l’alignement entre le design et les objectifs de conversion, des textes rédigés pour guider vers l’action, une structure modulaire et réutilisable, une hiérarchie claire de l’information. Aucune autre étape ne permet de traiter ces sujets aussi tôt et à aussi faible coût.
Seule exception raisonnable : un site vitrine très simple construit sur un thème éprouvé, dont les gabarits de page sont déjà définis. Dans ce cas, le zoning des quelques pages suffit souvent.
Quelles erreurs éviter ?
- Ajouter des couleurs et des images trop tôt : la discussion glisse vers l’esthétique et la structure passe au second plan.
- Remplir tout le wireframe de faux texte : les vrais titres et les vrais libellés changent la façon dont on lit la page. Utilisez-les dès que possible.
- Oublier le mobile : une structure pensée pour un grand écran ne se transpose pas toujours sur téléphone.
- Dessiner toutes les pages : on perd du temps sur des pages secondaires qui réutilisent les mêmes gabarits.
- Ne pas annoter : un comportement évident pour le designer ne l’est pas pour le développeur ni pour le client.
- Ne pas tester : un wireframe validé seulement en réunion n’a pas été confronté à de vrais utilisateurs.
Dans nos projets de création de site internet sur mesure (5 à 10 pages) comme dans nos refontes, la structure des pages clés est validée avant de passer au design graphique, pour que le budget serve au site et non aux allers-retours. Ce budget dépend du projet : voyez nos tarifs indicatifs.
Questions fréquentes
Comment expliquer simplement ce qu’est un wireframe ?
C’est le plan d’une page avant sa décoration : il montre où se trouvent les éléments et à quoi ils servent, sans couleurs ni images définitives.
Comment dit-on wireframe en français ?
Maquette fil de fer, schéma filaire ou squelette de page. Dans la pratique, le terme anglais est le plus utilisé.
Quelle est la différence entre un wireframe et un mockup ?
Le wireframe fixe la structure et le fonctionnement en niveaux de gris. Le mockup, ou maquette, montre l’apparence finale avec les couleurs, les typographies et les images.
Quelle est la différence entre le zoning et le wireframe ?
Le zoning découpe la page en grandes zones fonctionnelles. Le wireframe détaille le contenu de chaque zone : titres, boutons, formulaires, liens.
Quel logiciel gratuit pour faire un wireframe ?
Figma propose une offre gratuite et Penpot est entièrement open source. Une feuille de papier et un crayon restent aussi un excellent point de départ.
Faut-il un wireframe pour chaque page du site ?
Non. On réalise les wireframes des pages clés et de chaque gabarit type (accueil, page service, article, fiche produit, contact). Les autres pages en découlent.
Sources
- Nielsen Norman Group : How to Draw a Wireframe (Even if You Can’t Draw)
- Nielsen Norman Group : UX Prototypes, Low Fidelity vs. High Fidelity
- Nielsen Norman Group : Wireflows, a UX Deliverable for Workflows and Apps
- Figma : offres et tarifs
- Balsamiq Wireframes
- Penpot : plateforme de design open source
- Adobe XD : statut du produit (mode maintenance)
- Silicon Republic : InVision ferme ses services fin 2024 (janvier 2024)
