| |
Zonings et maquettes
1. Zonings
Un zoning est un document qui représente les grands espaces d’information des pages principales : page d’accueil, page de rubrique, liste, page produit, page d’article, etc. Le but est de choisir l’emplacement des différents éléments comme la barre de navigation, les différentes parties de la page, les outils, etc.
Les éléments du zoning à afficher :
- l’identité du site : logo, baseline
- les espaces de navigation
- les espace de contenus
- les outils et la navigation générique
- les espaces publicitaires
Cette répartition doit se faire le plus justement en tenant compte de la résolution cible d’écran pour optimiser l’affichage et la répartition.
Les éléments essentiels doivent être visibles sans scroller, c'est-à-dire être au-dessus de la ligne de flottaison (ou fold = espace de l'écran visible sans scroller). Il s'agit de l'identité (logo, baseline), la navigation du site, les outils fonctionnels, les informations cruciales pour les visiteurs, les actions les plus fréquentes. Pour hiérarchiser l’importance visuelle des contenus, jouez sur les différents degrés de couleurs, du plus foncé au plus clair par exemple.
Calcul de l’espace disponible en fonction des résolutions:
Résolution Largeur maximale Hauteur visible à l’écran |
a x b pixels |
(a-20) pixels |
(b-200) pixels |
| |
|
a = largeur de l’écran
b = longueur de l’écran |
| 800 x 600 |
780 pixels |
400 pixels |
| 1024 x 768 |
1000 pixels |
570 pixels |
| 1280 x 1024 |
1260 pixels |
820 pixels |
2. Maquettes
Basée sur le zoning, la maquette ergonomique détaille chaque bloc du zoning au niveau du contenu et de sa présentation. Il s'agit pour les pages principales (page d’accueil, page produit, page finale, etc.)
d’en faire une description la plus précise que possible tant schématique que textuelle.
Cette maquette va vous permettre de faire valider la conception par le client sur base d’un document très visuel avant de passer au graphisme et d’offrir un document de travail au graphiste et au développeur.
Basée sur le zoning, la maquette intègre la notion de pixels afin de tenir compte des proportions dès le début.
Les éléments à afficher :
- textes :
longueur, principes de mise en forme
- intitulés :
titres, libellés des boutons, liens (état nominal, survolé, cliqué, visité, balise TITLE), légendes, libellés de champs de formulaires, etc.
- règles d’écriture (utilisation d’infinitif, etc.)
- objets :
apparence (emplacement, alignement, taille, couleurs, contraste, fond/caractères) des principaux objets et classes d’objets, comportements des objets et explication à l’aide de notes.
Travaillez avec une charte ergonomique qui spécifie les règles de conception des éléments : titre de page, niveaux de texte, module de mise en avant, lien hypertexte, titre cliquable, chapeau, bouton d’action, barre de navigation, image, message système, champ de formulaire, balise ALT, balise TITLE, etc.
Contactez-nous :
Isabelle Canivet
Isabelle@action-redaction.com
|
