Quand on regarde une maquette de site web terminée dans Figma, on voit les couleurs, les typographies, les images, les boutons, les icônes et tous les détails qui donnent une personnalité à l’interface.
Mais avant d’arriver à cette étape, j’aime souvent travailler avec une version beaucoup plus simple de la page.
Pas de belle photographie.
Pas encore de palette définitive.
Pas besoin de chercher pendant vingt minutes le bon rayon pour un bouton.
À ce stade, ce qui m’intéresse est ailleurs :
- quelle information doit apparaître en premier ;
- dans quel ordre les contenus doivent être présentés ;
- où placer les actions importantes ;
- comment l’utilisateur va parcourir la page ;
- et si l’ensemble fonctionne avant même de commencer le travail graphique.
C’est précisément le rôle du wireframe.
On peut le voir comme le squelette d’une interface : il montre sa structure et son fonctionnement sans chercher à représenter immédiatement son apparence finale.
Dans mon travail de designer UX/UI, c’est une étape que je trouve particulièrement intéressante parce qu’elle oblige à répondre à une question très simple :
« Si j’enlève le design, est-ce que cette page reste logique et compréhensible ? »
Qu’est-ce qu’un wireframe ?
Un wireframe est une représentation simplifiée de l’organisation d’une page ou d’une interface numérique.
On peut aussi entendre parler de :
- maquette filaire ;
- schéma fonctionnel ;
- maquette basse fidélité ;
- ou parfois simplement de « squelette » de la page.
Ces expressions ne sont pas toujours utilisées exactement de la même manière par tous les designers, mais l’idée reste similaire.
Le wireframe permet de représenter :
- les grandes zones de la page ;
- la navigation ;
- les principaux contenus ;
- les boutons et appels à l’action ;
- les fonctionnalités ;
- la hiérarchie de l’information ;
- et parfois les relations entre plusieurs écrans.
Visuellement, un wireframe peut être extrêmement simple.
Une image peut être représentée par un rectangle barré d’une croix. Un titre par quelques lignes. Un bouton par un simple bloc. Une zone de navigation par une série de rectangles.
Ce dépouillement est volontaire.
Le but n’est pas encore de montrer à quoi ressemblera précisément le site. Le but est de réfléchir à son fonctionnement.
Quelle place occupe le wireframe en UX/UI ?
Le wireframe se situe principalement du côté de la réflexion UX.
Il permet de travailler notamment :
- les besoins utilisateurs ;
- les parcours ;
- la hiérarchie ;
- l’organisation des contenus ;
- la navigation ;
- les fonctionnalités.
Le travail UI arrive ensuite plus précisément avec les couleurs, les typographies, les composants détaillés et l’identité graphique.
J’explique plus en détail cette distinction dans mon article consacré aux différences entre UX et UI.
En pratique, la frontière n’est toutefois pas complètement étanche.
Même dans un wireframe, je commence déjà à réfléchir à certaines questions visuelles :
- quelle taille relative donner aux éléments ;
- quels blocs doivent être rapprochés ;
- où laisser davantage d’espace ;
- quelle information doit immédiatement attirer l’œil.
Le wireframe représente donc une sorte de pont entre la réflexion et la future interface.
Le wireframing fait partie des différentes étapes que nous pouvons intégrer dans une démarche de conception UX/UI : compréhension des besoins, structuration des parcours, wireframes, maquettes et prototypage.
Pourquoi créer un wireframe avant une maquette ?
On pourrait très bien ouvrir Figma et commencer directement à créer une belle page.
C’est tentant.
Le problème, c’est qu’une fois que l’on a choisi une photographie, travaillé une palette et passé du temps sur une composition, il devient parfois beaucoup plus difficile de remettre en question la structure elle-même.
On s’attache à ce que l’on a déjà produit.
Le wireframe permet au contraire de rester dans une phase où modifier une idée coûte très peu.
Déplacer une section prend quelques secondes.
Supprimer un bloc n’oblige pas à retravailler toute la direction artistique.
Créer une seconde proposition est rapide.
On peut donc tester plusieurs hypothèses.
Figma présente justement le wireframing comme une manière de visualiser rapidement la structure, les parcours et les fonctionnalités avant de consacrer davantage de temps aux finitions.
Pour moi, le principal bénéfice est là :
Plus une décision est facile à modifier, plus on peut se permettre de la remettre en question.
Que trouve-t-on dans un wireframe ?
Tout dépend évidemment du projet et du niveau de précision recherché.
Pour un site web, je peux représenter :
La navigation
- logo ;
- menu principal ;
- sous-navigation éventuelle ;
- bouton de contact ;
- recherche ;
- navigation mobile.
Les contenus
- titre principal ;
- introduction ;
- blocs de texte ;
- illustrations ;
- vidéos ;
- chiffres clés ;
- témoignages ;
- réalisations ;
- FAQ.
Les actions
- demande de devis ;
- prise de rendez-vous ;
- achat ;
- réservation ;
- inscription ;
- téléchargement ;
- passage vers une autre page.
Les fonctionnalités
- formulaires ;
- moteurs de recherche ;
- filtres ;
- accordéons ;
- carrousels ;
- onglets ;
- espaces connectés ;
- configurateurs.
Le wireframe permet ainsi de transformer une liste de besoins assez abstraite en quelque chose que l’on peut réellement observer et discuter.
Ce que je préfère ne pas mettre trop tôt dans un wireframe
Un wireframe peut devenir très détaillé.
Mais au début d’un projet, je trouve souvent utile de conserver une certaine neutralité graphique.
Je peux volontairement éviter :
- les couleurs définitives ;
- les photographies finales ;
- les effets graphiques ;
- les ombres ;
- les animations ;
- les typographies très expressives ;
- les détails décoratifs.
Pourquoi ?
Parce que ces éléments attirent énormément l’attention.
Si je montre une page très travaillée graphiquement, le premier retour peut devenir :
« Je ne suis pas fan de ce bleu. »
Alors que la vraie question que j’essaie de résoudre à ce moment-là est :
« Est-ce que l’utilisateur comprend les trois étapes de cette prestation ? »
Un wireframe suffisamment neutre permet donc aussi de concentrer les discussions sur les bonnes questions au bon moment.
Wireframe basse, moyenne ou haute fidélité : quelles différences ?
Tous les wireframes n’ont pas le même niveau de détail.
| Type | Caractéristiques | Utilité |
|---|---|---|
| Basse fidélité | Croquis, rectangles, zones très simplifiées | Explorer rapidement plusieurs idées |
| Fidélité moyenne | Structure plus précise, composants, vrais niveaux de contenus | Valider l’organisation d’une page |
| Haute fidélité | Dimensions et contenus beaucoup plus proches de l’interface finale | Préparer la maquette ou tester certains comportements |
Le wireframe basse fidélité
Il peut être réalisé avec quelques traits sur papier.
C’est parfois largement suffisant pour se demander :
- doit-on mettre ce contenu avant celui-ci ?
- où apparaît le CTA ?
- combien de sections sont réellement nécessaires ?
Le wireframe de fidélité moyenne
C’est souvent celui qui devient le plus utile dans un projet web.
La structure commence à être réaliste et les contenus occupent des volumes proches de ce qu’ils auront réellement.
Le wireframe haute fidélité
La frontière avec la maquette devient alors plus fine.
On peut commencer à utiliser des composants plus précis et à travailler certaines interactions.
Mais le niveau de fidélité n’est pas une compétition.
Le meilleur wireframe est celui qui permet de prendre la décision dont on a besoin à ce moment du projet.
Wireframe, maquette et prototype : quelle différence ?
Ces trois termes sont souvent mélangés.
Ils correspondent pourtant à des objectifs différents.
| Wireframe | Maquette UI | Prototype | |
|---|---|---|---|
| Objectif | Structurer | Visualiser le design final | Simuler les interactions |
| Couleurs | Souvent limitées | Oui | Généralement oui |
| Typographies | Simples | Définitives ou proches | Proches du produit final |
| Images | Souvent représentées par des blocs | Visuels réels ou sélectionnés | Visuels proches du final |
| Interactions | Limitées ou schématiques | Principalement statique | Cliquables et simulées |
Le wireframe répond à « comment organiser ? »
Il travaille principalement la structure.
La maquette répond à « à quoi cela va-t-il ressembler ? »
C’est ici que les couleurs, les typographies, l’iconographie et l’identité visuelle prennent réellement leur place.
Sur ce sujet, l’article d’Églantine consacré à la manière de créer une identité visuelle forte sans sacrifier l’expérience utilisateur complète bien cette réflexion.
Le prototype répond à « comment cela va-t-il réagir ? »
Il permet de simuler des clics, changements d’écrans, menus, formulaires ou autres interactions sans avoir encore développé le site.
Ces trois étapes ne sont pas forcément obligatoires dans tous les projets, mais elles permettent de séparer différentes questions et donc de mieux les traiter.
Ce qu’il faut définir avant de dessiner le premier wireframe
Faire un wireframe sans avoir compris le projet revient simplement à dessiner des rectangles au hasard.
Avant de commencer, j’ai besoin d’un minimum d’informations.
Comprendre l’utilisateur
À qui s’adresse la page ?
Que vient chercher cette personne ?
Comprendre l’objectif de la page
Veut-on :
- présenter une prestation ;
- rassurer ;
- permettre un achat ;
- générer une demande ;
- faire réserver ;
- informer ;
- faire comparer plusieurs offres ?
Connaître les contenus
Quels textes, visuels, chiffres, références ou fonctionnalités doivent apparaître ?
Comprendre la place de la page dans le site
Une page n’existe jamais totalement seule.
Elle dépend de l’arborescence et de l’expérience utilisateur globale du site.
Il est donc important de savoir :
- d’où arrive l’utilisateur ;
- où il peut aller ensuite ;
- et comment la page s’inscrit dans la navigation générale.
L’article de TooNetCreation sur l’architecture d’un site web permet également d’approfondir cette logique structurelle.
Le wireframe est surtout un outil de hiérarchisation
Une erreur fréquente consiste à penser qu’une page est réussie simplement parce qu’elle contient toutes les informations nécessaires.
Mais une page peut tout avoir et malgré tout être incompréhensible.
Le problème vient alors souvent de la hiérarchie.
Dans un wireframe, je peux poser très concrètement les questions suivantes :
- Quel est le premier message à comprendre ?
- Quelle information vient ensuite ?
- Quelle preuve doit apparaître avant le CTA ?
- Quels contenus peuvent être secondaires ?
- Quels éléments doivent être regroupés ?
- Que peut-on supprimer ?
La taille et la position des blocs commencent déjà à traduire ces priorités.
Si cinq éléments occupent exactement la même place visuelle, l’utilisateur risque de ne pas savoir par lequel commencer.
Le wireframe ne consiste donc pas seulement à placer des blocs. Il consiste à décider de leur importance.
Faut-il utiliser de vrais contenus dans un wireframe ?
Il n’existe pas une réponse unique.
Pour une première esquisse, quelques blocs ou textes provisoires peuvent suffire.
Mais plus le wireframe avance, plus je trouve intéressant de travailler avec des contenus réalistes.
Pourquoi ?
Parce que le contenu influence directement le design.
Un titre de trois mots et un titre de trois lignes ne créent pas la même interface.
Trois avantages et neuf avantages ne s’organisent pas de la même manière.
Une page avec 300 mots et une page avec 1 500 mots ne demandent pas le même rythme.
C’est aussi pour cette raison que chez TooNetCreation, nous essayons de faire dialoguer contenu, SEO, UX et design le plus tôt possible dans les projets.
Prévoir arbitrairement un petit rectangle avec « texte » puis découvrir ensuite que le contenu réel fait quinze paragraphes est rarement une bonne méthode.
Faut-il créer les wireframes mobile et desktop ?
Oui, dès que la complexité du projet le justifie.
Une version mobile n’est pas simplement une version desktop que l’on réduit proportionnellement.
Sur mobile :
- l’espace horizontal disparaît ;
- certains contenus doivent changer de position ;
- la navigation évolue ;
- les zones tactiles doivent rester confortables ;
- les informations prioritaires deviennent encore plus importantes ;
- certains effets desktop n’existent plus.
Une composition avec trois colonnes peut, par exemple, devenir :
- trois blocs successifs ;
- un carrousel ;
- un accordéon ;
- ou une présentation complètement différente.
Le wireframe permet justement de prendre ces décisions avant d’avoir finalisé le design.
Figma recommande également de penser les wireframes en fonction des formats d’écran réellement utilisés par le public cible.
Exemple concret : le wireframe d’une page de service
Prenons une entreprise qui souhaite présenter une prestation et générer des demandes de devis.
Avant de réfléchir aux couleurs et aux visuels, je peux construire un premier parcours.
Bloc 1 : comprendre immédiatement la prestation
- titre clair ;
- promesse principale ;
- courte introduction ;
- première action possible.
Bloc 2 : identifier si la prestation correspond au besoin
Présentation des problématiques auxquelles elle répond.
Bloc 3 : expliquer ce qui est proposé
Services, fonctionnalités ou périmètre.
Bloc 4 : expliquer la méthode
Les différentes étapes rassurent l’utilisateur sur le déroulement.
Bloc 5 : apporter des preuves
- références ;
- réalisations ;
- témoignages ;
- chiffres clés.
Bloc 6 : répondre aux objections
FAQ, délais, fonctionnement ou autres questions importantes.
Bloc 7 : permettre d’agir
Formulaire, prise de rendez-vous ou demande de devis.
Ce parcours n’est évidemment pas une recette à appliquer automatiquement à toutes les pages.
Mais il montre ce que permet un wireframe : réfléchir d’abord à la logique de lecture avant de chercher l’effet graphique.
Exemple concret : le wireframe d’une page d’accueil
La page d’accueil pose un autre problème.
Elle doit souvent répondre à plusieurs intentions.
L’utilisateur doit rapidement comprendre :
- qui est l’entreprise ;
- ce qu’elle propose ;
- à qui elle s’adresse ;
- ce qui la différencie ;
- où continuer sa navigation.
Un wireframe peut aider à éviter une page d’accueil qui cherche à tout raconter immédiatement.
Je peux tester plusieurs approches :
Approche orientée services
Les principales offres apparaissent rapidement.
Approche orientée bénéfices
La page commence par les problèmes ou objectifs des utilisateurs.
Approche orientée image de marque
Le message et l’univers sont plus présents avant la présentation détaillée des services.
Le choix dépend toujours de l’entreprise et du public.
Il ne devrait pas être dicté uniquement par le template utilisé.
Peut-on tester un wireframe avec de vrais utilisateurs ?
Oui.
Et il n’est pas nécessaire d’attendre que le site soit développé pour commencer à observer certaines difficultés.
Un wireframe ou un prototype basse fidélité peut déjà permettre de demander à une personne :
- où cliquerait-elle pour effectuer une action ;
- quelle information elle comprend en premier ;
- où elle chercherait un élément particulier ;
- comment elle imagine poursuivre son parcours.
Nielsen Norman Group présente notamment le prototype testing comme une méthode permettant d’identifier des problèmes d’utilisabilité avant l’implémentation du produit.
Les prototypes peuvent même être réalisés sur papier.
C’est intéressant parce qu’une interface n’a pas besoin d’être belle ou développée pour révéler certains problèmes de compréhension.
Si personne ne trouve l’action principale dans un schéma simple, ajouter un dégradé et une animation ne résoudra probablement pas le problème.
Pourquoi le wireframe facilite aussi les échanges avec le client
Le wireframe n’est pas uniquement un outil interne au designer.
Il peut également faciliter les échanges avec le client et l’équipe projet.
À ce stade, les discussions peuvent porter sur :
- les contenus manquants ;
- les priorités ;
- les fonctionnalités ;
- les actions importantes ;
- l’ordre des informations ;
- les besoins spécifiques.
C’est généralement plus productif que de découvrir ces sujets lorsque toute la maquette graphique est déjà finalisée.
Le wireframe crée également une base commune entre :
- le client ;
- le designer ;
- le rédacteur ;
- le spécialiste SEO ;
- le développeur.
Chacun peut voir concrètement la même page et poser ses questions au bon moment.
8 erreurs fréquentes lors de la création d’un wireframe
1. Faire le wireframe sans comprendre l’objectif de la page
Un rectangle en haut, trois colonnes et un CTA en bas ne constituent pas une réflexion UX.
Chaque élément doit correspondre à un besoin.
2. Commencer directement par les détails graphiques
Plus le wireframe ressemble à la maquette finale, plus on risque de discuter de détails visuels alors que la structure n’est pas encore validée.
3. Utiliser systématiquement la même structure
Une structure peut fonctionner sur un projet et être complètement inadaptée sur un autre.
4. Ne pas prévoir les vrais volumes de contenu
Une interface parfaite avec du Lorem Ipsum peut devenir beaucoup moins élégante lorsque les textes réels arrivent.
5. Oublier les interactions
Un menu, un filtre, un formulaire ou un accordéon ont un comportement qu’il faut anticiper.
6. Penser uniquement desktop
Les décisions prises sur grand écran ne se transposent pas automatiquement sur mobile.
7. Vouloir tout mettre sur la page
Le wireframe sert aussi à supprimer.
Si un bloc n’aide ni l’utilisateur ni l’objectif de la page, sa présence mérite d’être questionnée.
8. Considérer le wireframe comme une version définitive
Son principal intérêt est justement de pouvoir évoluer.
Un wireframe qui change au cours du projet n’est pas un mauvais wireframe.
C’est souvent la preuve qu’il remplit son rôle.
Ma méthode pour créer un wireframe
Je ne suis pas une procédure parfaitement identique sur tous les projets, mais je retrouve généralement les étapes suivantes.
1. Comprendre le contexte
Activité, utilisateurs, objectifs et contraintes.
2. Identifier les contenus
Quels éléments doivent réellement apparaître sur la page ?
3. Définir les priorités
Qu’est-ce que l’utilisateur doit comprendre et faire ?
4. Organiser le parcours
Dans quel ordre les informations doivent-elles arriver ?
5. Dessiner une première structure
Je reste volontairement simple pour pouvoir modifier rapidement mes choix.
6. Comparer plusieurs solutions
Il est parfois beaucoup plus intéressant de créer deux structures différentes que d’essayer de perfectionner immédiatement la première idée.
7. Ajouter des contenus plus réalistes
Je vérifie que la structure fonctionne avec les vrais volumes.
8. Décliner les formats importants
Desktop et mobile notamment.
9. Faire relire et tester
Les retours permettent de repérer des éléments que l’on ne voit plus lorsque l’on travaille longtemps sur une interface.
10. Passer à la maquette UI
Une fois la logique suffisamment solide, l’identité graphique peut prendre davantage de place.
C’est cette démarche que nous utilisons également dans notre accompagnement en conception UX/UI et expérience utilisateur chez TooNetCreation.
Pourquoi j’utilise Figma pour créer mes wireframes
Un wireframe peut parfaitement être réalisé sur papier.
Mais pour les projets web, j’utilise principalement Figma.
L’outil permet notamment de :
- créer rapidement plusieurs variantes ;
- réutiliser des composants ;
- travailler différents formats d’écran ;
- partager facilement les propositions ;
- centraliser les commentaires ;
- faire évoluer le wireframe vers une maquette détaillée ;
- puis éventuellement vers un prototype interactif.
Cette continuité est intéressante.
Je peux commencer avec une page volontairement très simple puis progressivement enrichir le même fichier à mesure que les décisions sont prises.
Mais l’outil n’est pas le plus important.
Un mauvais parcours dessiné dans Figma reste un mauvais parcours.
Le logiciel permet de matérialiser la réflexion. Il ne remplace pas la réflexion elle-même.
Faut-il obligatoirement créer un wireframe pour chaque projet ?
Non.
Je ne pense pas qu’une méthode de design soit intéressante simplement parce qu’elle impose systématiquement toutes les étapes possibles.
Sur une modification très simple d’une interface existante, créer dix wireframes peut être inutile.
De même, si :
- la structure est déjà parfaitement définie ;
- le projet utilise un design system très cadré ;
- la modification concerne uniquement un élément visuel ;
- ou le problème est suffisamment simple pour être résolu directement ;
on peut parfois passer plus rapidement à la maquette.
En revanche, plus un projet comporte :
- de contenus ;
- de fonctionnalités ;
- de parcours ;
- d’intervenants ;
- ou d’incertitudes ;
plus le wireframe devient utile.
Ce n’est donc pas une étape obligatoire parce qu’elle figure dans une méthodologie.
C’est un outil que l’on utilise lorsqu’il permet de mieux résoudre le problème.
Comment savoir si un wireframe est suffisamment abouti ?
Je ne cherche pas nécessairement à ce qu’il soit « beau ».
Ce n’est pas son rôle.
Je préfère vérifier que je peux répondre clairement à plusieurs questions.
- Comprend-on l’objectif principal de la page ?
- L’information importante apparaît-elle suffisamment tôt ?
- Les contenus suivent-ils un ordre logique ?
- Les principales actions sont-elles identifiables ?
- Les fonctionnalités nécessaires sont-elles présentes ?
- Existe-t-il des blocs qui semblent inutiles ?
- Le volume de contenu est-il réaliste ?
- La structure peut-elle fonctionner sur mobile ?
- Les différentes personnes du projet comprennent-elles la même chose ?
- Sommes-nous capables d’expliquer pourquoi chaque grande section existe ?
Si ces réponses sont suffisamment claires, il devient généralement pertinent de passer au travail UI.
Le wireframe n’a pas besoin de tout résoudre.
Il doit surtout permettre de sécuriser les décisions structurelles avant de consacrer davantage de temps au design détaillé.
FAQ : wireframe et conception UX/UI
Qu’est-ce qu’un wireframe en UX/UI ?
Un wireframe est une représentation simplifiée de la structure d’une interface. Il permet de positionner les contenus, fonctionnalités, éléments de navigation et actions principales avant de finaliser le design graphique.
À quoi sert un wireframe pour un site web ?
Il sert principalement à travailler la hiérarchie des contenus, la navigation et le parcours utilisateur. Il permet également de valider une structure avec le client et l’équipe avant de passer à une maquette plus détaillée.
Quelle est la différence entre wireframe et maquette ?
Le wireframe se concentre principalement sur la structure et le fonctionnement. La maquette UI représente beaucoup plus précisément l’apparence finale avec les couleurs, typographies, images et composants graphiques.
Quelle est la différence entre un wireframe et un prototype ?
Un wireframe peut être statique et représenter uniquement l’organisation d’un écran. Un prototype simule davantage le fonctionnement réel de l’interface en permettant de naviguer entre plusieurs écrans ou de reproduire certaines interactions.
Faut-il être designer pour créer un wireframe ?
Non. Un premier wireframe peut être réalisé simplement sur papier. L’essentiel est de réfléchir aux besoins des utilisateurs, aux contenus et au fonctionnement de l’interface plutôt qu’à la qualité graphique du dessin.
Quel logiciel utiliser pour créer un wireframe ?
De nombreux outils permettent de créer des wireframes. J’utilise principalement Figma car il permet de passer progressivement du wireframe aux maquettes et prototypes dans le même environnement de travail.
Un wireframe doit-il contenir les vrais textes ?
Pas nécessairement lors des toutes premières esquisses. En revanche, utiliser progressivement des contenus réalistes permet de vérifier que la structure fonctionne avec les volumes de texte, les titres et les informations qui seront réellement intégrés.
Un wireframe doit-il être validé par le client ?
Cela dépend du processus du projet. Sur des interfaces importantes, sa validation peut être très utile pour s’assurer que la structure, les contenus et les fonctionnalités sont compris avant d’engager le travail graphique détaillé.
Combien de temps faut-il pour créer un wireframe ?
Cela dépend énormément de la complexité. Une première esquisse d’une page simple peut être produite rapidement, tandis qu’un site ou une application comprenant de nombreux écrans, rôles utilisateurs et parcours demande un travail beaucoup plus approfondi.
Sources et ressources pour aller plus loin
Pour approfondir le sujet, plusieurs ressources de référence permettent de mieux comprendre les wireframes, les prototypes et leur place dans une démarche UX :
- Figma – Qu’est-ce que le wireframing ? : guide complet consacré à la définition des wireframes, aux différents niveaux de fidélité et aux bonnes pratiques de conception.
- Nielsen Norman Group – UX Deliverables Glossary : glossaire des principaux livrables UX, notamment les wireframes, wireflows, user flows et prototypes.
- Nielsen Norman Group – ressources sur le prototype testing : utilisation de prototypes basse fidélité pour identifier des problèmes d’utilisabilité avant le développement.
