Qu’est-ce qu’un wireframe ?

Wireframes : définition et objectifs

Le wireframe est une étape indispensable dans la conception d’un site web ou d’une application. À quoi sert un wireframe ? Quels sont les objectifs de cette étape ?

Qu’est-ce qu’un wireframe ?

Le wireframe ou maquette filaire « fil de fer » est un schéma simplifié et détaillé d’une page ou d’un écran. C’est un livrable généralement produit par l’UX designer.

Il est souvent confondu avec le zoning. Ce sont deux étapes différentes mais complémentaires ! Le zoning est une étape préparatoire au wireframe. Il est un niveau de conception macro, il permet de dégrossir les grandes zones de contenu (blocs). Le wireframe est un niveau micro, il permet d’affiner les blocs du zoning en détaillant les éléments.

Différence entre wireframe et zoning

Traduire les fonctionnalités

Le wireframe a pour vocation de traduire concrètement les spécifications fonctionnelles. Ces spécifications sont la description des fonctions d’un site web ou d’une application. Elles font partie du cahier des charges. Selon les objectifs, un wireframe peut avoir différents niveaux de fidélité. Le niveau de fidélité traduit le degré ressemblance avec le produit final.

Niveaux de fidélité et objectifs du wireframe

Le wireframe basse fidélité

L’objectif est de valider le concept. Le wireframe basse fidélité permet de produire des idées rapidement. Il s’utilise plutôt en début de conception ou pour les user flow. Il peut se faire sur papier pour gagner du temps ou sur un logiciel comme Balsamiq. Sur le plan de la forme, un wireframe basse fidélité utilise des placeholders et du lorem ipsum (faux texte).

Manrim app by Andrey Rybin
Manrim app by Andrey Rybin (Behance)

Le wireframe haute fidélité

Une fois que les intentions sont posées, il est possible de passer à un niveau de fidélité supérieur. Le wireframe haute fidélité permet d’avoir un aperçu plus réaliste et détaillé de l’interface. Le contenu est réel et les proportions plus réalistes. Il peut être réalisé avec des logiciels comme Adobe XD ou Sketch.

Material dashboard wireframe kit Vadim Zaycev
Material Dashboard Wireframe Kit by Vadim Zaycev (Behance)

Se concentrer sur la structure et le contenu

Le wireframe est une étape importante dans la gestion de projet. Il permet de se focaliser sur l’architecture de l’information et les fonctionnalités d’une interface. C’est un support essentiel qui permet de faire collaborer tous les acteurs d’un projet (client, UX designer, UI designer, développeur etc.).

Wireframe et UX : travailler l’ergonomie

Dépourvu de couleurs, le wireframe permet de se concentrer sur la structure avant de passer à l’aspect graphique à l’étape suivante : les maquettes. Dans un wireframe, on se concentre la lisibilité du contenu en travaillant l’interlignage, la taille du corps de texte et les échelles des titres. On veille à adapter les interfaces en fonction des différents supports : desktop, tablette et mobile.

Le wireframe arrive tôt dans la conception d’une interface, il permet de résoudre de nombreux problèmes liés à l’ergonomie en travaillant par itérations successives (aller-retour).

Wireframe et SEO : intégrer la stratégie de contenu

Le wireframe doit prendre en compte les considérations SEO pour optimiser le référencement naturel. Il doit intégrer la hiérarchie des titres (h1, h2, h3 etc.) et mettre en avant les mots-clés. La ligne de flottaison est une zone stratégique pour placer les contenus SEO et marketing prioritaires (h1, call to action etc.).

En résumé

Le wireframe est un outil qui permet de formaliser et d’explorer des idées. C’est un livrable qui donne une forme visuelle à un cahier des charges textuel. Travailler en nuances de gris permet de se focaliser sur la lisibilité et la hiérarchie.

C’est un support collaboratif qui d’obtenir des retours pour valider les fonctionnalités et le contenu. Les wireframes peuvent avoir différents niveaux de fidélité en fonction de l’objectif choisi : produire des idées ou avoir un aperçu réaliste de l’interface.

Enfin, une fois que tous les aspects fonctionnels sont validés, le wireframe sert de base à l’UI designer pour concevoir une maquette graphique.

Comment avez-vous trouvé cet article ?

Note moyenne 5 / 5. Nombre de vote : 3

Soyez le premier à donner votre avis 🙂