Notre charte graphique
Définition Wikipédia : la charte graphique, dont la dénomination correcte est cahier des normes graphiques, est un document de travail qui contient l’ensemble des règles fondamentales d’utilisation des signes graphiques qui constituent l’identité graphique d’une organisation, d’un projet, d’une entreprise. Le terme vient du latin charta qui signifie «papier» et qui en français a pris le sens de «loi, règle fondamentale».
But et intérêts de la charte graphique
Le but de la charte graphique est de conserver une cohérence dans les réalisations graphiques de La Raffinerie, quels que soient les différent(e)s intervenant(e)s de la production.
L’intérêt de réaliser une charte graphique est double :
- L’identité graphique reste intacte quelles que soient les réalisations qui l’utilisent, afin que l’association (qui est une somme d’individualités) parle «d’une seule voix». Les anglophones parlent de corporate design (littéralement : dessin de l’entreprise).
- La charte graphique permet au récepteur d’identifier facilement l’émetteur et, par habitude si la cohérence est respectée, de se repérer visuellement dans les différentes réalisations graphiques et au sein même d’un même support (ce qui facilite la lecture).
Le logo
Notre logotype et sa base line
Le logo sera utilisé dans un cartouche qui rappelle notre enseigne à l'Hermitage, pour les affichettes, programmes et toutes les communications d'ateliers ou permanences.
Les polices de caractères :
Dans l'utilisation des typos ci-dessous nous nous appliquerons à accentuer les capitales (majuscules), les polices sélectionnées en sont équipées. Pour les réfractaires à l'idée (gna gna nia, mais on ne mets pas d'accent sur les majuscules ! ) un lien : https://blgraphiste.fr/accentuer-les-capitales/
Les critères de sélection des polices de caractères :
- leur gratuité d’utilisation pour tout types de documents
- la présence des caractères spéciaux (@%ù etc.)
Pour tout les documents (externes et internes) de La Raffinerie, nous utiliserons les quatre typographies suivantes :
Variante pour les titrages
Pour les gros titres nous utiliserons la police SUPER NORMAL mais son signe "&" n'est pas très lisible ni joli, il sera remplacé par celui de la police SUPER CARAMEL (présente dans la liste des polices en téléchargement).
Pour la réalisation des fiches tutos nous utiliserons les polices suivantes :
Toutes les polices de La Raffinerie
Les couleurs
Dans le container "édition" on trouve la risographie.
Les encres disponibles nous ont dicté les couleurs pour la communication de La Raffinerie. Les codes couleurs correspondent à une simulation des encres riso utilisables pour les écrans et de l'impression jet d'encre.
Les documents seront toujours traités en bichromie, choix de deux couleurs à faire parmi les 11 nuances ci-dessous.
Black_riso
code couleur hexadécimale #1d1d1b / C : 0, M : 0, J : 0, N : 100.
Burgundy_riso
code couleur hexadécimale #914e72 / C : 43, M : 75, J : 29, N : 14.
Green_riso
code couleur hexadécimale #00a95c / C : 79, M : 0, J : 80, N : 0.
Medium_blue_riso
code couleur hexadécimale #3255a4 / C : 88, M : 68, J : 0, N : 0.
Bright_red_riso
code couleur hexadécimale #f15060 / C : 0, M : 80, J : 50, N : 0.
Purple_riso
code couleur hexadécimale #765ba7 / C : 64, M : 70, J : 0, N : 0.
Teal_riso
code couleur hexadécimale #00838a / C : 83, M : 26, J : 42, N : 10.
Flat_gold_riso
code couleur hexadécimale #bb8b41 / C : 23, M : 43, J : 80, N : 12.
Yellow_riso
code couleur hexadécimale #ffe800 / C : 3, M : 2, J : 91, N : 0.
Fluorescent_pink_riso
code couleur hexadécimale #ff48b0 / C : 5, M : 79, J : 0, N : 0.
Fluorescent_orange_riso
code couleur hexadécimale #ee743b / C : 0, M : 65, J : 80, N : 0.
Nuancier pour les applications Adobe
Visuels Atelier et Permanence
Format instagram et évènement facebook
visuel évènement Facebook
Visuel Instagram
Dans le fichier référence se trouve une page modèle en 1200 x 628 pixels pour les évents Facebook et une page en 1200 x 1350 pixels pour Instagram.
Les couleurs retenues pour les ateliers et permanences sont :
Fluorescent_orange_riso
code couleur hexadécimale #ee743b / C : 0, M : 65, J : 80, N : 0.
Medium_blue_riso
code couleur hexadécimale #3255a4 / C : 88, M : 68, J : 0, N : 0.
Mode d’emploi du fichier de référence :
Dans Illustrator :
- afficher la fenêtre «Calques».
- quatre calques présents.
- bloquer les calques sur lesquels on ne travaille pas avec le verrou.
Un calque fixe «cache»
Un cache qui intègre les éléments fixes (logo et pied de page). Il permet de régler de la taille du visuel et de faire son cadrage facilement.
Il n’a pas besoin d’être déverrouillé.
Trois calques sont modifiables :
Calque «visuel» >> possibilité de déplacer, recadrer, remplacer la photo. Toujours veiller à avoir une définition suffisante.
Fichiers.JPG génériques prêts à l'emploi
ATTENTION les visuels doivent être préalablement traitée en bichromie (tuto d'utilisation du fichier ci-dessous à venir).
Fichier de référence Photoshop
Calque «cartouches et textes» >> possibilité de déplacer le bloc texte/dates verticalement. Penser à bloquer à l’aide de la touche majuscule pour contraindre le déplacement, ou bien sélectionner et utiliser les flèches du clavier.
Les filets des blocs textes sont réglés à 3pt, pensez à les vérifier une fois les changements de taille de blocs effectués.
Calque «date» >> L’idée est de justifier visuellement en largeur le jour, le mois (sauf mars, mai et juin), les horaires (ce qui modifie leur taille) et d’adapter la taille de la date en conséquence pour que visuellement nous ayons un cartouche équilibré.
- Une fois les modifications effectuées, que vous êtes content.e de votre travail, enregistrer le fichier Illustrator.
- Créer le fichier JPG >Fichier > Exporter > Enregistrer pour le Web (ctrl + maj + alt + s).
Visuels chantiers participatifs
Pour les chantier nous communiquerons à l'aide de visuels génériques sans date.
La fenêtre entourant le visuels est a une déco "planches" qui rappelle les containers et la scène.
Une "banque" de 8 visuels déclinés en Instagram et en Event FB au format JPG est disponible et s'agrandira au fur et à mesure.
Exemple de visuel event Facebook
Exemple de visuel Instagram
Pour celles ou ceux qui voudraient faire leur propre visuels un fichier illustrator est à disposition
Fichier générique pour les chantiers participatifs
Les couleurs retenues pour les chantiers sont :
Fluorescent_pink_riso
code couleur hexadécimale #ff48b0 / C : 5, M : 79, J : 0, N : 0.
Medium_blue_riso
code couleur hexadécimale #3255a4 / C : 88, M : 68, J : 0, N : 0.
Affiches et communication évènementielle
Toujours en bichromie, le choix des deux couleurs parmi les 11 de notre nuancier sera de la responsabilité de la personne qui réalisera l'affichette et ses déclinaisons pour la communication numérique (Instagram, Évènement FB, Bandeau FB,...)
Les éléments fixes :
- le logo,
- le cadre,
- le cartouche date,
- le pied de page,
- les logos partenaires peuvent évoluer en fonction de l'évènement mais leur place est fixe. Par convention l'ordre est : Europe, État, Région, Département, Ville puis partenaires privés.
- la mention peut évoluer en fonction de signatures ou remerciements (graphisme, illustration, photo) mais reste à sa place.
La zone de titre : le titre ne sort pas de cette zone. On privilégiera cette zone en monochromie (dans le cadre d'impression en riso, on simplifie le problème de roulette).
La zone visuel : le visuel de l'affichette devra se situer dans cette zone, elle peut déborder partiellement pour interagir avec la typo (voir Markus, Morgane, Dzair, Lady la fée)
Les cartouches supplémentaires optionnels : soit utiliser la présentation inclue dans le fichier de référence, mais chacun peux faire sa sauce en fonction des besoins, du moment que l'on reste dans l'utilisation des typos chartées
L'image ci dessus est très chargée, c'est voulu, à vous de faire des choix typographiques et des équilibrages qui vous sont propres, osez en respectant le cadre d'application de cette charte et nous parlerons d'une seule voix de plein de façons différentes. Une charte n'est pas une contrainte et n'empêche en aucun cas la créativité, au contraire c'est en jouant avec ses règles au cas par cas, que nous verrons émerger des gimmicks graphiques, des astuces sympas et une créativité débridée.
Des affichettes réalisées à l'Hermitage
Fichier Illustrator de référence
