mercredi 18 novembre 2009

Tutorial: exemple et modèle pour le contenu d'une charte graphique

Le contenu général d'une charte graphique avec un exemple

La charte graphique est la déclinaison pratique de la conception graphique. Cette déclinaison graphique participe à l'image de marque de l'entreprise. On donne ainsi une cohérence visuelle à l'ensemble des documents internes et externes de l'entreprise. Ces documents sont des éléments participant à la communication de l'entreprise.

Les indications techniques de la charte graphique sont les suivantes :

  • Les couleurs utilisées avec les références CMJN / Pantone pour le l’édition papier (Print) et RVB / hexadécimal pour le Web.
  • La police utilisée ou les polices employées avec les styles, le corps du texte et les couleurs. 
    • Police de remplacement pour le web dans le cas d'une utilisation de police non-système.
  • Les pictogrammes utilisés pour la signalétique dans l'entreprise.
  • Le logotype (au format vectoriel) avec ses variantes d’utilisation : 
    • couleurs, 
    • en noir et blanc (version photocopieur avec ou sans trame), 
    • sur fond blanc, 
    • sur fond noir,
    • sur les fonds colorés  
    • sa taille minimum d'utilisation,
    • les espaces de protection, 
  • Les interdits d’utilisation et les exemples de mauvaises utilisations du logo:
    • couleurs, 
    • dimensions, 
    • emplacements,
    • alignements,
    • fond de couleurs,
  • La position du logo, des titres, sous-titres, et du texte pour l’impression bureautique et le web.
  • Les règles typographiques: 
    • abréviations, 
    • règles générales, 
    • utilisation de la capitale,
    • et de l'italique.
  • La déclinaison des mises en pages sur les différents documents, avec les dimensions hauteur/largeur des pages, les dimensions des colonnes avec les espaces, les emplacements des différents éléments du design visuel (bandeau, barre de navigation, photos, logo…). Cela concerne :
    • La bureautique et les imprimées (Affiches, flyers, carte de visites, journal,...) 
    • et le multimédia (Web, vidéo, Cd-rom,....)
    • Les différents supports:
      • Papeterie
        • carte de visite,
        • carte de correspondance,
        • papier à lettre,
        • enveloppe,
        • bon de commande,
        • facture,
        • devis,
        • bordereau de commande
        • fax.
      • Publication
        • newsletter,
        • communiqué de presse
        • journal interne,
        • affiche,
        • flyer,
        • Diaporama: PowerPoint,
        • Traitement de texte
        • CD, DVD.
      • Signalétique 
        • intérieure et extérieure des bâtiments.
        • véhicule utilitaire
        • kakémono
        • Stands
        • Badges
        • Pin's
        • Googies
        • Panneaux de signalétique
      • Web
        • feuilles de style CSS,
        • emplacement des titre, sous-titres, chapeau avec le nombre maximum de caractères pour chaque élément.
        • dimensions pixels des colonnes et espaces des colonnes.
        • Signature mail
        • Newsletter

Creative Commons BY - NC - SA - Vincent Gruyer
Creative Commons BY - NC - SA - Vincent Gruyer

9 commentaires:

Graphiste a dit…

Merci Vincent pour cette synthèse extrêmement bien faite. Je suis graphiste (je travaille au sein d'une agence-web en Haute-Savoie) et je cherchais justement à me remettre en conditions pour structurer la charte graphique d'un client et cet article m'a été d'une grande aide.

Amicalement,
Sophie.

Vincent Gruyer a dit…

Bonjour Sophie,
Bonne chance pour ta charte graphique et j'espère que ton client sera content de ta déclinaison de son identité visuelle sur l'ensemble des supports de communication.

Création de logo a dit…

Très bonne explication, bravo pour votre tutoriel !

Vincent Gruyer a dit…

Merci pour le compliment sur le tuto de la charte graphique

Anonyme a dit…

moi c'est gentilly muanda je suis graphiste de l'academi de beaux arts j'ai vraiment aimer votre texte is nice

Vincent Gruyer a dit…

Bonjour Merci pour votre commentaire sur le contenu d'une charte graphique

Unknown a dit…

Bonjour Vincent,

Merci infiniment pour ce document qui décompose microscopiquement une interface.
Moi je suis un professeur, je prépare un cours des IHM, et je suis vraiment perdu.
Je me demande s'il y a des outils ou un autre document utiles pour les étudiants (surtt pour les travaux pratiques).
Un grand merci Vincent

Anonyme a dit…

Bonjour Vincent,
Merci bcp pour cette magnifique explication je suis pas infographiste mais avec ca j ai arrive a comprendre une charte graphique
car dans notre cas notre logo est rond et bleu mais toujours aucun infographiste chez nous n arrive a nous faire une charte graphique pour décliner notre identité visuelle
merci bcp

Vincent Gruyer a dit…

Bonne charte graphique et bonne déclinaison graphique