WEB1901

 


FORUM


NOS PRATIQUES
Communiquer et travailler grâce au réseau
Mieux comprendre l'internet
S'équiper
S'informer, se former et former à l'internet
Sites web
 


NOUS




PLAN
PLAN

 

> ACCUEIL > NOS PRATIQUES > SITES WEB > CONCEVOIR UN SITE WEB

Concevoir un site web : Charte graphique et ergonomie


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


Auteur(s) : Eve
Date : 14 février 2003

haut
FORUMNOS PRATIQUESNOUS
[WEB1901] Le site des webmestres associatifs
http://www.web1901.org - equipe⊕web1901.org