Identité graphique

Dans le cadre d'un serveur web professionnel à contenu informationnel complexe, une identité graphique sophistiquée mais intuitive doit être mise en place.

Ici, le site tutoriel est basé sur 5 grandes rubriques, clairement annoncées dès la page d'accueil: l'identité graphique, l'ergonomie visuelle, l'ergonomie cognitive, l'ergonomie navigationnelle et l'arborescence structurante.

ESPACE DE VISUALISATION

Le site est réalisé dans un tableau horizontal de 750 pixels, ce qui rentre dans l'espace critique de visualisation d'une écran 15 pouces configuré en 800 x 600.

Le fond de la page (équivalent au bureau de Windows 98) est noir chocolat (241500). C'est donc cette couleur qui délimitera la zone d'affichage des pages du site sur un écran d'une définition graphique supérieure, de 17 pouces par exemple (1024 x 768 pixels).

COMPATIBILITE DES NAVIGATEURS

Le site est conçu prioritairement pour MS Internet Explorer, selon le principe des feuilles de style, car les études démontrent que 80% des internautes utilisent ce navigateur. Néanmoins il est parfaitement lisible avec Navigator de Netscape. Il devrait l'être pour la version 4 et la 6, ainsi que pour la version 5 d'Opera, le butineur le plus fidèle aux recommandations du W3C.

Ainsi, il est testé sur une plateforme Macintosh (iMac) et une autre PC, dans tous les navigateurs possibles selon ce tableau croisé :

	PC (17 pouces)	Mac (15 pouces)
Netscape	Navigator 4.5	Navigator 4.77
Netscape	Navigator 6.1	Navigator 6.1
Microsoft	Internet Explorer 5.00	Internet Explorer 5.00
Microsoft	Internet Explorer 4.00	NA
Opera	Opera 5.01	Opera 5.01

Si la compatibilité des navigateurs ne relève pas directement de la charte graphique du projet web, il ne faut pas que l'indentité du site soit perturbée par les comportements des logiciels clients des internautes. C'est pourquoi nous mettons en amont la vérification systématique des plateformes et des logiciels.

CHARTE GRAPHIQUE

La charte graphique du site web doit être en accord avec celle de l'entreprise pré-existante afin de d'assurer à l'internaute le sentiment d'avoir trouvé le bon site web. Mais attention à ne pas reproduire la charte graphique papier au web; il s'agit ici d'un autre média qui ne répond pas aux mêmes règles de mise en page ou d'utilisation des couleurs que l'édition traditionnelle.

Ici le logo est blanc/bistre (FFFFFF/E4E4CA) posésur fond aubergine (6F0940). Le problème est que cette couleur est trés difficile à marier à celles de la palette critique Netscape. (Mais nous supposons que nous avions là une exigence du client). Les couleurs sombres sont partiellement éliminées d'office. La page d'accueil pose l'identité graphique de l'entreprise. Les 5 grandes sections sont numérotées et renforcées par un code couleur navigationnel :

Identité graphique (cette page), signet ambre (jaune profond EFA200)
Ergonomie visuelle, signet orange (couleur du fruit ED7207)
Ergonomie cognitive, signet saumon (couleur de la chair du poisson de même nom F6855C)
Ergonomie navigationnelle, signet carmin (rouge légérement violacé 910018). Le rouge s'accorde difficilement à la couleur aubergine mais il est nécessaire d'en utiliser au moins une nuance afin de trancher les sections du serveur.
Arborescence structurante, signet vert kaki clair (vert olive tirant sur l'ocre grisâtre 809F39), le seul vert à s'harmonier avec la couleur aubergine de base du site.

Enfin, le texte est en encre noire sur fond bistre (E4E4CA) qui est plus doux, moins agressif, qu'un fond blanc mais reste facilement imprimable pour les utilisateurs ne sachant pas configurer leurs navigateurs.

Deux polices de caractères différentes sont utilisées, l'une pour les titres, italique de type Garalde à empattement triangulaire, GUATEMALA et l'autre de type linéale, ARIAL, pour les textes. Pour créer des ruptures, il est ensuite préférable de jouer sur la taille du corps ou la graisse de cette dernière plutôt que d'ajouter une troisième police différente.

Les liens à voir sont en bistre, comme le fond des textes, (E4E4CA), les liens actifs en aubergine (6F0940) et les liens vus en sous luminance de gris (666666). A part le grisé, il s'agit-là de couleurs présentes dans la page.