Wireframe, Zoning… ou comment créer la maquette de son site web

Marketing Digital

UX Design

14

Wireframe zoning 550

Savez-vous combien investir sur Google Ads et combien cela va vous rapporter ?

En complément de cet article, vous pouvez obtenir un accès gratuit à mon calculateur Google Ads pour anticiper votre budget et votre ROI.

Il vous suffit simplement de vous abonner à ma newsletter.

Gratuit | Accès instantané | Tutoriels vidéo inclus

Montrer Cacher le sommaire

Quand on crée un site internet, on commence par s’intéresser à son audience. Cela nous permet de créer des personas, puis de définir ensuite les bons contenus qui vont satisfaire nos visiteurs et nos objectifs business.

Mais à cette étape, notre site internet n’existe toujours pas : il reste encore une simple idée dans nos esprits.

C’est précisément à ce stade que les professionnels font des zonings & autres wireframes. Ils créent une maquette de l’interface du (futur) site ce qui leur permet de spécifier leurs attentes aux designers et développeurs qui réaliseront à proprement parler le site web.

Dans cet article, je vous guide pas à pas pour créer des zonings et des maquettes de sites professionnels, vraiment utiles à la création d’un site web de grande qualité

Wireframe et Zoning : qu’est-ce que c’est ? Quelles différences ? Pourquoi est-ce important ?

Cette première étape du processus de prototypage est une étape indispensable pour concevoir un site web performant. Le fait de passer par ce processus de prototype de site web permet une meilleure communication, une plus grande souplesse et une vraie adaptabilité entre le client et l’entreprise en charge de la réalisation de votre site, si vous faites appel à un professionnel.

Définition Zoning : une découpe « à la grosse » de votre site web

Dans un premier temps, il va falloir décider de l’organisation générale de vos pages web. La prochaine étape consiste donc à établir des zonings qui, comme leur nom l’indique, découperont les pages en autant de zones que nécessaire.

Le zoning est la pratique qui consiste à « découper » et représenter les différentes zones et les types de contenus qui leur sont affectés pour un type de page du site.

Source: definitions-marketing.com
Exemple de zoning de site web
Exemple de zoning de site web

C’est un travail important, puisqu’il va permettre d’installer des principes essentiels à votre site web, sans considération du look and feel à proprement parler.

Définition Wireframe : une mise au propre de vos croquis, sans tenir compte du design

Après avoir établi un zoning des pages de son site web, la suite logique est de spécifier ce que chaque bloc devra contenir précisément. Il s’agit de préciser :

  • ce que contient la page,
  • à quel endroit sont placés vos éléments,
  • leur taille approximative,
  • leur nom,
  • leur comportement,
  • les couleurs ou au moins les rapports de contraste,
  • etc.

Le wireframe, traduit en français par maquette fonctionnelle, désigne un schéma utilisé pour réaliser la maquette d’un site web.

Source : Journal du Net

Votre maquette de site web (ou wireframe) a pour vocation à décrire l’aspect fonctionnel du site. Il ne doit pas donner d’indications quant à l’allure graphique du site (sauf si vous êtes dans un projet de refonte et que certains blocs prévoient d’être gardés tels quels).

Le wireframe est "la mise au propre" de votre zoning
Le wireframe est « la mise au propre » de votre zoning

Quelle est la différence entre le Zoning, Wireframe, Mockup et Prototype?

difference zoning wireframe

Un zoning est une schématisation grossière de ce que sera votre futur site web. Il permet de se faire une première idée, et d’identifier déjà les principales incohérences et les grands axes de conception. C’est un outil pratique, qui peut s’utiliser « en live » lors d’ateliers.

Quand on parle de wireframe, on fait déjà référence à une version « mise au propre » de ses zoning. On va même un cran plus loin, puisqu’on va représenter visuellement les blocs qui n’étaient que de vulgaires rectangles sur notre zoning, sans pour autant se soucier des aspects design.

