Définition technique
Maquette basse fidélité qui représente la structure d'une page : blocs, zones de contenu, navigation, hiérarchie, sans couleurs ni visuels finaux. Souvent en niveaux de gris, traits et placeholders. Le wireframe sert à valider l'architecture et le parcours avant le design visuel et le développement. Étape indispensable pour aligner le client et l'équipe sur la structure et éviter les refontes coûteuses.
Comment ça fonctionne ?
On schématise la page avec des rectangles (zones), des lignes (texte), des cercles (images) et des libellés. Outils : Figma, Sketch, Balsamiq, ou même papier. On itère sur la disposition et la hiérarchie jusqu'à validation. Ensuite seulement on passe au design (couleurs, typo, visuels) puis au code.
L'erreur classique à éviter
Sauter l'étape wireframe et partir directement en design : les changements de structure en cours de route coûtent cher. Faire des wireframes trop détaillés (ça devient du design) ou trop vagues (pas de décision).
Impact business : pourquoi s'en soucier ?
Valider la structure et le parcours en wireframe réduit les allers-retours et les « on aurait dû mettre ça ici » après le design ou le code. Le client comprend la logique de la page sans se focaliser sur les couleurs. Pour un e-commerce ou une landing, le wireframe permet de tester la conversion (placement CTA, tunnel) à moindre coût.
La règle d'or
Toujours valider la structure (wireframe) avant le design détaillé. Impliquer le client et le métier sur le parcours et les priorités. Garder les wireframes simples (gris, placeholders) pour ne pas débattre du style trop tôt.