3. Charte graphique
-
Sommaire
Chapitres
01. Logo
• Présentation du logo (p. 5)
• Couleurs du logo (p. 6)
• Zone de protection et couleur de fond (p. 7-8)
• Taille et proportions (p. 9-10)
• Favicon et application smartphone (p. 11)
02. Gamme colorée
• Gamme principale (p. 12)
• Gamme annexe (p. 13)
03. Typographie
• Typographie du logo (p. 14)
• Typographie des textes d’accompagnement (p. 15)
04. Différents usages
• Ensemble graphique Twitter, Facebook (p. 16-17)
• Sur papier (en-tête, carte de visite, billets) (p. 18 à 20)
• Goodies (voitures, clé usb, sacs recyclables...) (p. 21)
05. Les interdits (p. 22)
06. Liste des fichiers joints (p. 23)
Charte graphique - musée des confluences 3
4. Fonction et
condition d’utilisation
Qu’est-ce qu’une charte graphique ?
La charte graphique (ou 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 » (Wikipédia)
Elle s’adresse à différents types de publics (graphistes,
exécutifs, secrétaires, chargé de communication, journalistes,
et toutes les personnes qui auraient besoin de communiquer
au nom ou en faveur d’une entreprise, association, etc...)
Elle détaille les conditions d’utilisation du logo,
ainsi que toutes les informations techniques nécessaires
afin de préserver l’univers graphique du musée
des confluences
et d’en respecter au mieux les valeurs.
Charte graphique - musée des confluences 4
5. 01
Logotype
Le logo
et ses valeurs
Ce logo symbolise la rencontre entre les sciences humaines et
les sciences naturelles par ses couleurs.
Il rappelle aussi l’architecture très contemporaine du musée par
la géométrisation de la typographie. Les formes géométriques
composant les lettres symbolisent aussi comme des motifs, et
sont issus de formes de bases que l’on retrouve partout et ce
depuis toujours.
De plus, le logo a deux niveaux de lecture qui lui confèrent une
dimension sémantique supplémentaire et ont pour vocation
d’interpeller le visiteur. Le lecteur identifie d’abord des formes,
puis lit la baseline, et il comprend alors que ces formes sont en
fait de la typographie.
Le logo existe en deux versions.
Une version à utiliser sur grand écran, lorsque l’espace est
suffisamment grand, et l’autre version carrée à utiliser dans la
plupart des cas.
a
x
x
b b
x
x
a
Charte graphique - musée des confluences_ 1. Logotype 5
6. 01
Logotype
Déclinaisons
colorimétriques
Le logo pourra être décliné en plusieurs versions selon l’usage.
Une version couleur dite standard, une version en niveaux
de gris, et une version noir et blanc. (Les déclinaisons sont
identiques pour la version carrée du logo.)
#A64417
R 166 V 68 B 23
C 25 M 79 J 100 N 20
#00A19A
R 0 V 161 B 154 La version couleur peut être utilisée dans la majorité des cas.
C 80 M 10 J 45 N 0
#575756
R 87 V 87 B 86
C 0 M 0 J 0 N 80
#878787
R 135 V 135 B 135
C 0 M 0 J 0 N 60
Les versions niveau de gris ou noir et blanc peuvent être
#FFFFFF utilisées pour des documents internes pour réduire le coût des
R 255 V 255 B 255 impressions par exemple.
C0M0J0N0
#000000
R0V0B0
C 0 M 0 J 0 N 100
Charte graphique - musée des confluences_ 1. Logotype 6
7. 01
Logotype
Zone de protection
La zone de protection correspond à la zone située autour du
logotype dans laquelle aucun élément (graphique ou texte) ne
peut apparaître.
la taille de la zone d’exclusion est relative à la taille du logotype,
et à la taille de son cartouche.
x
x
x
x
a
a
a
Charte graphique - musée des confluences_ 1. Logotype 7
8. 01
Logotype
Couleur de fond
Le logo sera utilisé avec un cartouche blanc dans tout les cas.
Si le fond est blanc, alors le cartouche aura un contour gris
60%, sur un fond coloré ou une photo, le cartouche apparaîtra
sans contour.
Cela garantie alors la lisibilité du logo en toute situation.
Exemples d’utilisation :
Charte graphique - musée des confluences_ 1. Logotype 8
9. 01
Logotype
Taille et proportions
La taille du logo dépendra de la résolution de l’écran et de
l’utilisation qui en sera faite.
418px
541px
85px
110px
75px 219px
45px
75px
378px
77px
50px 75px
50px
30px
75px
30px
Sur un site web pour grand écran (1024x768) Sur un site web pour smartphone (640x480)
(Résolution adaptée à la plupart des utilisateurs) (Résolution adaptée à la plupart des smartphones)
Ceci correspond à la taille standard du logo. Ceci correspond à la taille standard du logo.
Taille maximale : 541x110px Taille maximale : 418x85px
Taille minimale : 378x77px Taille minimale : 219x45px
Taille max. version carrée : 75x75px Taille max. version carrée : 75x75px
Taille min. version carrée : 50x50px Taille min. version carrée : 30x30px
Charte graphique - musée des confluences_ 1. Logotype 9
10. 01
Logotype
Règles de composition
Certaines marges doivent être respectées lorsque le logo
est utilisé. Ces marges diffèrent si le logo est utilisé sur
smartphone ou sur un grand écran.
Elles sont utiles pour éviter que le logo ne soit tronqué ou qu’il
ne soit collé trop près du bord d’une image.
6x
6x
x
45px
31px
Sur un grand écran, le logo ne peut pas être placé à moins Sur un smartphone, le logo doit
de 6x des bords supérieurs ou inférieurs. être centré dans l’écran.
x étant l’écart entre la typographie et le cartouche. 31px de marge de chaque côté
6x = 80px. 45px du haut.
Charte graphique - musée des confluences_ 1. Logotype 10
11. 01
Logotype
Favicon et bouton
de l’application
smartphone
Conception d’un favicon et d’une icône de lancement pour
application smartphone.
Le favicon à une taille fixe de 16x16 px.
16px
16px
L’icône de lancement de l’application pour smartphone à une
taille fixe de 57x57 px.
57px
57px
Charte graphique - musée des confluences_ 1. Logotype 11
12. 02
Couleurs
Gamme principale
L’univers graphique du Musée des Confluences repose
sur une gamme colorée divisée en 2 parties, une gamme
principale à utiliser dans la majorité des cas, et une gamme
complémentaire.
Ces couleurs rappellent à la fois les sciences humaines
(ocre, marron) et les sciences naturelles (bleu, vert) ainsi
que l’architecture du musée (gris, blanc, bleu) pour le côté
métallique et vitré.
La gamme principale est composée de 2 couleurs et de blanc.
Ce sont les couleurs du logotype. Les couleurs pantone sont
issues du nuancier Pantone Solid Coated.
Ocre (Pantone 174 C) Bleu (Pantone Green C)
#A64417 #00A19A
R 166 V 68 B 23 R 0 V 161 B 154
C 25 M 79 J 100 N 20 C 80 M 10 J 45 N 0
Gris (Pantone Cool Gray 10 C) Blanc
#878787 #FFFFFF
R 135 V 135 B 135 R 255 V 255 B 255
C 0 M 0 J 0 N 60 C0M0J0N0
Charte graphique - musée des confluences_ 2. Gamme colorée 12
13. 02
Couleurs
Gamme
complémentaire
Voici la gamme complémentaire, qui s’harmonise avec la
gamme principale et diversifie l’univers du musée. Elle peut
être utilisée ponctuellement pour certains documents.
Marron Violet
#432918 #432918
R 67 V 41 B 24 R 67 V 41 B 24
C 50 M 70 J 80 N 70 C 50 M 70 J 80 N 70
Beige Jaune
#F8F2AB #FFAD33
R 248 V 242 B 177 R 255 V 173 B 51
C 6 M 0 J 43 N 0 C 0 M 39 J 84 N 0
Vert Vert clair
#55843A #B7EAD1
R 85 V 132 B 58 R 183 V 234 B 209
C 71 M 27 J 93 N 12 C 33 M 0 J 25 N 0
Gris clair
#C6C7C8
R 198 V 199 B 200
C 0 M 0 J 0 N 30
Charte graphique - musée des confluences_ 2. Gamme colorée 13
14. 03
Typographie
Typographie du logo
Le nom du logotype (CONFLUENCES) à été créé à partir d’une
typographie spécifique non utilisable pour d’autres textes.
La baseline (Musée des confluences) est composée de la
typographie DIN. C’est une typographie linéale assez simple,
qui permet une lecture aisée.
DIN regular
abcdefghijklmnopqr
stuvwxyz
& ( ) ! ? * $ ’ % £ @ é è ç à oe
ù«»...
ABCDEFGHIJKLMNO
P Q R ST U V W
0123456789
Charte graphique - musée des confluences_ 3. Typographie 14
15. 03
Typographie
Typographie des textes
d’accompagnements
Pour les textes d’accompagnements sur supports papiers et
web, la typographie utilisée sera GOTHAM, utilisée dans ses
versions medium, book, light et light italic uniquement.
La Gotham est une typographie de type linéale, déclinée
dans plusieurs graisses différentes, ce qui permet de bien
hiérarchiser les informations. De plus, elle est assez sobre et
peut permettre un confort de lecture pour les longs pavés de
texte.
Modalités d’utilisation :
Texte courant Parcillam dolupti velit porae dolora ne poresed ut pore non porum
gotham light ; corps = X
quae volore dolore num quas dolupta nimilluptate earchicte volent
(ex : pour X=10pt)
Notes, légendes Parcillam dolupti velit porae dolora ne poresed ut pore non porum
gotham light italic ; corps = X
quae volore dolore num quas dolupta nimilluptate earchicte volent
(pour X=10pt, notes = 10pts)
Titres de paragraphe
Intertitres
gotham light ; corps = 2X
(pour X=10pt, intertitres = 20pts)
Sous-titres
Sous-titres
gotham book ; corps = 3,5X
(pour X=10pt, sous-titres = 35pts)
Titres
Titres
gotham medium ; corps = 5X
(pour X=10pt, titres = 50pts)
Charte graphique - musée des confluences_ 3. Typographie 15
16. 04
Ensemble graphique Usages
Facebook
Le compte Facebook du Musée des Confluences se voit doté
d’un ensemble graphique à respecter. Il comprend un avatar
et une page de couverture.
200px
200px
Avatar Page de couverture
Taille maximale 200x200px. Taille : 851x315px
Incrustation donnant un aperçu de la page internet.
Charte graphique - musée des confluences_ 4. Différents usages 16
17. 04
Ensemble graphique Usages
Twitter
Le compte Twitter du Musée des Confluences a lui aussi un
ensemble graphique qui lui est propre. Il comprend un avatar,
une page de couverture et une image de fond.
200px
200px
Avatar
Taille maximale 200x200px. Page de couverture.
Incrustation donnant un aperçu de l’ensemble graphique.
Charte graphique - musée des confluences_ 4. Différents usages 17
18. 04
Usages
Déclinaisons papier :
Papier en-tête
Le destinataire est situé de
manière à ce que lorsque le 97mm
papier sera plié en 3 et mis
dans une enveloppe 11x22cm,
120mm
il apparaisse dans la petite Mme La Destinataire
11 Carré Léon Blum,
fenêtre. 38090 VILLEFONTAINE
L’objet du message est situé
juste avant le premier pli
du papier, ainsi lorsque le Objet : Lorem ipsum dolor sit amet
destinataire sort la lettre, il a
directement l’objet du message À Lyon, le 17 Décembre,
sous les yeux. Madame, Monsieur,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus dui nec
sem condimentum quis consectetur mauris congue. Donec ut sem augue, vitae
dictum purus. Aliquam erat volutpat. Pellentesque vitae malesuada sem. In hac
habitasse platea dictumst. Donec sed erat ante, non ullamcorper nunc. Maecenas
35mm nec sodales nisl. Sed vel velit mauris. Nam quis gravida eros. Vestibulum semper 35mm
tempor orci, quis scelerisque lectus varius quis. Mauris pharetra vulputate conse-
quat. Integer viverra, erat sit amet eleifend pulvinar, massa justo rhoncus tortor,
eget venenatis quam tortor ut nunc. Maecenas dui ipsum, rhoncus vitae tincidunt
lacinia, dignissim in neque. Maecenas euismod nisl at eros aliquam dictum. Sed at
sodales sem. Suspendisse eget egestas odio.
Pellentesque quis purus dolor, sit amet luctus mauris. Morbi nec tortor nisi, vel
posuere sem. Aliquam sapien nunc, aliquam euismod mattis non, vestibulum a
lorem. Morbi at turpis justo. Donec lobortis semper rhoncus. Aliquam luctus sem
non orci suscipit consequat. Pellentesque a enim non magna consectetur iaculis.
Fusce gravida eleifend velit, eu sollicitudin diam accumsan eu. Etiam felis elit,
faucibus nec facilisis sed, imperdiet quis ipsum.
Duis hendrerit tempus lectus, eu lacinia dolor congue sit amet. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec
molestie vehicula sapien, sed sollicitudin est pellentesque nec. Aenean blandit nisi
vitae ipsum consectetur vel pellentesque tellus pretium. Integer rutrum male-
suada tortor a fermentum. Nam at quam arcu.
Cordialement, John Doe,
Signature.
Charte graphique - musée des confluences_ 4. Différents usages 18
19. 04
Usages
Cartes de visite
Déclinaison en carte de visite personnalisée pour chaque
employé, à l’échelle 1.
Taille : 85x54mm
Recto
Verso
M. John Doe
Fonction
Charte graphique - musée des confluences_ 4. Différents usages 19
20. 04
Usages
Tickets d’entrée
Tickets 2 souches permettant l’entrée au musée, à l’échelle 1.
Taille : 117,5x55mm
Charte graphique - musée des confluences_ 4. Différents usages 20
21. 04
Usages
Goodies : Voitures de
fonction, Clés usb,
Sacs recyclables
Quelques produits dérivés (goodies) pour affirmer l’image du
musée, faire de la publicité, et équiper le personnel tels que
des clés usb, des sacs recyclables, ou encore des voitures de
fonction.
Charte graphique - musée des confluences_ 4. Différents usages 21
22. 05
Interdits
Il est interdit de...
Changer les couleurs du logo Changer la couleur du cartouche Déformer de manière
non homothétique
Supprimer la baseline Changer la langue Supprimer le cartouche
ou la typographie
Charte graphique - musée des confluences_ 5. Les interdits 22
23. 06
Notice
Liste des différents
fichiers joints
Vous trouverez ci-joint différents fichiers exploitables du logo :
- favicon.gif (Favicon à utiliser en 16x16px)
- icone_smartphone.eps (Icône pour smartphone 57x57px)
- logo_carre_couleur_72dpi.jpg (Logo en basse résolution)
- logo_carre_couleur_RVB.eps
- logo_carre_couleur_CMJN.eps (Version carré couleur print)
- logo_carre_couleur_RVB.jpg (Haute résolution)
- logo_carre_nvgris_72.eps (Logo en niveau de gris)
- logo_carre_nvgris_300.eps
- logo_couleur_72.jpg (Version rectangle basse résolution)
- logo_couleur_300.jpg (Version rectangle haute résolution)
- logo_couleur_RVB.eps (Version rectangle couleur web)
- logo_couleur_CMJN.eps (Version rectangle couleur print)
- logo_nvgris_72.eps (Version rectangle niveau de gris)
- logo_nvgris_300.eps
Charte graphique - musée des confluences_ 6. Mode d’emploi 23
