L'organisation visuelle de la page.
Une fois tous les contenus ordonnancés et les grands principes de navigation décrits dans l'arborescence, le travail d'organisation visuelle prend le relais.
Avant de passer à la réalisation concrète de la maquette du site, le zoning web et le storyboard vont permettre de décrire l'interface du site. Cette phase permet de bien spécifier toutes les fonctionnalités nécessaires pour répondre aux actions des internautes. Cette phase décrit également toutes les fonctionnalités d'un point de vue technique.
- Le zoning web ou l'art d'organiser la page
- Le story-board pour décrire les fonctionnalités
1. Le zoning web ou l'art d'organiser la page.
Le zoning permet de découper la page en autant de zones que nécessaire. Cela permet de positionner les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, ou le fil d'Ariane...
Mieux vaut commencer par le zoning général, là ou les différentes zones apparaîtront de manière identique sur les pages. Réaliser ensuite le zoning des pages les plus importantes dont les différences sont sensibles. Le zoning web n'est pas à faire pour toutes les pages dès l'instant ou tous les scénarios de pages ont été réalisés.
Le zoning reste un document très général mais il faut le tester, avant de le finaliser. Par exemple, si vous devez réaliser un site avec un menu qui contient beaucoup d'onglets et de nombreuses sous-rubriques, n'hésitez pas à positionner l'ensemble des éléments pour vous rendre compte de leurs places réelles, afin de produire un zoning web applicable lors de la réalisation de la maquette.
Il faut également spécifier, conjointement à ces zones, des indications de hiérarchie visuelles pour que le graphiste, le directeur artistique puissent en tenir compte dans la maquette.
Image de Organisation visuelle
 |
2. Le storyboard pour décrire les fonctionnalités
Pendant la phase de réalisation du storyboard, l'allure graphique de la maquette n'est pas encore à l'ordre du jour. C'est le point de vue fonctionnel et ergonomique qui est important à cette étape là.
Il s'agit de décrire d'une manière précise ce que contient la page, où se trouvent les éléments, quel est leur comportement, quel est leur taille.
Par exemple, vous pouvez indiquer que les éléments du menu doivent avoir plusieurs états : un état vierge (tant que l'internaute n'a rien fait), un état survolé, un état cliqué et un état visité. Vous pouvez aussi indiquer que la surface cliquable d'un logo doit être supérieure à sa surface réelle. Vous pouvez aussi spécifier par exemple qu'au survol d'un lien particulier, une info bulle mentionnera un texte précis.
De la même manière, si votre site est un site marchand, le storyboard décrira toutes les étapes de l'ajout d'un produit à un panier sur l'interface correspondante : Etat initial, l'utilisateur clique sur le bouton pour "ajouter au panier". Après le clic, l'interface indique "ajout en cours". Un autre état indique "article ajouté". L'état suivant fait apparaître le produit dans le panier...
De cette façon, ces spécifications permettront au graphiste et au développeur de bien concevoir cette interface. Et cela évitera les phases de corrections inutiles, et des oublis dans les fonctionnalités, tout étant conçu dès le départ.
Lorsque le storyboard est validé, la recherche du design et la réalisation de la maquette graphique prennent le relais.
