Wireframe
Définition
Schéma basse fidélité d'un écran qui structure le contenu et les zones d'interaction, sans entrer dans le visuel final. Étape de cadrage avant les maquettes UI.
Qu'est-ce qu'un wireframe
Un wireframe est un schéma basse fidélité d'un écran. On y dessine la structure (zones, blocs, hiérarchie) sans entrer dans le détail visuel : pas de couleur, peu de typographie, pas de contenu final, parfois juste du lorem ipsum et des rectangles gris à la place des images. L'objectif n'est pas de produire un joli rendu, mais de discuter de la mise en page, de la hiérarchie de l'information et du parcours utilisateur. C'est l'équivalent du croquis chez l'architecte avant les plans détaillés.
À quoi ça sert
Le wireframe valide ce qui doit figurer sur la page, où, et avec quelle priorité. Le bouton principal est-il visible sans scroll ? La hiérarchie des informations est-elle claire ? Combien d'écrans pour finir le parcours ? Ces questions sont mieux discutées sur un wireframe que sur une maquette finie, parce qu'un wireframe est neutre visuellement et que les retours portent sur la structure plutôt que sur les couleurs ou les fontes. Modifier un wireframe coûte une heure ; modifier une maquette haute fidélité en coûte dix.
Le bon niveau de fidélité
Un wireframe peut aller du croquis papier rapide au schéma plus détaillé fait dans Figma ou Balsamiq. Le niveau de fidélité dépend de la décision à prendre. Pour valider une logique de parcours avec une équipe interne, le croquis papier suffit. Pour présenter à un client peu habitué à abstraire, on monte en fidélité jusqu'à un schéma propre dans Figma. L'erreur classique : monter en fidélité par habitude, ce qui transforme le wireframe en maquette et ramène les retours vers le visuel plutôt que la structure.
Quand l'utiliser
Le wireframe est pertinent sur des écrans complexes ou inhabituels : un parcours d'onboarding, un dashboard riche, un configurateur multi-étapes, une interface métier inédite. Pour ces cas, sauter le wireframe et attaquer directement le design pousse à confondre choix structurels et choix esthétiques. Pour des écrans standards (page d'accueil marketing, formulaire de contact, fiche produit e-commerce classique), on saute parfois le wireframe et on part directement sur des maquettes UI. Les patterns sont connus, le wireframe n'apporte pas de nouvelle information.
Wireframe versus maquette versus prototype
Le wireframe précède la maquette UI haute fidélité, qui précède le prototype interactif. Wireframe : structure et hiérarchie, basse fidélité. Maquette : design final, couleurs, typographies, contenu réel, mais statique. Prototype : enchaînement cliquable des maquettes, avec transitions et états. On enchaîne ces trois étapes sur les projets complexes. Pour des écrans simples ou des refontes incrémentales, on combine ou on saute des étapes selon le besoin réel.
Les outils
Figma reste le standard, avec sa rapidité d'auto-layout pour itérer en quelques secondes. Balsamiq Wireframes conserve un style "crayonné" volontairement basse fidélité, qui aide à garder la discussion sur la structure. Whimsical mélange wireframes et flowcharts pour les parcours. Pour le croquis papier ou tablette graphique, n'importe quel outil fait l'affaire : l'important est d'aller vite et d'itérer. Le but n'est pas l'outil, c'est la conversation qu'il permet entre design, produit et développement.