Charte
graphique
2
Introduction ...3
Identité visuelle ... 4
Le logo | Description du logo ...5
Le logo | Zone de protection et taille minimale ...6
Le logo | Déclinaisons ... 7
Les fondamentaux | Les interdits ...8
Les fondamentaux | Les couleurs ...9
Les fondamentaux | Les typographies ...10
Univers graphique des supports de communication ...11
Les principes de construction | Le “split-screen” ... 12
Les principes de construction | Le “split-screen” ... 13
Les principes de construction | Dimensions du logotype et des marges ... 14
Les principes de construction | Principe générique de positionnement des éléments 01 ... 15
Les principes de construction | Principe générique de positionnement des éléments 02 ...16
Les principes de construction | Placement de l’accroche et du corps de texte 03 ...17
Les principes de construction | Placement de l’accroche et du corps de texte 04 ...18
Les principes de construction | Placement de l’accroche et du corps de texte 05 ...19
Les principes de construction | Placement de l’accroche et du corps de texte 06 ...20
Les principes de construction | utilisation du logo comme motif 01 21 Principe de contruction | utilisation du logo comme motif 02 ...22
Les principes de construction | document commercial 01 ...23
Les principes de construction | document commercial 02 ... 24
Supports numériques ...25
Suports numérique | Signature mail ...26
Suports numérique | Fond d’écran d’ordinateur 01 ... 27
Suports numérique | Fond d’écran d’ordinateur 02 ...28
Suports numérique | Fond d’écran d’ordinateur 03 ...29
Supports imprimables ...30
Suports numérique | papier en-tête 01 ... 31
Suports numérique | papier en-tête 02 ...32
Suports numérique | carte de visite ...33
Goodies ...34
Goodies | T shirt ...35
Goodies | Polo ...36
Goodies | casquette ...37
Goodies | Stickers et pin’s ...38
Goodies | Stylo ...39
Goodies | Bloc notes ...40
Sommaire
Introduction
La charte graphique est essentiellement un document de travail servant de guide pour les activités futures d’une entreprise, relatives à la
communication.
Ce document vise donc à assurer une continuité visuelle de toutes les conceptions graphiques et documents vecteurs de l’identité du Centre d’Information Minière (CIM)
On y trouve : Le logotype
Une explication détaillée, d’un point de vue artistique, de chacun des éléments qui forment le logo est succinctement offerte. Le concepteur du logo invite le lecteur ou la lectrice du document dans sa tête pour lui faire une place dans le processus de création. Aussi, la zone d’exclusion (espace protégé minimum autour du logo) est-elle définie. Des déclinaisons du logo en fonction des couleurs ont été anticipées dans ce document en vue des éventuels besoins de variations.
L’univers coloriel
L’association de plusieurs couleurs peut être inévitable pour la préparation de certains documents ou créations visuelles. Pour cela, la couleur
principale ainsi que les secondaires choisies pour les créations de CIM sont précisées.
La typographie
On trouve la police principale et les polices d’accompagnement sont
Les supports de communications
La présentation graphique des supports de communication, imprimables et électroniques, est clairement définie dans ce document avec des mock-up (simulations) conçus.
Ce document, bien qu’il soit fait pour guider les travaux du CIM sur la durée, est susceptible de connaitre des changements en fonction de l’évolution du CIM et les exigences associées.
Identité
visuelle
Le logo | Description du logo
Le Centre d’Information Minière (CIM) se doit d’être un cadre
permanent d’échanges et de partages d’informations dans le secteur minier.
Ce logo moderne et facile à mémoriser, illustre de façcon subtile et symbolique, les couches terrestres. Ces couches que tout explorateur de mines devra franchir pour atteindre la réussite, celle de découvrir enfin ce qu’il a tant cherché. C’est là même l’idéologie du CIM pour ce qui est des recherches dans le domaine minier. Les lignes représentent aussi une bibliothèque où sont rangés des manuels. En fin de recherches, on trouve un résultat, un trésor : défini ici par le point de la lettre
«i» du sigle CIM.
6
Le logo | Construction
Couches terrestres
Trajet de recherche du trésor, d’informations Décourverte du trésor, résultat de la recherche Le point du «i» de «information»
Sigle
Définition du sigle Police : Nexa
La zone de protection est définie par la lettre «m» du sigle CIM.
Aucune image et aucun texte ne doit figurer à l’intérieur de cette zone.
La taille du logo ne doit pas être
Le logo | Zone de protection et taille minimale
X
8
Le logo variera selon
l’environnement dans lequel il se trouve. Ces déclinaisons sont les seules à respecter. Aucune autre n’est envisageable.
Le logo | Déclinaisons
Les fondamentaux | Les interdits
utiliser le logo dans une autre
couleur que celle définie. déformer le logo
incliner le logo
changer la position des éléments du logo
baisser la densité des couleurs utiliser des fonds qui se confond- Ne pas :
10
Les couleurs de la palette sont inspirées des minerais et des couleurs du logotype.
Elles peuvent être utilisées sous forme de dégradés ou en aplat.
Ci-contre figurent les références couleurs selon les supports d’application :
- RVB/hexadécimales pour les supports
écrans, web, apllications mobiles et bureautiques,
- CMJN (quadrichromie) pour les supports print, édition, presse, affichage, etc.
Les fondamentaux | Les couleurs
Couleurs principales
Les couleurs transversales
Pantone 7752 c Pantone
432 c
R 50 V 62 B 72
R 241 V 160 B 31
R 10 V 57 B 89
R 4 V 84 B 115
R 241 V 147 B 65
R 241 V 95 B 34
C 03 M 42 J 100 N 00
C 100 M 78 J 40 N 32
C 96 M 64 J 36 N 17
C 02 M 50 J 84 N 00
C 00 M 78 J 100 N 00 R 208 V 175 B 33
C 78,67 M 64,43 J 52,35 N 43,59 C 20,61 M 27,49 J 100 N 0,29
# 323e48
# F29F05 # 023859 # 025373 # F29441 # F25C05
# d0af21
Les fondamentaux | Les typographies
NEXA est la typographie
principale de titrage, utilisée pour composer les accroches sur l’ensemble des supports de communication externe, print et digitaux. Elle peut être utilisée dans l’ensemble de ses différentes graisses existantes.
La Roboto est la typographie secondaire utilisée pour la composition des textes courants, en complément de NEXA, sur le print et le digital.
Enfin, l’Arial est la typographie recommandée pour les supports bureautiques.
Les licences d’utilisation des polices typographiques doivent impérativement être achetées avant utilisation.
NEXA : https:lien Roboto :
La Roboto est libre de droits et disponible gratuitement sur Google Fonts :
https://fonts.google.com/specimen/
Roboto
Thin AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Light AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Regular AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Medium AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Bold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Black AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789
Regular AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt0123456789 Italic AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt0123456789 Bold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt0123456789 Black AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt0123456789 Thin AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789
Light AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Book AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Bold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 XBold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789 Black AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp0123456789
Typographie principale Typographie secondaire
Typographie bureautique
NEXA ROBOTO
ARIAL
Univers graphique des supports de
communication
Les principes de construction | Le “split-screen”
Principe général
Le principe du split-screen divise la communication en 2 parties principales : l’une consacrée au visuel et l’autre au texte.
La zone texte est toujours sur fond blanc ou un fond plat. Seul les couleurs transversale peuvent être utiliser comme fond aplat.
Le split-screen
Il existe deux configurations possibles :
- configuration 50/50 avec deux zones de taille égale,
- configuration 2/3 - 1/3 avec une zone plus importante pour le visuel.
Cas particuliers
Dans certains cas très spécifiques, une configuration à 100%, sans visuel,peut être adoptée. Cette option doit cependant demeurer tout à fait exceptionnelle.
Zone visuel Zone texte
14
Les principes de construction | Le “split-screen”
Principe général
Le principe du split-screen divise la communication en 2 parties principales : l’une consacrée au visuel et l’autre au texte.
La zone texte est toujours sur fond blanc ou un fond aplat. Seul les couleurs transversales peuvent être utiliser comme fond aplat.
Le split-screen
Il existe deux configurations possibles :
- configuration 50/50 avec deux zones de taille égale,
- configuration 2/3 - 1/3 avec une zone plus importante pour le visuel.
Cas particuliers
Dans certains cas très spécifiques, une configuration à 100%, sans visuel,peut être adoptée. Cette option doit cependant demeurer tout à fait exceptionnelle.
Zone visuel Zone texte
Les principes de construction | Dimensions du logotype et des marges 01
La taille du logotype et des marges est directement déterminée par subdivision du plus petit côté du support de la communication.
Ce rapport diffère en fonction des différents formats (ex. : pour un format A4 standard, les marges sont égales à 1/10e de la largeur du document).
L’espace qui sépare le logo du filet est égale à la moitié du 1/10e du plus petit côté.
C’est ce même espace qui doit séparer le filet du corps de texte Le logotype est toujours calé dans l’angle inférieur gauche de la zone de texte.
16
Les principes de construction | Dimensions du logotype et des marges 02
La taille du logotype et des marges est directement déterminée par subdivision du plus petit côté du support de la communication.
Ce rapport diffère en fonction des différents formats (ex. : pour un format A4 standard, les marges sont égales à 1/10e de la largeur du document).
L’espace qui sépare le logo du filet est égale à la moitié du 1/10e du plus petit côté.
C’est ce même espace qui doit séparer le filet du corps de texte Le logotype est toujours calé dans l’angle inférieur gauche de la zone de texte.
Les principes de construction | Principe générique de positionnement des éléments 01
Sur les communications publicitaires les éléments se positionnent selon les règles suivantes :
• sur les formats verticaux, la zone visuel est toujours placée en haut et la zone texte blanche en bas,
• sur les formats horizontaux, la zone visuel est toujours placée à gauche et la zone texte blanche à droite,
• si la communication adopte la configuration 50/50, l’accroche et l’ensemble des textes complémentaires (body copy mentions légales, etc.) sont tous placés dans la partie texte blanche,
• si la communication adopte la configuration 2/3 - 1/3, l’accroche est placée dans la partie visuel et seuls les textes complémentaires (body copy, mentions légales, etc.) sont placés dans la partie texte blanche.
Le bloc des contacts, logo et le reste de la composition quelques soit la configuration est séparé par un filet.
ce dernier est de couleur gris sur fond
Portraits
18
Sur les communications publicitaires les éléments se positionnent selon les règles suivantes :
• sur les formats verticaux, la zone visuel est toujours placée en haut et la zone texte blanche en bas,
• sur les formats horizontaux, la zone visuel est toujours placée à gauche et la zone texte blanche à droite,
• si la communication adopte la configuration 50/50, l’accroche et l’ensemble des textes complémentaires (body copy mentions légales, etc.) sont tous placés dans la partie texte blanche,
• si la communication adopte la configuration 2/3 - 1/3, l’accroche est placée dans la partie visuel et seuls les textes complémentaires (body copy, mentions légales, etc.) sont placés dans la partie texte blanche.
Le bloc des contacts, logo et le reste de la composition quelques soit la configuration est séparé par un filet.
ce dernier est de couleur gris sur fond blanc et blanc sur les autres couleurs composantes l’univers coloriel de cette
charte. Paysage
Les principes de construction | Principe générique de positionnement des éléments 02
Les principes de construction | Placement de l’accroche et du corps de texte 03
L’accroche suit des règles
différentes selon la configuration du format. Retenons d’emblée quelle est toujours en NEXA. Elle peut être en 2 ou 3 lignes. Il est autorisé d’avoir recours à 2 graisses.
Accroche dans la zone texte (configuration 50/50)
L’accroche est placée en tête de la zone texte, calée sur la marge du haut et ferrée à gauche sur la marge de la zone. Sur fond blanc elle peut être en une des couleurs tranversales.
Accroche placée dans la zone visuel (configuration 2/3 - 1/3)
L’accroche est ferrée à gauche sur la marge de la zone, mais son positionnement vertical est variable de manière à pouvoir s’articuler le mieux possible avec le visuel d’arrière-plan et garantir sa bonne lisibilité.
Le corps de texte quant à lui est
Portrait
20
L’accroche suit des règles
différentes selon la configuration du format. Retenons d’emblée quelle est toujours en NEXA. Elle peut être en 2 ou 3 lignes. Il est autorisé d’avoir recours à 2 graisses.
Accroche dans la zone texte (configuration 50/50)
L’accroche est placée en tête de la zone texte, calée sur la marge du haut et ferrée à gauche sur la marge de la zone. Sur fond blanc elle peut être en les couleurs tranversales.
Accroche placée dans la zone visuel (configuration 2/3 - 1/3)
L’accroche est ferrée à gauche sur la marge de la zone, mais son positionnement vertical est variable de manière à pouvoir s’articuler le mieux possible avec le visuel d’arrière-plan et garantir sa bonne lisibilité.
Le corps de texte quant à lui est toujours placé dans la zone de texte. Retenons d’emblée quelle est
toujours en Roboto Paysage
Les principes de construction | Placement de l’accroche et du corps de texte 04
Les principes de construction | Placement de l’accroche et du corps de texte 05
22
Paysage | Fond aplat
Les principes de construction | Placement de l’accroche et du corps de texte 06
Les principes de construction | Utilisation du logo comme motif 01
Le logo dans sa composition est fait de plusieurs elements : une partie texte et une partie iconique.
Seule la partie superieure du compartiment iconique peut être utilisé isolément. (exemple à la page suivante)
24
Comme l’illustre ces exemples, Le logo peut bien être utlisé comme élément isolé.
Cette utilisation n’est possible que sur des fond à plats constitué des couleurs principales et alternatives présentées dans la présente charte.
Le logo dans ces cas doit être en blanc. Toute autres couleurs est à ecxlure.
Sauf exception cette règle ne s’applique pas à la configuration 2/3 avec fond à plat.
Principe de contruction | Utilisation du logo comme motif 02
Caborunt asperitatur, ommolor atiisci eturibus aut autasped quamusdae
Caborunt asperitatur, ommolor atiisci eturibus aut autasped quamusdae
Caborunt asperitatur, ommolor atiisci eturibus aut autasped quamusdae
Caborunt asperitatur, ommolor atiisci eturibus aut autasped quamusdae
Les documents peuvent revertir essentiellement 4 models :
• Fond à plat avec motif sans zone d’image image ( confère page précédente)
• Fond à plat avec motif avec zone d’image ( les règles du fond à plat s’appliquent)
• dans les documents seul la règle du 2/3 est applicable le 50/50 est donc exclut. Cette configuration peut être utilisé avec une zone de texte blanche ou une zone de texte aplat.
Les principes de construction | Document commercial 01
26
Les documents peuvent revertir essentiellement 4 models :
• Fond à plat avec motif sans zone d’image image ( confère page précédente)
• Fond à plat avec motif avec zone d’image ( les règles du fond à plat s’appliquent)
• dans les documents seul la règle du 2/3 est applicable le 50/50 est donc exclut. Cette configuration peut être utilisé avec une zone de texte blanche ou une zone de texte aplat.
Les principes de construction | Document commercial 02
Application
Supports
numériques
28
Supoorts numérique | Signature mail
Responsabilité +228 00 00 00 00 prenomno@cim.tg www.cim.tg
L’un des moyens de communication des administrations de nos jours est les échanges mailss, ceci pour faciliter la traçabilité.
Il est donc important d’ajouter les signatures mail afin de facilement identifier les personnes ou service qui sont en communication.
Supports numérique | Fond d’écran d’ordinateur 01
Ce fond d’écran est une composition de dégradé de bleues des couleurs transversales de CIM et du symbole du logo.
Il pourra être utilisé sur les support numériques tels qu’un ordinateur de post ou un ordinateur portable, afin de garder une harmonie et état d’esprit que dégage l’environnement du Centre d’Information Minière.
30
Supports numérique | Fond d’écran d’ordinateur 02
Ce fond d’écran garde la couleur or du logo dans lequel est incrustré le symbole.
Il pourra être utilisé sur les support numériques tels qu’un ordinateur de post ou un ordinateur portable, afin de garder une harmonie et état d’esprit que dégage l’environnement du Centre d’Information Minière.
Ce fond d’écran est une composition de dégradé de bleues des couleurs transversales de CIM et du symbole du logo.
Il pourra être utilisé sur les support numériques tels qu’un ordinateur de post ou un ordinateur portable, afin de garder une harmonie et état d’esprit que dégage l’environnement du Centre d’Information Minière.
Supports numérique | Fond d’écran d’ordinateur 03
Supports
imprimables
Les traditionnels échanges de couriers physiques restent toujours d’actualités. Pour permettre
d’harmoniser ce support, il est prévu un papier à en tête.
Ce dernier doit être utilisé pour les échanges de courier, les notes d’information ou touts autres documents administratifs
Police à utiliser pour le coprs de texte : Police : Arial Taille : 12 pt Interligne : 14
Police utilisée pour les contacts : Police : Nexa
Taille : 8 pt Interligne : 9
Supports imprimable | papier en-tête 01
model de papier à en tête.
34
Les traditionnels échanges de couriers physiques restent toujours d’actualités. Pour permettre
d’harmoniser ce support, il est prévu un papier à en tête.
Ce dernier doit être utilisé pour les échanges de courier, les notes d’information ou touts autres documents administratifs
Supports imprimable | Papier en-tête 02
Exemple de note sur 2 pages
Supports imprimable | Carte de visite
5,5 cm
9 cm Recto Verso
Police à utiliser pour Les Noms et prénoms : Police : Nexa (bold NOM) Taille : 10 pt
Police utilisée pour les contacts :
36
Supports imprimable | Enveloppe A4
Police utilisée pour les contacts : Police : Nexa
Taille : 12 pt Interligne : 14
Supports imprimable | Enveloppe DL
Police utilisée pour les contacts : Police : Nexa
Taille : 12 pt Interligne : 14
38
Supports imprimable | Cachets
T. +228 XX XX XX XX
@. xxxx@cim.com W. cim.com BP. XXXX XX Police utilisée pour les contacts :
Police : Nexa
Selon que la police principale est indisponible, on peut toute fois utiliser ARIAL.
Goodies
40
Goodies | T shirt
Il peuvent être proposé en de différente couleurs en application des règles définies dans cette charte
Goodies | Polo
Il peuvent être proposé en de différente couleurs en application des règles définies dans cette charte
42
Goodies | Casquette
Il peuvent être proposé en de différente couleurs en application des règles définies dans cette charte
Goodies | Stickers et pin’s
44