Créer le zoning de son site

Catégories : "Astuces", "Conception" par Hadrien Marchand Hadrien Marchand le 21 Septembre 2010

Créer le zoning de son site

Le zoning web permet de mettre toutes les chances de son côté lors de la conception d'un site internet.

En effet le zoning est le premier document qui donne vie au projet web, en offrant un aperçu concret des pages clés : page d'accueil, présentation des produits, ...

Alors comment réaliser le plus simplement et le plus efficacement le zoning de son site internet ? Faut-il ajouter des images, des couleurs ? A quel niveau de précision doit-on se limiter ?

Le zoning web intervient normalement après la création de l'arborescence du site internet. Pour rappel l'arborescence se charge de mettre à plat l'organisation du contenu du site : quelles sont les pages, les rubriques, ...

Qu'est ce qu'un zoning ? La définition...

Le zoning est un schéma rudimentaire des pages clés d'un site internet et de leurs zones principales : menus, logo, textes, moteur de recherche, ...

Lors de la conception d'un site internet, il projette « sur papier » le gabarit d'une page, et oblige à bien lister les éléments qu'elle contient.

Le zoning permet, d'une part, de mettre les parties prenantes d'accord sur l'approche d'un projet (entre client et prestataire, entre collaborateurs), et d'autre part de passer la main au webdesigner qui prendra le relais sans se soucier des aspects fonctionnels. Il pourra ainsi se concentrer sur son cœur d'expertise : la créativité artistique.

Différence entre wireframe et zoning ?

Certains confrères préfèrent parler de wireframe. Théoriquement, le wireframe précise plus profondément le contenu de la page qu'un simple zoning, en détaillant ces « zones principales ».

Chez Maecia, nous utilisons généralement le terme de zoning quel que soit le niveau de détails, car cette expression « imagée » est simple à comprendre et à retenir par tous.

Créer son zoning web avec PowerPoint

PowerPoint (ou son équivalent open source Open Office Impress) équipe probablement déjà votre poste, et s'avère par conséquent être le plus rapide et le plus simple pour produire un zoning. Cependant cette simplicité devient un défaut si l'on souhaite aller plus loin.

zoning internet avec PowerPoint

Les inconvénients d'utiliser PowerPoint / Impress pour créer son zoning web :

  • Seules des formes basiques sont disponibles, heureusement il y a le rectangle !
  • Impossible de se repérer via des dimensions réelles, pour prendre en compte par exemple les résolutions 1024x768, ...
  • D'une version à l'autre de PowerPoint les formes ne s'affichent pas forcément de la même manière, ce qui risque de modifier le zoning lors de changement de poste
  • Pas d'exportation simple en image. L'exportation en image est utile si l'on souhaite insérer le zoning dans un cahier des charges ou dans une présentation

Créer son zoning web avec Illustrator

Adobe Illustrator est assez simple d'utilisation, même pour des non graphistes. En effet la création et la manipulation de formes est assez intuitive, idem pour la possibilité de grouper des formes ou de régler leurs profondeurs (le logo est par dessus le background, ...)

zoning internet avec Illustrator

Avantages / possibilités :

zoning internet avec illustrator utilisation des calques

  • Travailler en taille réelle, notamment de régler simplement la zone de travail sur une taille de résolution spécifique (980 px de largeur par exemple)
  • Ne pas recopier les éléments communs à toutes les pages (background, logo, entête, ...) dans chacune d'elle, en utilisant les calques (voir copie d'écran). Ainsi, si par exemple le menu est modifié, alors il ne sera pas nécessaire de le modifier dans toutes les pages
  • Pouvoir fixer des éléments grâce au cadenas, ainsi par exemple les éléments de fond ne sont plus déplacés par erreur de manipulation
  • Exporter au format image

Inconvénients :

  • Le prix de la licence si on ne le possède pas déjà pour un autre usage
  • La lourdeur de chargement du logiciel

toolkit pour réaliser son zoning internet avec illustratorAstuce : pour obtenir un résultat qui impressionnera vos amis ou vos collègues, vous pouvez « tricher » en utilisant des illustrations spéciales zoning toutes prêtes – des toolkits - comme Sqetch de Eleqtriq.com téléchargeable ici : http://www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit



Créer son zoning web avec Pencil

Si l'on souhaite passer à la vitesse supérieure, alors il faut se pencher sur la gamme de logiciels spécialisés.

Dans les outils gratuits, nous retiendrons Pencil, outil de prototyping multi plateforme (il s'installe soit comme un Addon Firefox, soit comme une application classique.)

On oublie alors tous les inconvénients de Powerpoint ou d'Illustrator : créer le zoning de son site internet devient un jeu d'enfant. Oui... un jeu.

Il suffit de glisser les éléments pré-définis depuis la colonne de gauche : titre, texte, liste déroulante, tableau, fil d'Ariane, image, ...

zoning internet avec Pencil

Avantages / possibilités :

  • Rapide à charger, documents légers
  • Glisser des éléments web pré-définis, on se concentre donc sur leur légitimité et leur placement plutôt que sur leur forme
  • Exporter le zoning en image, en pdf et même en html
  • Possibilité de lier un élément (un bouton, un texte, ...) à une autre page

Ainsi le zoning, ou wireframe, se rapproche d'une maquette fonctionnelle puisqu'il est facilement possible d'exporter des pages HTML liées entre elles.

zoning internet avec Pencil lier des pages

Quelles informations inclure dans son zoning ?

Nous avons vu quels outils utiliser pour créer son zoning, mais reste à savoir quels contenus y insérer.

Il s'agit de bien retenir le but de l'opération : matérialiser le projet web et valider ses grandes lignes avant de passer en phase créative. Le zoning doit donc simplifier la vie du webdesigner, et le laisser dédier toute son énergie à la dimension esthétique.

Il est donc inutile de colorer les zones et les éléments, le zoning se concentre sur les contenus et les éventuelles fonctionnalités.

A vous de choisir quel niveau d'information apparaitra. Si vous avez les idées claires, n'hésitez pas à ajouter du vrai contenu plutôt que du texte latin, et à aborder le détail fonctionnel. En revanche si vous souhaitez laisser une plus grande marge de manœuvre au responsable artistique alors représentez seulement les zones importantes de la page ainsi que les éventuelles contraintes : logo, drapeau multilingue, etc.

Il existe de nombreux outils commercialisés de wireframe (Axure, Balsamiq, ...), le but de cet article n'était pas d'être exhaustif mais d'offrir une première approche.

Peu importe l'outil, le principal est de se sentir assez à l'aise avec celui-ci pour ne pas freiner sa réflexion stratégique.

Quant à savoir quels sont les fonctionnalités et contenus les plus pertinents pour ses pages, ça c'est une autre histoire...

Créer le zoning de son site

A propos

Bienvenue sur le Workshop de l'agence interactive Maecia : notre espace d'actualités, de veille et de publications sur les nouvelles tendances d'Internet. Vous y trouverez aussi le fruit de certains de nos développements techniques que nous mettons à disposition de la communauté. Découvrez notre vision du web et surtout n'hésitez pas à prendre la parole !