Un wireframe est la structure de base d'un design. Des cases pour les images, des lignes pour le texte, des étiquettes pour les boutons. Pas de couleurs, pas de polices, pas d'éléments visuels léchés. Juste la structure, réduite à l'essentiel.

Les wireframes interviennent tôt dans le processus de conception, après les croquis mais avant les maquettes haute fidélité. Leur rôle est de répondre aux questions de mise en page : où placer la navigation, combien de colonnes, quelle est la hiérarchie ? Leur aspect rudimentaire est volontaire. Si un wireframe paraît trop abouti, les parties prenantes risquent de se focaliser sur la nuance de bleu plutôt que sur la pertinence de la mise en page.

Ce qu'un wireframe montre

• Placement des éléments principaux : en-tête, navigation, contenu, pied de page
• Taille relative et priorité des composants
• Navigation entre les écrans ou les pages
• Éléments interactifs tels que des boutons et des formulaires

Des outils comme Balsamiq et Figma ont considérablement accéléré la création de wireframes. Certains designers utilisent encore du papier et des marqueurs. L'important, c'est la réflexion, pas le support. Un wireframe est un point de départ pour la discussion. Il présente la structure, qu'en pensez-vous ? À ce stade, les modifications sont peu coûteuses. Une fois la conception visuelle finalisée, déplacer une barre latérale implique de tout refaire. Il est donc préférable de la déplacer directement dans le wireframe.