Certains parleront aussi de mockups. Dans ce cas, on fait ici normalement référence à des maquettes de site navigables, sur des serveurs de test. Concrètement, toutes les fonctionnalités prévues ne marchent pas, le design n’est pas toujours terminé, mais vous pouvez vous « promener » sur votre site. Cela est très pratique pour que les premiers utilisateurs tests bénéficient d’une expérience quasi finale « ergonomiquement » parlant.

Enfin, vous entendrez peut-être parler de prototypage. C’est le stade ultime de la maquette de site web. Votre site n’est pas encore publié, mais il est fonctionnel à 90%, ce qui vous permet de régler les derniers détails d’UX design avant le grand lancement.

Pour aller plus loin sur les différences entre tous ces termes, je vous invite à consulter la vidéo de Laurent Gallen sur le sujet.

Pourquoi est-ce important ?

Lorsque vous vous attaquez à la création d’une maquette de site web, c’est que vous avez certainement déjà réfléchi à la structure générale de votre navigation et de vos contenus, mais vous n’avez pas encore formalisé l’organisation visuelle des éléments à proprement parler.

C’est pour pallier ce manque que vous devez travailler sur deux livrables clés de tous projets de site web : les zonings et les maquettes ergonomiques (wireframes).

Bien que l’exercice puisse sembler futile aux premiers abords, le fait de spécifier précisément l’apparence et le comportement de l’interface du site vous permet d‘alléger énormément la charge de travail des designers et des développeurs.

  • Cela vous économisera de nombreux allers-retours,
  • et vous passerez alors beaucoup moins de temps à « corriger » leur travail.

Sans compter que parfois, il est impossible de corriger ce qui ne vous plaît pas, car une fois l’interface réalisée, il peut être très compliqué de changer techniquement certains aspects ergonomiques.

C’est pourquoi vous devez faire les choses dans l’ordre et passer impérativement par la case « wireframe » et « zoning ». Ce sont ces types de tâches d’UX design qui apportent beaucoup de valeur, et qui vous seront très profitables plus tard.

Retour sur investissement ux design
Selon une étude publiée par Forbes en 2015, le retour sur investissement de l’UX design est de 100 : 1

Réussir le Zoning de son site

Commencer par fixer une résolution cible pour créer votre zoning de site web

Un site web est contraint par une certaine taille d’écran. C’est pourquoi vous devez commencer par fixer une résolution cible, qui vous donnera des limites pour les dimensions des pages de votre site.

Pour bien la choisir, regardez les appareils / résolutions utilisés par vos personas. Dans le cadre d’une refonte de site, vos statistiques Google Analytics peuvent aussi vous livrer de précieuses informations.

Resolutions navigateur Google Analytics
Si votre site existe déjà, vous pouvez facilement savoir grâce à Google Analytics quels sont les résolutions et navigateurs les plus utilisés par vos visiteurs

Au-delà de la résolution, le bon UX designer prendra aussi en compte le fait que tous les navigateurs ne se ressemblent pas, et que certains vont « empiéter » sur l’espace utilisé par votre site. C’est pourquoi, c’est une bonne pratique de recouper l’information des résolutions d’écrans avec celle sur les navigateurs utilisés, pour connaître l’espace disponible précis que vous pouvez utiliser pour votre zoning.

zoning browser
Tous les navigateurs ne se ressemblent pas, et certains vont « empiéter » sur l’espace utilisé comme le montre cet exemple de zoning de site web.

Pour quelles pages du site devez-vous préparer un zoning?

Il n’est pas nécessaire d’établir un zoning pour toutes les pages de votre site. On se concentra avant tout sur les pages les plus importantes du site.

Plus que le nombre de pages pour lesquelles vous établirez un zoning, ce qui compte vraiment est de spécifier l’agencement ergonomique pour chaque typologie de page (page d’accueil, page catégorie, fiche produit, interface panier, etc.)

En effet, il est bien plus crucial de s’assurer d’avoir passé en revue tous les types de pages plutôt que d’avoir fait un zoning pour chaque fiche produit de son catalogue, qui partagent tous le même modèle…

Quels types de blocs retrouve-t-on dans un zoning?

Vos zonings vont évidemment varier en fonction des pages sur lesquelles vous travaillez : votre zoning sera différent pour une page d’accueil, une fiche produit ou un formulaire de contact.

