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

Montrer Cacher le sommaire

• Wireframe et Zoning : qu’est-ce que c’est ? Quelles différences ? Pourquoi est-ce important ?
• Définition Zoning : une découpe « à la grosse » de votre site web
• Définition Wireframe : une mise au propre de vos croquis, sans tenir compte du design
• Quelle est la différence entre le Zoning, Wireframe, Mockup et Prototype?
• Pourquoi est-ce important ?
• Réussir le Zoning de son site
• Commencer par fixer une résolution cible pour créer votre zoning de site web
• Pour quelles pages du site devez-vous préparer un zoning?
• Quels types de blocs retrouve-t-on dans un zoning?
• Votre zoning vous sert aussi à améliorer le premier écran « au-dessus de la ligne de flottaison »
• Créer son Wireframe : les bonnes pratiques à connaître
• L’enjeu principal : une interface vraiment capable de satisfaire vos futurs visiteurs
• Ne vous formalisez pas trop sur la forme de votre wireframe
• Votre maquette est l’opportunité de réfléchir au vocabulaire à employer sur votre site
• Annotez sur votre wireframe les comportements des différents éléments de votre interface
• Quels outils pour créer un wireframe de son site web?
• Une variété de solutions s’offre à vous pour réaliser votre maquette
• Mon outil de mockups préféré: balsamiq
• Conclusion
• FAQ Wireframe
• Qu’est-ce qu’un Wireframe
• Quel est l’intérêt du Wireframe ?
• Quelle est la différence entre Wireframe et Zoning ?
• Quelle différence entre Wireframe et Mockup
• Quand parle-t-on de prototype ?
• Quels sont les outils pour créer ses Wireframe et Mockup ?

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

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).

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

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.

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.

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.

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.

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.

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.

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é.

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.

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.

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.

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