Zoning VS Wireframe

dernière modification : novembre 2016

Création de Wireframe et de zoning

L’indispensable Wireframe

Le Wireframe ou « maquette fil de fer » consiste à schématiser sa page Web de façon plus ou moins complète. Cette schématisation peut se faire sur papier ou à l’aide d’un logiciel spécialisé est permet de mettre en place l’architecture de ses pages Web. C’est l’étape indispensable avant de faire appel à un graphiste du Web.

La création d’un Wireframe est avant tout un travail de réflexion : « Comment placer mes blocs de contenus, sont-ils pertinent et en quantité suffisante. Communiquent-ils le bon message, la navigation est-elle intuitive ? … ». On aura compris que la création d’un Wireframe vous fera gagner un temps fou, car il mettra en évidence toutes les problématiques liées à l’ergonomie et aux messages que l’on veut véhiculer.

 

 

Exemple de Zoning

Exemple de wireframe pour un dashboard (C’est moi qu’est fait ça !)

 

Les outils pour la création d’un Wireframe

Les meilleurs outils, nous dit-on, sont le crayon et le papier.

Personnellement j’utilise un logiciel, mais on peut aussi utiliser un whiteboard, des post-it collés sur un mur ou sur une feuille de papier,  et à la limite, cette étape de création est tellement importante, que vous pourriez utiliser une plaque de marbre et un burin que personne ne vous en voudra.

Voici pourquoi j’utilise un logiciel  :

  • disposer d’une bibliothèque de composants Web réutilisables
  • déplacer facilement les blocs de contenu
  • permettre un travail collaboratif en ligne
  • exporter son Wireframe pour ces collaborateurs et/ou clients

Note : PowerPoint est très bien pour la création de Storyboard, il me semble peu adapté pour créer des wireframes.

Les meilleures ressources sont évidemment en anglais :

Blog d’informations dédié aux Wireframe : wireframes.linowski.ca. On trouvera aussi beaucoup d’informations sur Smashing Magazine (taper « Wireframe » dans son moteur de recherche et pour ceux qui ont des difficultés avec l’anglais, pensez à utiliser le navigateur Chrome, celui-ci possède une option pour traduire les pages automatiquement…)

Les logiciels :

Les prix des services en lignes varient entre 15$ et 100$/mois, les logiciels entre 495$ et 79$, difficile donc de faire une recommandation, mais voici la liste des logiciels et services les plus souvent cités :

Axure est mon logiciel préféré pour ce type de travail car il permet d’aller très loin. On peut carrément simuler de véritables sites Web avec des liens, des variables, des effets et tout ce qu’il faut pour créer des prototypes.

Alternative avec Illustrator : Si vous maîtrisez Illustrator, cela peut être une très bonne alternative, voici quelques kits de démarrage que vous pourrez compléter par vous même.

Et Bootstrap ?!?

Effectivement, pourquoi ne pas utiliser Bootstrap pour créer des wireframes? Franchement, ce n’est pas si débile que ça. Dans le cadre de la création d’une application Web, cela me semble être une bonne idée car le gain de temps sera considérable. Bien sûr, on suppose pour cela que la couche graphique soit simple  à mettre en place, sinon ce n’est pas cool du tout.

 

Exemple d’un Wireframe
et de sa transformation grâce au graphiste Web
(pour cet exemple, c’est moi le graphiste) :

Wireframe avant design graphique
Design graphique créé à partir d'un Wireframe

Quelle est la différence entre
Wireframe et Zoning ?

On fait parfois la distinction entre Zoning et Wireframe. Dans l’idée, un Zoning est une étape préparatoire au Wireframe, comme une sorte de brouillon avant d’écrire un brouillon. (Glups !)

Ce n’est pas gênant si l’on sait que le terme Zoning est une traduction française de Wireframe. Le terme de zoning est apparu avant que « wireframe » ne soit populaire. En anglais, le terme de zoning est plutôt utilisé pour les plans urbains, donc si vous allez en stage aux USA, il faut préciser que vous parler bien de Web et de non de cadastre.

Dans les livres d’UX design, je trouve le plus souvent les termes de Wireframe en basse fidélité ou en haute fidélité pour décrire le niveau de détail d’un Wireframe, cela me semble assez pertinent.

Exemple de zoning

Exemple d’un Zoning – Par rapport  à un Wireframe, ce n’est pas très compliqué à faire…

Et le Storyboard ?

On confondra facilement un Storyboard est un Wireframe, alors qu’il ne s’agit pas de la même chose. Le Storyboard est une scénarisation d’un site Web et non sa schématisation, cette scénarisation est un aspect assez méconnu dans la gestion de projet Web.

« Mettre en scène l’information, c’est structurer logiquement les actions accomplies par les divers acteurs présents dans l’énoncé. Ceci, afin que le récepteur ait l’impression d’une véritable scène de vie. Inclure l’Internaute dans le scénario le fait interagir, c’est l’impliquer dans le récit, mentalement et physiquement. »

Extait du livre Penser le Webdesign de N.Pignier et B.Drouillard aux éditions l’Harmattan.

L’étude de l’ergonomie, de l’expérience utilisateur, de l’architecture d’information… sont regroupés dans une nouvelle discipline très à la mode qui est l’UX design. Cette discipline qui est absolument passionnante propose des méthodes très efficaces pour scénariser les actions de l’utilisateur. Je vous encourage à faire des recherches sur cette discipline et des nouveaux métiers qui en découlent.

Un dernier mot avec le mot mockup ?

Dès qu’une personne me parle de mockup je dis tout de suite « stop, on arrête tout avant de devenir dingue ! »

Pour certaine personne un mockup est l’équivalent du wireframe (ce qui semble être la véritable origine de ce mot) et pour d’autre un mockup est une maquette graphique finalisée d’un site Web et pour d’autres personne c’est encore autre chose, sans parler de ceux qui ne savent pas.

Alors, vous comprenez que donner la définition d’un truc que personne ne sait vraiment ce que c’est n’est pas chose aisée. Il vaut mieux oublier l’existence d’un tel mot qui ne me semble pas être indispensable.

 

 

Graphiste freelance