On retrouve en général des zones comme :

  • l’identité de votre site,
  • les menus de navigation,
  • les mises en avant de produits / contenus
  • le pied de page,
  • les espaces publicitaires le cas échéant

On commence habituellement par définir les zones qui apparaîtront de manière identique sur toutes les pages du site. Ce zoning est ensuite contextualisé selon la page spécifiée.

Il vous faudra parfois aller un peu plus dans le détail pour éviter de réaliser un zoning inapplicable (ex: vous avez 10 sections dans votre navigation? Vous devez voir si cela « rentre » en largeur avec la dimension en pixels que vous avez fixée au début).

Bien que le zoning doive rester un document assez « grossier », une astuce de pro est aussi d’indiquer sur votre document une hiérarchie visuelle entre les blocs pour mieux guider le travail du designer.

Exempled e zoning
Sur cet exemple de zoning, l’UX designer a utilisé un code couleur différent pour indiquer la hiérarchie visuelle entre les blocs (c’est-à-dire les zones les plus importantes)

Votre zoning vous sert aussi à améliorer le premier écran « au-dessus de la ligne de flottaison »

Parce que les utilisateurs scrollent (notamment depuis que la majorité des connexions se font sur des appareils mobiles), un site web n’a pas de limite verticale absolue. Certains sites d’ailleurs ne sont qu’une seule page « infinie ».

Toutefois, il reste vrai que l’information du premier écran (au-dessus de la ligne de flottaison) reste toujours une zone clé, beaucoup plus vue par vos visiteurs que les parties inférieures de vos pages web.

above the fold
Comme on peut le voir avec le cas de Slate.com, la zone au dessus de la ligne de flottaison (above the fold) concentre la majeure partie de l’attention et des engagements des visiteurs

C’est pourquoi, on considère que la zone above the fold doit contenir à minima:

  • l’identité de votre site
  • la navigation principale,
  • les fonctionnalités clés (ex: recherche, compte client, etc)
  • et les informations capitales.

Créer son Wireframe : les bonnes pratiques à connaître

L’enjeu principal : une interface vraiment capable de satisfaire vos futurs visiteurs

Gardez à l’esprit que tout ce travail de réflexion et de prototypage doit vous permettre, in fine, de mieux satisfaire vos futurs utilisateurs, et par la même occasion de rendre le processus de création de site plus efficace.

Créer une maquette wireframe, c’est d’abord décider de l’interface qui représentera le meilleur compromis entre les besoins / attentes de vos visiteurs et vos objectifs business.

processus design ux
La conception du site s’ancre d’abord dans ses utilisateurs. En découlent les spécifications fonctionnelles du site (avec son contenu), puis viennent les zonings et les maquettes ergonomiques qui scénarisent les parcours utilisateurs.

Avoir une maquette, c’est aussi disposer d’un outil de communication pour faire « valider » par des tests que le site que vous vous apprêtez à livrer satisfait bien vos utilisateurs, avant même que vous pensiez au design à proprement parler. Détectées plus tôt dans le processus de création de site, les erreurs UX ainsi mises en avant par ces tests s’avéreront plus faciles et moins coûteuses à corriger (vs faire les corrections une fois que tout le travail est fini et le site en ligne).

Enfin, un wireframe de votre site permet de faire le « passage de témoin » entre les étapes de conception, de graphisme et de développement. C’est un « moule » que les autres acteurs du projet, designers et développeurs, respecteront dans leurs travaux respectifs.

Ne vous formalisez pas trop sur la forme de votre wireframe

Quand on parle de maquette de site web et de wireframes, certains pensent qu’il s’agit d’une illustration « léchée » de l’interface de son futur site. Il n’en est rien.

À vrai dire, un simple wireframe fait à la main, sur un carnet, peut parfois suffire. À l’étape de réflexion, il est d’ailleurs conseillé d’utiliser un crayon et du papier, pour éviter de passer trop de temps à « réaliser » sa maquette plutôt que d’y « réfléchir ».

