Définition

Une charte graphique définit les différents composants visuels d'une marque / organisation / produit ainsi que des directives précises sur la mise en place de ces composants. Ces dernières doivent être respectées par toute personne travaillant avec ou pour ce client, afin de respecter son identité visuelle.

Directives générales

Voici des éléments susceptibles de se retrouver dans une charte graphique axée web :

• logo
• palette de couleurs
• typographie(s)
• élément(s) graphique(s) (médias, boutons, icones, etc.)
• tone of voice
• etc.

Logo

Montre le logo et ces déclinaisons (avec slogan, sans slogan, minimal, etc.). On y retrouve aussi des exemples d'utilisation (print, version noir et blanc, etc.). Si nécessaire, on peut proscrire certaines utilisations comme le changement de couleur ou des déformations.

Couleurs

Cette section définit la palette de couleurs qui peut être utilisées dans les supports de communication. On y retrouve les couleurs avec une importance primordiale pour l'identité visuelle: les couleurs du logo, d'actions, de typographies, de fonds, etc. On évitera de présenter les couleurs secondaires ou de soutiens (traits, ombrages, etc.). On y retrouve un guide d'utilisation ainsi que les références RVB / Hexadécimal (digital) et/ou CMJN / Pantone (print).

Typographies

On y retrouve les typographies officielles utilisées dans le logo, pour les titres et pour les textes. Des exemples peuvent montrer les différentes tailles ou styles à respecter dans les compositions visuels.

Éléments graphiques

Dans certains projets, on peut définir comment certains médias doivent être traité graphiquement comme des images, des videos, des pictogrammes ou d'autres décorations graphiques (fonds, boutons, textures, traits, formes, etc.).

Tone of voice

Le tone of voice, ou direction éditoriale n'est pas forcément visuelle mais permet de s'assurer d'une cohérence dans le traitement du contenu textuel et donc par extension pourrait avoir un impact sur la direction artistique.

Avantages

• Fournir les directives essentielles et ainsi faire gagner du temps à l'équipe de designers et développeurs.
• Maintenir la cohérence au travers de différents canaux de communications (print, site web, réseaux sociaux, etc.).
• Assurer une différenciation pour se démarquer de la concurrence.

Dans notre cas, nous construisons une charte graphique autour d'un produit ou d'un service. Voici les différents éléments à présenter :

1. En-tête
2. Sommaire
3. Présentation du produit / service
4. Ses qualités (ce qu'il véhicule comme valeurs)
5. Palette de couleurs
6. Densité des couleurs
7. Typographie(s) (titre et texte)
8. Boutons

Exemple

Voici un exemple basé sur une pair de chaussures Vans :

En-tête

L'en-tête de la charte graphique.

Sommaire

Liste les différentes sections de la charte graphique.

Le produit / service

Présentation du produit avec un court texte remettant le contexte. Cela permet de cerner le sujet principal.

Qualités

On décrit les différentes qualités ou valeurs véhiculées par le produit / service. Le but est de pouvoir y associer des couleurs, des typographies, des styles qui seront en accord avec ces qualités.

Couleurs & densité

On retrouve notre palette de couleurs principales, avec des références hexadécimal, RVB et leurs usagess. Dans notre cas nous allons y indiquer le nom de la couleur via le site color-name.com. Un schéma de densité représente la quantité de chacune des couleurs dans nos réalisations graphiques.

Typograhie(s)

Présente la ou les typographies choisies pour nos titres et textes. On cite le nom de la typographie et d'où elle provient, et si on a l'information ses créateurs. En plus de ceci, on définit des différentes tailles d'utilisation.

Boutons

Dans notre cas, nous allons définir notre design de bouton, ainsi que 2 styles pour des actions primaires et secondaires.

La demande

Je vous demande de fournir une charte graphique contenant ces différents points :

1. Une en-tête avec votre nom, prénom, classe.
2. Un sommaire avec les différentes sections.
3. Une section qui présente votre produit / service avec une image, un titre et un texte court.
4. Une section avec ses qualités. Au moins 5 points doivent être cités.
5. Une section avec les couleurs et la densité d'utilisation. Chaque couleur doit être nommée via color-name.com, avec 2 références hexadécimal et RVB, ainsi que leurs usages.
6. Une section avec les typograhies et leurs tailles et styles. Présentation avec nom, provenance et créateurs (si possible), 5 tailles de titres, et 2 styles de textes..
7. Une section avec les boutons. 2 variantes : action primaire et secondaire avec informations sur les styles.

La remise

• Remise via Teams (à définir)
• Au plus tard pour le dimanche 23 novembre avant 00h00. Tout retard sera sanctionné. Un retard de plus d'une journée équivaut à un zéro.
• Un document est au format .pdf exporté en haute qualité, en un seul fichier. Nommé nom_prenom_classe_web-design_25-26.pdf. Pas d'espace, pas de symbole, pas d'accent. Un nom de fichier non conforme sera sanctionné.
• Doit être réalisé dans Figma. Le document doit être disponible pour l'examen.
• Chaque page de votre charte est une frame au format desktop > desktop 1440x1024
• Ajouter une mini en-tête numérotée sur chaque page qui indique le contexte (couleurs, titre, texte, etc.)

Exporter au format PDF

L'export au format .pdf de toute vos frames se fait depuis le menu figma situé dans le coin supérieur gauche. En ouvrant ce menu, dans l'option File on retrouve l'action Export frames to PDF….

Lors de l'export, Figma demande la colorimétrie que vous pouvez laisser en sRGB et la qualité qui doit être high.