Mauron AntoineCharte graphique - Décembre 2012M   A auron   ntoine
Charte graphique                                                 -                                                 Sommair...
Fonction etcondition d’utilisation                                                 Qu’est-ce qu’une charte graphique ?    ...
01                                       Logotype                         Le logo         et ses valeurs                  ...
01                                       Logotype          Déclinaisons  colorimétriques                                  ...
01                                       Logotype     Zone de protection                                                  ...
01                                       Logotype            Couleur de fond                                              ...
01                                         Logotype  Taille et proportions                                                ...
01                                       LogotypeRègles de composition                                                    ...
01                                       Logotype         Favicon et bouton            de l’application                   ...
02                                       Couleurs           Gamme principale                                              ...
02                                       Couleurs                                   Gamme              complémentaire     ...
03                                         Typographie  Typographie du logo                                               ...
03                                         TypographieTypographie des textes   d’accompagnements                          ...
04     Ensemble graphique                Usages              Facebook                                                     ...
04     Ensemble graphique                Usages                Twitter                                                    ...
04                                       Usages   Déclinaisons papier :         Papier en-têteLe destinataire est situé de...
04                                       Usages               Cartes de visite                                            ...
04                                       Usages             Tickets d’entrée                                              ...
04                                       Usages Goodies : Voitures de  fonction, Clés usb,    Sacs recyclables            ...
05                                       Interdits         Il est interdit de...Changer les couleurs du logo              ...
06                                     Notice         Liste des différents                 fichiers joints                ...
Charte graphique Antoine Mauron
Prochain SlideShare
Chargement dans…5
×

Charte graphique Antoine Mauron

2 714 vues

Publié le

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 714
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
144
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Charte graphique Antoine Mauron

  1. 1. Mauron AntoineCharte graphique - Décembre 2012M A auron ntoine
  2. 2. 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
  3. 3. Fonction etcondition 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
  4. 4. 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 aCharte graphique - musée des confluences_ 1. Logotype 5
  5. 5. 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 100Charte graphique - musée des confluences_ 1. Logotype 6
  6. 6. 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 aCharte graphique - musée des confluences_ 1. Logotype 7
  7. 7. 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
  8. 8. 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 : 30x30pxCharte graphique - musée des confluences_ 1. Logotype 9
  9. 9. 01 LogotypeRè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 31pxSur un grand écran, le logo ne peut pas être placé à moins Sur un smartphone, le logo doitde 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
  10. 10. 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 57pxCharte graphique - musée des confluences_ 1. Logotype 11
  11. 11. 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 C0M0J0N0Charte graphique - musée des confluences_ 2. Gamme colorée 12
  12. 12. 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 30Charte graphique - musée des confluences_ 2. Gamme colorée 13
  13. 13. 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 0123456789Charte graphique - musée des confluences_ 3. Typographie 14
  14. 14. 03 TypographieTypographie 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 porumgotham 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 porumgotham light italic ; corps = X quae volore dolore num quas dolupta nimilluptate earchicte volent(pour X=10pt, notes = 10pts) Titres de paragrapheIntertitresgotham light ; corps = 2X(pour X=10pt, intertitres = 20pts) Sous-titresSous-titresgotham book ; corps = 3,5X(pour X=10pt, sous-titres = 35pts) TitresTitresgotham medium ; corps = 5X(pour X=10pt, titres = 50pts)Charte graphique - musée des confluences_ 3. Typographie 15
  15. 15. 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
  16. 16. 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
  17. 17. 04 Usages Déclinaisons papier : Papier en-têteLe destinataire est situé demanière à ce que lorsque le 97mmpapier sera plié en 3 et misdans une enveloppe 11x22cm, 120mmil apparaisse dans la petite Mme La Destinataire 11 Carré Léon Blum,fenêtre. 38090 VILLEFONTAINEL’objet du message est situéjuste avant le premier plidu papier, ainsi lorsque le Objet : Lorem ipsum dolor sit ametdestinataire sort la lettre, il adirectement 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
  18. 18. 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 FonctionCharte graphique - musée des confluences_ 4. Différents usages 19
  19. 19. 04 Usages Tickets d’entrée Tickets 2 souches permettant l’entrée au musée, à l’échelle 1. Taille : 117,5x55mmCharte graphique - musée des confluences_ 4. Différents usages 20
  20. 20. 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
  21. 21. 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 typographieCharte graphique - musée des confluences_ 5. Les interdits 22
  22. 22. 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.epsCharte graphique - musée des confluences_ 6. Mode d’emploi 23

×