En réalité, il vous appartient de définir quel niveau de détails vous souhaitez mettre dans votre maquette.

  • En UX design, on qualifie une maquette très détaillée comme étant de haute-fidélité
  • et un simple croquis basique et peu travaillé comme étant de basse-fidélité.
wireframe basse-fidélité et wireframe haute fidélité
Sur la base du zoning établi à gauche, l’UX designer a réalisé une maquette basse-fidélité (au milieu) et une autre haute-fidélité (sur la droite).

Votre maquette est l’opportunité de réfléchir au vocabulaire à employer sur votre site

Nous ne parlons pas ici des textes / contenus exacts que vous comptez mettre en ligne sur votre site. Il s’agit plutôt des intitulés des éléments et de véhiculer de grands principes de mise en forme.

À l’étape de la maquette, vous devrez surtout réfléchir au vocabulaire à employer pour les éléments clés de votre page:

  • les titres,
  • les libellés des boutons d’actions,
  • la manière dont devront apparaître les légendes d’image,
  • etc.

Ces éléments de langage doivent évidemment correspondre aux besoins de vos personas, que vous avez (normalement) étudiées au début de votre projet. Cela sera pour vous l’occasion de constater que « tout rentre » de manière harmonieuse.

L’UX designer utilisera aussi du « faux texte », écrit en latin (Lorem Ipsum), pour donner un rendu réaliste de la maquette, et donc obtenir une représentation plus fidèle de ce que pourrait donner la version finale de votre page web.

générateur lorem ipsum
Il existe sur internet des générateurs de faux texte, comme lipsum.com

Si vous le souhaitez, vous pouvez compléter vos wireframes avec des règles d’écriture (ex: utiliser l’infinitif pour les boutons d’actions, ne pas dépasser 100 mots pour les légendes d’images, etc.).

Annotez sur votre wireframe les comportements des différents éléments de votre interface

Votre maquette doit évidemment représenter l’apparence des différents éléments que vous ajoutez sur l’interface de votre site. Mais elle doit aussi expliquer aux designers et aux développeurs comment l’interface doit se comporter quand elle est utilisée.

C’est pourquoi vous devrez fournir des notes complémentaires à votre maquette, voir des représentations visuelles, pour expliquer ce qui se passe concrètement quand l’utilisateur réalise telle ou telle action sur votre site.

exemple mock ups balsamiq qui detaille comportement menu hamburger
Exemple du mockup de ce blog réalisé sous Balsamiq, qui détaille le comportement du menu de navigation hamburger sur mobile

Idéalement, votre maquette doit détailler tous les types d’états possibles en fonction des actions des utilisateurs. Lorsque l’on détaille le comportement attendu des fonctionnalités de son interface, on détaille souvent trois types d’états:

  • l’état nominal (l’utilisateur n’a pas encore utilisé la fonctionnalité)
  • l’état survolé (l’utilisateur survole la fonctionnalité, mais ne l’a pas encore utilisé)
  • l’état cliqué / activé (l’utilisateur utilise ou a utilisé la fonctionnalité)

Quels outils pour créer un wireframe de son site web?

Une variété de solutions s’offre à vous pour réaliser votre maquette

Comme nous l’avons plus haut, les outils pour créer la maquette de son site web peut être aussi low tech qu’une simple feuille de papier. Cela peut largement suffire.

wireframe papier
Beaucoup d’UX designers continuent de réaliser leur wireframe sur papier : plus agile, plus rapide, avec moins de contraintes techniques, votre crayon et votre carnet restent encore les outils les plus fiables pour créer la maquette de votre site web

Vous pouvez aussi tout simplement utiliser PowerPoint. C’est une solution avec laquelle les professionnels sont souvent familiers et qui a le mérite d’offrir toutes les fonctionnalités dont vous avez besoin pour faire des zonings et des maquettes simples. Cela reste quand même un outil rigide, inadapté au format web et qui ne raisonne pas sous forme de « pixels ».

Pour des maquettes haute-fidélité, vous avez également l’option d’utiliser des logiciels plus puissants comme InDesign, Illustrator ou Photoshop. Le rendu sera certainement plus joli, mais il peut être difficile parfois de travailler en équipe avec de tels logiciels (pas de version collaborative) et vous pouvez plus facilement tomber dans l’écueil de passer plus de temps à « réaliser » la maquette plutôt qu’à y réfléchir.

