Wireframe
Maquette fil de fer. Esquisse simplifiée montrant la structure d'une page web.
Un wireframe (maquette fil de fer) est une esquisse simplifiée d'une page web montrant la structure et l'agencement des éléments (texte, images, boutons) sans design graphique. C'est la première étape de la conception.
Comment le produire vite
Listez d’abord les questions du visiteur dans l’ordre où elles se posent, puis attribuez un bloc à chacune. Placez les blocs en niveaux de gris, sans couleur ni image finale, avec des titres réels et une estimation honnête de la longueur des textes. Une page se dessine ainsi en une à deux heures, mobile compris.
Pourquoi commencer sans design
Sans couleurs ni visuels, la discussion porte enfin sur le fond : ordre des arguments, place de la preuve, position du bouton. Les corrections coûtent quelques minutes à ce stade contre plusieurs jours après intégration. C’est aussi le meilleur moment pour arbitrer ce que l’on supprime, décision presque impossible à obtenir une fois la maquette habillée.
Wireframe vs mockup
Le wireframe répond à quoi montrer et dans quel ordre, le mockup à quoi cela ressemble. Confondre les deux fait dériver les réunions vers la teinte d’un bouton alors que la hiérarchie du message n’est pas tranchée. Gardez la version grise comme référence de structure : elle reste utile pour arbitrer les évolutions plusieurs mois après la mise en ligne.
Exemple concret
Un éditeur SaaS fait valider huit wireframes en trois jours avant tout design. Deux blocs jugés inutiles sont supprimés et un bloc de preuve est ajouté. La phase de maquettage passe de quatre à deux semaines et un cycle complet de refonte est économisé.
Termes associés
Mockup
Maquette visuelle. Représentation haute-fidélité du design final d'une page.
Prototype
Version interactive d'une maquette permettant de tester les parcours utilisateurs.
UI
User Interface. Éléments visuels et interactifs avec lesquels l'utilisateur interagit.
Above the Fold
Contenu visible sans scroller - zone la plus stratégique d'une page web.
Bounce Rate
Taux de rebond. Pourcentage de visiteurs quittant un site après une seule page.
Breadcrumb
Fil d'Ariane. Navigation secondaire montrant la position dans l'arborescence du site.
Wireframe en pratique : UX & Design
Pour aller au-delà de la définition, découvrez notre service d'optimisation UX.