Un wireframe est un schéma simplifié qui présente la structure sans design visuel. Pas de couleurs, pas de photos, pas de typographie travaillée. Juste des formes, des lignes et du texte provisoire. L'objectif est de déterminer l'emplacement des éléments avant de décider de leur apparence. Les wireframes permettent de répondre aux questions relatives à la hiérarchie, la navigation et le flux de contenu. Ils sont peu coûteux à créer et faciles à modifier.

Les designers dessinent les wireframes à la main, dans des outils comme Figma ou Sketch, ou avec des applications dédiées. Les wireframes basse fidélité utilisent des formes grossières et des étiquettes griffonnées. Les wireframes haute fidélité intègrent du contenu réel et un espacement plus précis, tout en restant sans couleur ni image. Les équipes utilisent les wireframes pour aligner les parties prenantes dès le début. Si un client rechigne à déplacer un bouton dans un wireframe, cela évite à tous d'avoir à reconstruire une interface finale par la suite.

Ce que montrent les wireframes

• Emplacement des principales sections de la page.
• Structure de navigation et éléments de menu.
• Hiérarchie et regroupement du contenu.
• Éléments interactifs tels que des boutons et des formulaires.

Les wireframes ne sont pas des plans. Ce sont des outils de discussion. L'objectif est de s'accorder sur la structure avant même de s'intéresser à l'aspect extérieur.