Si
vous avez mis en application la fiche " Concevoir
un site web : l'architecture de l'information ", vous
voilà prêt à élaborer votre charte
graphique. A quoi sert-elle ? Et quels sont les éléments
nécessaires pour la concevoir ? Réponse ci-dessous.
Pour concevoir
une charte graphique, une feuille de papier, des crayons de
couleur, et un navigateur pour repérer les sites dont
la présentation vous plaît suffisent. Qu'est-ce
qu'une charte graphique ? Et à quoi sert-elle ? Pas seulement
à faire joli : c'est même un aspect relativement
accessoire. La charte graphique, c'est un ensemble d'éléments
visuels qui facilitent la vie du lecteur : ils sont clairs,
s'affichent rapidement, sont toujours là où on
pense les trouver, remplissent correctement une seule et même
fonction, et rendent explicites ce que vous venez de définir
: le rubricage, grâce à une navigation efficace.
La charte graphique, c'est l'art et la manière de rendre
votre site ergonomique, facile et agréable à consulter.
Quels en sont les éléments ? Ce sont ceux qui
répondent aux questions fort précises de vos lecteurs
(voir ci-dessous), et non les jolis fonds colorés ou
les images qui tournicotent. Illustration parfaite de ces propos
sous forme de jeu de piste : retrouver les éléments
cités sur le site de la Bibliothèque Mazarine
: http://www.bibliotheque-mazarine.fr.
Une
liste de questions
Voici les questions auxquelles doit répondre votre lecteur,
rapidement et sans se tromper :
- " Où suis-je ? " : l'en-tête soit le
titre du site - le nom de l'association -, identique sur toutes
vos pages, répond à cette question ;
- " Où puis-je aller ? " : la barre de navigation
simple et claire est toujours au même endroit ; vous pouvez
séparer visuellement les rubriques de contenu des rubriques
de type " Services ". Pas de sous-rubriques proposées
par du javascript si vous ne le maîtrisez pas et ne l'avez
pas testé, car les navigateurs de vos lecteurs risquent
de ne pas le présenter correctement (voire pas du tout,
dans certains cas).
- " Qu'y-a-t'il comme information ? " : c'est la troisième
zone, celle de la lecture. Vous y donnez le titre de la page
(qui correspondra, règle élémentaire, à
l'intitulé du lien de la navigation sur lequel on a cliqué
pour y arriver), toujours au même endroit, toujours de
la même manière, puis le texte, que vous devez
prévoir court, structuré avec des intertitres.
Pour l'espace de lecture, vous peaufinez votre typographie,
la couleur du fond de la page et celle du texte (noir sur fond
blanc, on n'a jamais rien inventé de plus lisible ?),
celles des titres et sous-titres (un peu de couleur, du moment
qu'elle est visible, mais pas plus de 2 ou 3), la couleur des
liens (il vous en faut deux : une pour les liens non visités,
une autre pour les liens visités).
- Espace fourre-tout : c'est très pratique de caler dans
le " pied de page " quelques informations importantes,
mais qui ne méritent pas l'espace glorieux du premier
écran. Vous y reprenez, en petit, votre navigation (les
grandes rubriques et les services), mais sous forme de simples
liens hypertextes sur du texte. Vous y installez le copyright,
si vous voulez, ou bien la date de mise à jour de la
page, l'URL du site, le e-mail du webmestre : tous ces petits
riens que l'on cherche partout et que l'on trouve rarement quand
on en a besoin.
- " Sur quelle genre d'association suis-je tombé(e)
? ". C'est l'étape la plus difficile mais aussi
la plus créative. Les photos que vous choisissez, les
couleurs, l'organisation des pages, tout cet ensemble dispense
une atmosphère, celle que vous voulez donner de votre
association (rigolote ? austère ? combattante ? baba-cool
? intello ? etc.). Exemple du site d'une autre bibliothèque
pour que vous puissiez comparer avec celle de la Mazarine :
le site de la British Library (http://www.bl.uk/index.shtml).
Ne comparez pas la technique, comparez l'impression que donnent
les deux " papiers peints ". On est chaque fois dans
une bibliothèque sérieuse, mais l'impression rendue
par la charte graphique n'est pas du tout la même. Un
conseil, si vous n'avez pas de graphiste sous la main : trouvez
un site qui vous plaît, avec la bonne " atmosphère
", et inspirez-vous en, en tentant de comprendre comment
cette atmosphère est rendue. Si l'exercice vous semble
trop difficile, faites simple...
Dernier conseil et non des moindres : une fois que vous avez
trouvé une charte graphique, vous devez absolument l'appliquer
à toutes vos pages : c'est la condition principale pour
qu'elle remplisse son rôle, mettre à l'aise votre
lecteur pour qu'il puisse oublier le décor et se concentrer
sur le contenu.
Eve Demazière
Sites
Pour une description complète de la charte graphique,
lire mon livre, accessible intégralement et gratuitement
en ligne : " Conception, suivi et animation d'un site web
associatif ", à l'URL suivante : http://www.internatif.org/eve/serveurs,
et plus particulièrement les chapitres 5.1 - Graphisme
simple, efficace et adapté au thème et 5.2 - Si
vous avez un(e) graphiste sous la main. Pour la réalisation
des pages à partir de la charte graphique, quelques conseils
pratiques dans le reste du chapitre 5.
A propos de l'ergonomie :
- Voyez l'annexe Annexe 3 - Ergonomie sur le web, de mon livre
(URL ci-dessus) ;
- Et les fiches de lecture sur l'ergonomie, " Documentation
sur l'ergonomie ", mises à jour sur le site "
Web 1901 " : http://www.web1901.org/article18.html