OutilsReseaux

CharteGraphique

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur? :: Vous êtes ec2-3-80-223-123.compute-1.amazonaws.com
Visuel

Charte graphique internet


Ensemble des règles fondamentales d'utilisation des signes graphiques > identité visuelle d'une organisation, d'un projet, d'une entreprise.


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.


I- 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) L'utilisation d'une armoire forte ignifuge pour sécuriser les données
  • 6) Les principes du choix des images et des illustrations.


II- 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

1) Une charte graphique se construit sur des régles


a) 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 ?"

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

> harmoniser les modes de navigation, gain ergonomique.

1) Une charte graphique se construit sur des régles


b) 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...



1) Une charte graphique se construit sur des régles


c) Ergonomie = facilité d’utilisation
- L' arborescence : logique, vulgarisée,
- Le menu : repérable, mot clairs et concis,
- Navigation : souple.


Exemple : http://www.caue-lr.org/index.php
Navigation par onglet ou par territoire

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

2) La création de la matrice graphique


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

a) Le gabarit


Conseil : 960px de largeur, 60ko / page.

Exemple : http://www.mandarinepressee.net/wakka.php?wiki=Presentation

b) 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é.

Exemple : http://www.terroirsetcultures.org/wakka.php?wiki=PagePrincipale

c) Le bandeau


Il comportera votre logo, votre nom et l'objet de votre site.
On peut aussi y trouver les menus rapides (Aide, Plan, contact...).

Exemple : http://www.stagescourts.site-coop.org/wiki130/wakka.php?wiki=PageAccueil
> Qui est l'entité de ce site ? Quel est son nom, son logo ?


d) 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.

Exemple : http://www.siglr.org/document.php?pagendx=147

e) Les menus rapides

Entre 3 et 5 maximum.

Conseil : placer les "menus rapides" dans le bandeau, si le fond le permet, ou en haut à droite de votre page.

Exemple : où se trouve le menu rapide "contact" :
http://www.siglr.org/document.php?project=siglr&locale=fr&level1=menu1_siglr_f64a5b4fc2109aa2_1&level2=1&doc=accueil


f) La page contenu


Il est important de faire des pages concises.
Une introduction améliore la compréhension.
Exemple : http://www.ciepac.fr

- Contenu

- Polices

- Titres :
Exemple : http://www.ouvre-tete.fr/wikini/wakka.php?wiki=RestoUBIO
Possibilités de créer des titres T1, T2…, mettre en valeur certains passages pour faciliter la lecture et l’accès le plus rapide à l’information.


- Images

- Les liens
Exemple : http://www.lafibala.org/wakka.php?wiki=CamPagnes

g) Le pied de page


Les mention légales, technologies utilisées.

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 prevenu 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


Accessibilité :

Couleur, palette graphique
> http://www.morecrayons.com/palettes/webSmart/colorcube.php : palette couleurs…
> http://www.pourpre.com : perception des couleurs, nuanciers…

Guide pour la conception pédagogique et graphique d'un site éducatif
> http://aptic.ulaval.ca/guidew3educatif/

FIN

* Health Jobs Australia
* Nursing in Australia
* Graco Spray Gun
* Airless Spray
* Oxone
Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]