Soigner le graphisme de son site web
Définition d'une charte graphique,
choix d'un style, utilisation d'un fond de page, insertion d'images...
Cette fiche vous présente les différents éléments
à prendre en compte pour soigner le graphisme de votre
site Web.
Définition de la charte graphique
La charte graphique permet d''assurer
une homogénéité à l'intérieur
du site et entre les sites d'une même entité, de
contrôler l'image que l'entité veut véhiculer.
Éléments graphiques
communs à tout le site (organisation des pages, couleurs
utilisées, images de référence, caractéristiques
pour la présentation du contenu principal)
Définition du bandeau = zone de l'écran, souvent
en haut ou à gauche de l'écran, où des boutons
permettent de "sauter" directement vers les pages clés
du site
Définition des zones de menu et des éléments
à utiliser pour la navigation (icônes d'accès
à des rubriques)
Définition de la barre d'utilitaires
Types d'éléments
livrés par le graphiste: boutons, modèle de tête
de rubrique, modèle de catalogue, etc.
Style
Attention à l'utilisation des signes, images,
etc. Ils doivent pouvoir être interprétés
de façon intuitive. Attention à la cohérence
dans tout le site.
Conserver l'apparence du
site
Dans la mesure du possible, garder la même apparence, quel
que soit le navigateur. Tester le site sur plusieurs navigateurs,
ordinateurs, avec différentes versions, etc.
Standardiser les polices
de caractères
Même police, taille, couleur, pour un même niveau
de texte. Ne pas utiliser trop de polices, trop de styles, etc.
dans un même document.
Attention aux éléments
qui ressemblent à de la publicité
Les avis sont partagés, en fonction des utilisateurs. Certains
internautes ne supportent pas la présence de publicité,
et risquent de se détourner de tout ce qui y ressemble
(même s'il s'agit de communication de l'entreprise). D'autres
apprécient de retrouver des "rappels" de communication
de l'entreprise: image véhiculée par de la publicité
vidéo / papier. Ex: Un site qui reprend sous forme de bannière
un film passé en publicité à la télévision.
Fond de page
Choisir une couleur de fond qui touche la cible,
une teinte non agressive pour les yeux
Prendre garde que la page puisse être imprimée clairement
Attention aux motifs contrastés qui rendent la lecture
difficile
Tester l'affichage des couleurs avec un écran configuré
en 256 couleurs
Préférer un fond de page uni ou avec des motifs
en filigrane, et dans des couleurs sobres.
Images
S'assurer de l'utilité
et la pertinence des images
Avant d'insérer une image, se demander ce qu'elle apporte.
Mais pour présenter du contenu, une image vaut mieux qu'un
discours. Une image peut servir de lien à la navigation
Attention à choisir une
image parlante
On ne sait pas si une image est un lien, avant
de l'avoir survolée (changement de l'apparence). Et on
ne sait pas si elle contient un ou plusieurs liens.
Une image-lien ne change pas d'apparence après avoir été
visitée (au contraire des liens HTML, qui changent de couleur)
Attention au temps de chargement
Le chargement des images est parfois aléatoire,
et peut être long.
Insérer un texte explicatif en attendant
que l'image s'affiche
Afficher du texte explicatif (ALT <tag>) pendant le chargement
de l'image: l'utilisateur peut souhaiter avoir la possibilité
de cliquer sur le lien matérialisé par l'image,
sans attendre que celle-ci soit complètement affichée.
