Wireframe

Un wireframe (ou maquette fonctionnelle) est une représentation schématique d'une interface en niveaux de gris, sans couleur ni style graphique. Il représente la structure, la hiérarchie des contenus et la logique de navigation, sans s'attarder sur l'apparence visuelle. C'est un outil de conception et de communication intermédiaire entre l'architecture de l'information et les maquettes graphiques finales.

Ils permettent de valider la structure d'une interface et la logique de navigation avant d'investir dans le design graphique. En les présentant à des utilisateurs ou à des parties prenantes, on obtient des retours sur l'organisation des contenus et la hiérarchie sans que l'aspect visuel ne biaise les jugements. Ils servent aussi de base de discussion entre designers, développeurs et product managers pour s'aligner sur ce que doit contenir chaque écran.

Un wireframe basse fidélité est très schématique : des rectangles pour les images, des lignes ondulées pour le texte, des blocs pour les boutons. Il se crée rapidement (sur papier ou en 15 minutes sur Figma) et est idéal pour l'exploration. Un wireframe haute fidélité est plus précis : les libellés sont réels, les composants ressemblent aux composants finaux, les espacements sont soignés. Il est plus long à produire mais facilite la communication avec des parties prenantes moins habituées à lire des schémas.

Généralement l'UX designer ou le product designer, parfois en collaboration avec le product manager. Dans des équipes moins spécialisées, le chef de projet ou un développeur peut aussi en produire pour cadrer les discussions. Ce qui compte n'est pas qui les produit, mais qu'ils soient validés avec les parties prenantes avant de passer aux maquettes graphiques. Un wireframe non revu est une source de malentendus en fin de projet.

Oui, dans certains cas. Quand un design system mature fournit des composants prêts à l'emploi, on peut passer directement de l'architecture de l'information aux composants codés ou aux maquettes graphiques. Quand les cycles sont très courts (une feature simple, une correction d'interface), un sketch rapide peut suffire. Les wireframes sont particulièrement utiles pour des pages ou des flux complexes où plusieurs personnes doivent s'aligner avant de produire.