Concevoir un site web : Charte graphique et ergonomie
Juste avant de vous précipiter sur votre clavier, muni de votre guide HTML... Cahier des charges, ergonomie, rubriquage, principe(s) de navigation, lectorat(s), services, prestataires : vous êtes sûr(e) que vous savez où vous allez ?
Lâchez votre souris et prenez le temps de réfléchir. C'est ici qu'on cause d'ergonomie, aussi. Vous savez ? Ce qui permet que votre site soit utilisable…
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.
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, 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 de site 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 site (rigolote ? austère ? combattante ? baba-cool ? intello ? etc.). Ne comparez pas la technique, comparez l'impression que donnent les deux " papiers peints ".
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.
Voir aussi Le cycle de vie d’un projet Web