Notez bien que ce n’est pas l’outil qui fait la qualité des wireframes, mais bien l’expertise et la rigueur de son concepteur !

C’est pourquoi vous devez éviter à tout pris le piège de concevoir une maquette de site en fonction de votre outil (on reconnaît vite les sites dont la maquette a été réalisée sous PowerPoint !).

Mon outil de mockups préféré: balsamiq

Personnellement, j’utilise depuis des années un outil nommé Balsamiq pour créer tous mes wireframes. C’est un outil qui propose une version collaborative en ligne, ou une version logicielle que vous pouvez télécharger et installer sur votre ordinateur.

La solution est dédiée à la création de zoning et de wireframes professionnelles et est très intuitive d’utilisation (simple drag & drop). L’absence de fonctionnalités de design avancées (vs Photoshop par exemple) permet de rester concentrer sur l’aspect ergonomique de sa page web, et d’éviter le piège de vouloir à tout prix peaufiner sa maquette et tomber dans la partie design.

Si vous êtes intéressés pour « voir » concrètement à quoi ressemble l’outil Balsamiq et comprendre comment il vous aide à réaliser des mockups de première qualité, je vous invite à jeter un coup d’œil à la vidéo suivante :

Conclusion

Créer une maquette de ses pages web reste une étape clé du processus de création de site internet.

  • Plus vous spécifierez d’éléments sur vos zonings et vos wireframes,
  • moins vous aurez de travail de retouche et d’allers-retours par la suite.
  • Cela vous fera économiser du temps, des efforts, et de l’argent.

Parce que l’on ne peut jamais tout spécifier, et qu’on peut parfois interpréter certaines maquettes de différentes façons, il est conseillé d’effectuer des sessions de validation avec l’équipe qui réalise le site après l’étape de design et après celle d’intégration technique.

FAQ Wireframe

Le Wireframe ou « maquette fil de fer » sert à schématiser l’architecture des pages web d’un futur site internet. Que va contenir la page, quelle sera sa taille, son nom, ses couleurs et où la placera-t-on ? Ainsi c’est une maquette fonctionnelle qui désigne un schéma utilisé pour réaliser la maquette d’un site web.

Le Wireframe permet de mener un travail de réflexion sur tous les blocs de contenus du site et qui permettra de lui donner toute sa cohérence et sa pertinence. Cette maquette donnera ainsi l’aspect fonctionnel du site et son ergonomie.

Le zoning permet dans un premier temps de découper les pages du sites en autant de zones que nécessaire. C’est une schématisation grossière du futur site. Ensuite le Wireframe permettra de réfléchir à l’aspect fonctionnel qu’on donnera à chacune des différentes zones.

Le Wireframe permet d’imaginer ce qu’on mettra dans les blocs auparavant définis tandis que le Mockup est la maquette de test visuelle du site bien que son design et ses fonctionnalités ne soient pas toutes terminées.

C’est le dernier stade de la maquette du site web qui fonctionne alors à 90%. Le prototype permet de régler les derniers détails , notamment l’expérience design de l’utilisateur avant son lancement.

On peut commencer par une simple feuille de papier pour créer son Wireframe. Les professionnels utilisent souvent Power Point. Si on a l’expérience, un joli Wireframe peut être fait avec  InDesign, Illustrator ou Photoshop. L’outil Balsamiq permet outre la création de zoning et de wireframes professionnelles, de réaliser des mockups de première qualité.

3 réactions sur « Wireframe, Zoning… ou comment créer la maquette de son site web »

  1. Oh oh cool ! Je découvre seulement aujourd’hui cet article bien écrit.
    Merci pour le partage de ma vidéo, c’est vraiment sympa et ça colle parfaitement avec le sujet de l’article ?

  2. Ping : Créer son premier site internet : 10 questions à se poser
  3. Ping : 8 fonctionnalités modernes pour réussir la conception de son site web en 2020

Réagissez à cet article