Charte graphique internet

Ensemble des règles fondamentales d'utilisation des signes graphiques

> identité visuelle d'une organisation, d'un projet, d'une entreprise.

I. But et intérêts de la charte graphique

Conserver une cohérence

L'intérêt de réaliser une charte graphique est double :

• L'identité graphique reste intacte.

• Le récepteur identifie facilement l'émetteur et se repère dans les différentes réalisations.

II. Le contenu d'une Charte graphique papier

Il ne s'agit pas d'appliquer les codes dans leur intégralité mais d'en sélectionner quelques-uns.

La charte graphique s'applique à définir :

1. Le logotype
2. Les polices de caractères
3. Les jeux de couleurs
4. L'utilisation des éléments graphiques
5. Les principes du choix des images et des illustrations.

III. Le contenu d’une Charte graphique internet/intranet

Définir la position les différents éléments, valider les fondations de votre site internet : accessibilité, lisibilité, ergonomie

IV. Une charte graphique se construit sur des règles

1. Accessibilité

choix du nom de domaine, compatibilité des navigateurs, choix des applications, standards W3C

Au départ de votre projet, se pose 3 questions qui vont construire les bases de votre site :

• "A quoi sert le site ?"
• "Quels sont les contenus proposés?"
• "Comment faire en sorte qu'ils soient accessibles à tous ?"

2. Rationaliser les contenus, séparation du fond et de la forme

> harmoniser les modes de navigation, gain ergonomique.

3. Lisibilité

• Votre nom, votre logo et l’objet de votre site,
• Taille du site
• Taille des caractères de police et largeur des paragraphes
• Choix des couleurs : fond et textes...

4. Ergonomie = facilité d’utilisation

• L'arborescence : logique, vulgarisée,
• Le menu : repérable, mot clairs et concis,
• Navigation : souple.

Conseil : l'internaute doit trouver en 3 clics l'information qu'il cherche.

V. La création de la matrice graphique

1. Charte graphique internet = règles (accessibilité, lisibilité, ergonomie) + identité graphique

L'identité graphique doit prendre en considération :

• la sémantique des couleurs
• le vécu collectif, les références historiques.
• l'imaginaire populaire

2. Les différents éléments à définir :

• le gabarit (conseil : 960px de largeur, 60ko / page)

• les couleurs : plaire est une affaire de goût. L’important est de vous assurer que votre choix colorimétrique est lisible (conseil : Les couleurs doivent être au service de la lisibilité et de la convivialité).

• le bandeau : avec le logo et le nom de la structure, l'objet du site. On peut aussi y trouver les menus rapides (Aide, Plan, contact...).

• la page contenu : il est important de faire des pages concises. Il faut définir comment se présentent : le contenu, les polices, les titres, les images, les liens

• le pied de page : les mention légales, technologies utilisées.

• les menus : les menus communs se placent généralement en haut à gauche. Clarté des mots et espacement entre les rubriques (conseil : un sous-menu maximum pour chaque rubrique).

• les menus rapides : entre 3 et 5 (conseil : placer les "menus rapides" dans le bandeau, si le fond le permet, ou en haut à droite de votre page).

En conclusion

N'oubliez pas que la charte graphique, c'est l'art et la manière de rendre votre site internet ergonomique, facile et agréable à consulter.

Bonus pratiques : en VRAC

> Le design de votre site est une clé déterminante dans le rapport de confiance et de professionnalisme que vous aurez avec vos interlocuteurs. Une mise en page mauvaise, une mauvaise impression, trop de textes... rebuteront vos internautes plus que de les aider.

> Une bonne mise en page n'augmente pas les performances mais contribue largement à la satisfaction de l'internaute.

> Un lien colorisé est plus cliqué qu'un lien noir car il est plus facilement repérable.

> Il est important de prendre en compte la catégorie de vos utilisateurs dans le choix de mettre une icône, un lien ou les deux. Les liens sous format texte sont plus souvent cliqués car compris plus rapidement.

> Un bon principe pour les icônes : les faire les plus grandes possible, les mettre dans une zone permanente et les disposer horizontalement.

> L'acceptation et l'impact d'une animation sont augmentés lorsque l'usager est prévenu et invité à lancer son démarrage quand il le souhaite.

> L'utilisation d'espaces blancs entre les paragraphes et pour les marges gauche et droite augmente la compréhension de 20 %.

> De façon générale, une page dense avec beaucoup de liens mets plus de temps à être assimilée ; néanmoins, un alignement répétitif n'augmente pas la compréhension.

> Les avertissements conduisent, le plus souvent, à une acceptation et incitent l'internaute à poursuivre sa recherche.

> La multiplication des menus entraîne l'internaute à parcourir votre site plus que ça ne l'aide à trouver une information.

> Les internautes sont plus patients lorsque le contenu est de qualité.

> Une page d'accueil trop agressive et chargée ne donne pas envie à l'internaute de naviguer plus loin.

> Le rendu final d'une page Web n'est pas le produit figé des règles de présentation fixée par son auteur : il résulte de la combinaison des 3 sources de styles : l'auteur, l'agent utilisateur et de l'utilisateur lui-même.

Ressources

---

 Programmer et développer support de cours