Retour  > La Charte Graphique


 

La charte graphique ne s'occupe pas des contenus mais de leur forme et présentation: la disposition des zones de contenus et de leur enrobage graphique. Il définit aussi les règles éditoriales pour ne pas cassé l'ambiance graphique.

 

Attention la présentation peu changer avec la taille de l'écran de celui qui affiche le site mais aussi mais heureusement dans une moindre mesure avec le navigateur et sa version logiciel (chrome, internet explorer, safari ...  Depuis peu de temps la technologie essaie de faire en sorte que les site d'adapte à l'écran du client site "responsive". Cependant les règles d'adaptation restent subjectives et à l'appréciation du graphiste. Il faut donc penser son site sur les différents écrans.  La police ou les photos doivent elle grossir avec la taille de l'écran ou fait il juste augmenter les marges... Dans le cas des smartphones le site ne peut être conçu qu'en mono colonne

 

Le graphiste ne s'occupe que du front office

l'administrateur du contenu ne s'occupe que du contenu et très peu de la mise en page. Faire tout à la fois c'est une perte de temps considérable.Les outils de mise en ligne des contenus accessible en backoffice ne sont pas sauf cas exceptionnel des outils de mise en page.

 

Le graphiste va proposer une mise en page sur des contenus qu'il ne connait pas mais dont il a une idée. Il va penser disponition et taille de cadre (zone de contenu)

 

La création libre en matière de définition de la charte graphique est un risque pour vous et le prestataire. L'important est de spécifier au mieux les éléments (organisation des objets graphiques , objets textes, objets média, widget ...) qui composeront votre site. Il peut y avoir une charte graphique pour smartphone et une charte graphique pour ordinateur ou tablette.  

 

La charte graphique doit s'adapter au mieux avec tous les outils de visualisation des sites internet (navigateur en différentes version et configuration). Cela est impossible Il faut s'adapter au plus grand nombre. Certaines règles de présentation doivent être respectées sachant que les fenêtres sont de plus en plus grand mais encore plus de 10% (en 2013) des internautes ouvrent des fenêtres de 1024*768 qu'il ne redimensionnent pas.  Un site Internet  se voit différemment dans une petite fenêtre de smartphone ou une grande fenêtre de desktop. Utiliser cet outil pour comprendre ou les outils de developpement de votre navigateur chrome firefox ou internet explorer.

 

Définir sa charte graphique consiste à :

  1. Choisir ses polices les couleurs et les polices et leur comportement quand la taille de fenêtre change,  choix des polices true ou local  polices google  voir le sujet sur les règles dans les choix de police .
  2. Choisir les objets ou zone de contenu que l'on veut utiliser sur son site 
  3. Définir pour chacun d'eux leur comportement dynamique (adaptation automatique de l'objet a la fenêtre, objet dont le contenu doit être modifiable en backoffice...) l'objet doit il changer de taille avec la taille de l'écran ou être déplacé.
  4. Choix et définition des modèles e contenu. Le modèle ou thème dans certains CMS définit la mise en page des objets que l'on a choisi. Une page sera associée à un choix de modèle de cadre et un choix de modèle de contenu. Le cadre définit ce qui est récurrents entre les pages (bandeau, menu, colonne de gauche, titre de navigation, pied de page fixe, image de fond ...). Le modèle de contenu défini la  disposition des objets choisis pour accueillir le contenu qui changera d'une page a l'autre. Pour le cadre, le graphiste tiendra compte du  type de page (Taille fixe , extensible ...), pour l'enrobage graphique il faudra faire le choix des couleurs dominantes (choix des couleurs (changer la variable LoadJack dans url pour changer la couleur de base). Attention pour atteindre l'objectif de maximum de visibilité de vos contenus, il y a des règles à respecter et il faut essayer de suivre les habitudes des internautes en matière de navigation. Il y a une grande documentation sur le sujet  voir par exemple ici.
(c) www.mtdeveloppement.com