Définition Wireframe et Zoning

Définition de Zoning ou Wireframe

Le Wireframe ou "maquette fil de fer" ou encore Zoning en français, 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 (ou Zoning) 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.

Les outils pour la création d’un Wireframe

Les meilleurs outils, nous dit-on, sont le crayon et le papier, mais on peut aussi utiliser des logiciels pour ces raisons :

  • 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 maquettes en fil de fer.

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 :

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

Quelle est la différence entre
Wireframe et Zoning ?

On fait parfois la distinction entre Zoning et Wireframe, le second serait plus complet que l’autre. Ce n’est pas gênant si l’on sait que le terme Zoning est un terme franco-français pour traduire le terme anglo-saxon Wireframe, c’est-à-dire que le terme Zoning sera introuvable dans les ressources anglo-saxonnes concernant le Web.

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.

.

Ceci étant dit, par manque de temps ou de budget, il est commun de fusionner le storyboard et le wireframe. Il convient alors au chef de projet de bien définir les termes employés vis-à-vis de son client afin d’éviter toute confusion.