Zoning, blockframes & wireframes au service de votre projet web
- Zonings : ils correspondent à une première répartition des grandes zones fonctionnelles d’une page : en-tête, menu, contenu principal, pied de page, etc.
- Blockframe : niveau intermédiaire de fidélité. Il montre une hiérarchie plus claire que le zoning, avec des blocs visuellement structurés mais encore sans contenu textuel. Il sert à valider la répartition et la proportion des sections.
- Wireframes : niveau de fidélité plus avancé, qui précise l’agencement des contenus, les éléments interactifs et la logique de navigation. Il inclut souvent des textes fictifs, des icônes et boutons, mais reste dépourvu de direction artistique
Quels sont les enjeux de cette étape ?
Avant de penser au graphisme ou à la direction artistique de notre interface, il est essentiel de structurer nos écrans et hiérarchiser l’information, visuellement.
Pour cela, on va simuler la future interface avec un degré de fidélité suffisamment bas pour pouvoir à moindre effort corriger les premières itérations exploratoires en attendant que le projet se dessine progressivement.
Curieusement, ce sont souvent des phases assez dépouillées graphiquement car généralement modélisées à partir de simples formes filaires ou d’aplats en nuances de gris. On n’utilisera donc ni couleurs ni typographies définitives, intentionnellement.
Le but : nous concentrer sur des choix clairs, loin des distractions visuelles du graphisme et de la direction artistique.
Ces représentations “basse-fidélité” permettent ainsi de poser les bases : Comment se dispatche l’information ? Dans quel ordre ? Quel est le ratio entre les textes et les visuels ? Comment l’utilisateur va circuler d’un écran à l’autre ?
À qui s'adresse cette expertise ?
- Vous concevez un site ou une application et voulez partir sur de bonnes bases.
- Vous disposez de contenus ou de fonctionnalités, mais vous ne savez pas comment les organiser à l’écran.
- Une partie stratégique du parcours de vos utilisateurs réclame une attention particulière ergonomiquement
Les bénéfices
- Visualiser (explicitement) la hiérarchie de l’information,
- Tester l’agencement des blocs avant d’investir dans le graphisme,
- Détecter les incohérences ou les oublis dès le départ,
- Faciliter la collaboration entre concepteur, développeur et client.
La méthode Origarti
Hiérarchiser, c’est déjà concevoir. Et ça ne se fait pas au hasard.
Un zoning ou des wireframes efficaces sont souvent conçus après un travail en amont sur les parcours utilisateurs, les objectifs clés, et l’arborescence du site. Je m’appuie donc toujours sur ces éléments pour démarrer.
L’enjeu est ensuite d’identifier la ou les actions principales que l’on souhaite faire accomplir à l’utilisateur sur chaque page : prise de contact, achat, demande d’information, accès à un espace client…
Et de construire la structure autour de cet objectif ! Cela implique parfois d’envisager plusieurs chemins possibles pour atteindre le but recherché : l’un évident (bouton principal), l’autre plus secondaire (via navigation, recherche, etc.).
C’est ce double regard — stratégique et pratique — qui permet d’aboutir à des wireframes lisibles, efficaces et exploitables.
Durée de l'intervention
Entre une et plusieurs journées selon la complexité du projet.
La boîte à outils de l'UX Design !
Carnet de croquis
Pour des esquisses rapides. J'ai même un cahier dont les pages sont entièrement effaçables à l'eau pour cet exercice.
Logiciels de prototypage (Figma)
J'ai connu des designers qui scannaient des ébauches sur papier pour les rendre interactives sur Figma ensuite.
Comparaison A/B
De manière quantitative, comparer les réactions face à deux versions d’interfaces filaires distribuées aléatoirement.
Tests utilisateurs
avec scénarios "scryptés"
On va demander à notre panel où, selon eux faudra-t-il cliquer pour obtenir telle ou telle information ou accéder à une fonctionnalité précise.
Vos questions à propos du zoning, des blockframes ou des wireframes
Pourquoi le rendu est-il en noir et blanc ? Ce n’est pas encore le vrai graphisme ?
Non, et c’est volontaire. À ce stade, l’objectif est de se concentrer uniquement sur la structure, la hiérarchie de l’information, la logique de parcours.
En gardant une interface filaire en nuances de gris, on évite que l’attention ne se détourne vers la couleur, la typographie ou les images.
Cela permet aussi de cadrer la discussion avec vos parties prenantes : tant que la structure n’est pas validée, il est inutile (et contre-productif) de parler design graphique.
Chaque étape dans l’ordre, pour une interface efficace. Mais je concède qu’Il peut arriver que mes clients peinent un peu à s’y projeter au début.
Et si je veux faire valider cette étape à mes proches ?
Oui, vous recevez un lien interactif sur lequel les membres de votre équipe peuvent commenter précisément en épinglant des remarques à l’endroit concerné de l’interface filaire.
Mais je vous conseille de ne pas montrer le fruit de cette étape à “la Terre entière”, même si c’est parfois tentant !
Un wireframe n’est pas un produit fini : c’est encore une version largement schématique et donc, par essence, encore loin de l’expérience utilisateur visée à terme.
Si vous le montrez à vos proches ou à des personnes non concernées par votre cible, les retours risquent d’être biaisés car pas toujours correctement contextualisés (comme une blague mal racontée, elle n’en sera que moins drôle).
Préférez le montrer à des profils qui ressemblent à vos utilisateurs réels : leurs remarques seront bien plus utiles pour prendre les bonnes décisions.
Peut-on utiliser ces wireframes dans une étude utilisateur ?
Oui, mais avec des objectifs spécifiques. À ce stade, on ne teste pas l’esthétique ni la perception graphique – on peut en revanche observer comment un utilisateur chercherait une information, quelles hypothèses il formule, et s’il comprend la structure générale.
Ce sont souvent des tests scénarisés simples : “où cliqueriez-vous pour contacter le service client ?”, “où chercheriez-vous les tarifs ?”.
Pour tester des ressentis plus fins (lisibilité, attractivité, émotions, confiance), il faudra plutôt attendre la phase des maquettes prototypées.
À quel point le travail validé pour cette étape sera cruciale pour la phase graphique qui suivra ?
Il sera absolument déterminant. Chaque validation à l’étape des wireframes permet de verrouiller des choix hiérarchiques majeurs, et ainsi d’éviter toute remise en question de fond lors du maquettage graphique.
C’est une sécurité contre les déconstructions impulsives : oui parfois, vous doutez, et ça ne vous donne pas que de mauvaises idées en tant que clients… ou les revirements coûteux à l’étape suivante par manque d’anticipation par exemple.
Concrètement, je duplique le fichier de travail contenant les wireframes pour m’en servir comme base de départ pour le maquettage graphique.
Cela garantit une continuité rigoureuse : les emplacements, la hiérarchie, les gabarits sont conservés à l’identique. Le design graphique vient alors habiller une structure déjà mûrement réfléchie et validée, sans repartir de zéro.
Cela me permet aussi de me concentrer pleinement sur l’esthétique (enfin !), la cohérence visuelle et l’accessibilité, sans perdre de vue les objectifs fonctionnels initialement définis.
Cette approche évite de perdre du temps à rediscuter des fondamentaux et assure un passage fluide entre UX et UI. Après le fond, on peut maintenant passer à la forme de l’interface.
Je dis souvent à mes clients que les wireframes, c’est comme “le plan d’une maison”, et c’est de loin la meilleure métaphore que je puisse leur fournir car elle est efficace à plus d’un titre.
Après tout, c’est à cette étape qu’on décide de l’emplacement des pièces, des superficies, du sens de circulation, avant même de penser à la couleur des rideaux, au revêtement des sols ou aux motifs sur les murs.
Et comme dans la construction, certaines décisions doivent être prises très tôt, pour ne pas coûter (très) cher plus tard : est-ce qu’on a une cuisine ouverte ou séparée ? Est-ce qu’on met la salle de bain au fond ou proche de l’entrée ?
Parfois, mes clients sont un peu frustrés ou même déstabilisés de ne pas voir les couleurs, les polices, les images. Mais je les rassure : ce qu’on construit ici, ce sont les fondations de leur interface.
L’aménagement, cela sera juste après !
Ce que vous obtiendrez
à l'issue de cette mission
Les exemples de livrables ci-dessous représentent les livrables typiquement proposés, mais ils sont toujours adaptés à votre contexte, vos priorités et la nature exacte de la mission.
Wireframes interactifs
Prototypes filaires, monochromatiques et surtout cliquables réalisés dans Figma et venant simuler les parcours clés.
Zoning ou blockframes
Représentations schématisées et synthétiques des structures principales d’écran.
Premiers éléments d'UI Kit simple
Début de structuration des composants d'interface récurrents pour la phase design qui va suivre.