1. Mauron AntoineCharte graphique - Dcembre 2012M A auron ntoine

2. Charte graphique - SommaireChapitres01. Logo Prsentation 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 colore Gamme principale (p. 12) Gamme annexe (p. 13)03. Typographie Typographie du logo (p. 14) Typographie des textes daccompagnement (p. 15)04. Diffrents usages Ensemble graphique Twitter, Facebook (p. 16-17) Sur papier (en-tte, 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 - muse des confluences 3 3. Fonction etcondition dutilisation Quest-ce quune charte graphique ? La charte graphique (ou normes graphiques) est un document de travail qui contient lensemble des rgles fondamentales dutilisation des signes graphiques qui constituent lidentit graphique dune organisation, dun projet, dune entreprise. Le terme vient du latin charta qui signifie papier et qui en franais a pris le sens de loi, rgle fondamentale (Wikipdia) Elle sadresse diffrents types de publics (graphistes, excutifs, secrtaires, charg de communication, journalistes, et toutes les personnes qui auraient besoin de communiquer au nom ou en faveur dune entreprise, association, etc...) Elle dtaille les conditions dutilisation du logo, ainsi que toutes les informations techniques ncessaires afin de prserver lunivers graphique du muse des confluences et den respecter au mieux les valeurs.Charte graphique - muse des confluences4 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 larchitecture trs contemporaine du muse par la gomtrisation de la typographie. Les formes gomtriques composant les lettres symbolisent aussi comme des motifs, et sont issus de formes de bases que lon retrouve partout et ce depuis toujours. De plus, le logo a deux niveaux de lecture qui lui confrent une dimension smantique supplmentaire et ont pour vocation dinterpeller le visiteur. Le lecteur identifie dabord 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 lespace est suffisamment grand, et lautre version carre utiliser dans la plupart des cas. a x x b b x x aCharte graphique - muse des confluences_ 1. Logotype5 5. 01 LogotypeDclinaisonscolorimtriques Le logo pourra tre dclin en plusieurs versions selon lusage. Une version couleur dite standard, une version en niveaux de gris, et une version noir et blanc. (Les dclinaisons sont identiques pour la version carre du logo.)#A64417 R 166 V 68 B 23C 25 M 79 J 100 N 20#00A19AR 0 V 161 B 154La version couleur peut tre utilise dans la majorit des cas. C 80 M 10 J 45 N 0#575756R 87 V 87 B 86C 0 M 0 J 0 N 80 #878787R 135 V 135 B 135C 0 M 0 J 0 N 60 Les versions niveau de gris ou noir et blanc peuvent tre#FFFFFFutilises pour des documents internes pour rduire le cot des R 255 V 255 B 255 impressions par exemple. C0M0J0N0 #000000 R0V0B0 C 0 M 0 J 0 N 100Charte graphique - muse des confluences_ 1. Logotype 6 6. 01 Logotype Zone de protection La zone de protection correspond la zone situe autour du logotype dans laquelle aucun lment (graphique ou texte) ne peut apparatre. la taille de la zone dexclusion est relative la taille du logotype, et la taille de son cartouche.x xx xaa aCharte graphique - muse des confluences_ 1. Logotype 7 7. 01 LogotypeCouleur 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 apparatra sans contour. Cela garantie alors la lisibilit du logo en toute situation. Exemples dutilisation :Charte graphique - muse des confluences_ 1. Logotype8 8. 01 LogotypeTaille et proportions La taille du logo dpendra de la rsolution de lcran et de lutilisation qui en sera faite. 418px 541px85px 110px75px 219px 45px75px 378px 77px50px75px 50px30px 75px 30pxSur un site web pour grand cran (1024x768)Sur un site web pour smartphone (640x480) (Rsolution adapte la plupart des utilisateurs)(Rsolution adapte la plupart des smartphones) Ceci correspond la taille standard du logo. Ceci correspond la taille standard du logo.Taille maximale : 541x110pxTaille maximale : 418x85pxTaille minimale : 378x77px Taille minimale : 219x45pxTaille max. version carre : 75x75px Taille max. version carre : 75x75pxTaille min. version carre : 50x50px Taille min. version carre : 30x30pxCharte graphique - muse des confluences_ 1. Logotype9 9. 01 LogotypeRgles de compositionCertaines marges doivent tre respectes lorsque le logoest utilis. Ces marges diffrent si le logo est utilis sursmartphone ou sur un grand cran.Elles sont utiles pour viter que le logo ne soit tronqu ou quilne soit coll trop prs du bord dune image. 6x6xx 45px31pxSur un grand cran, le logo ne peut pas tre plac moinsSur un smartphone, le logo doitde 6x des bords suprieurs ou infrieurs. tre centr dans lcran.x tant lcart entre la typographie et le cartouche. 31px de marge de chaque ct6x = 80px.45px du haut.Charte graphique - muse des confluences_ 1. Logotype10 10. 01 Logotype Favicon et boutonde lapplicationsmartphone Conception dun favicon et dune icne de lancement pour application smartphone. Le favicon une taille fixe de 16x16 px.16px16px Licne de lancement de lapplication pour smartphone une taille fixe de 57x57 px.57px57pxCharte graphique - muse des confluences_ 1. Logotype11 11. 02 Couleurs Gamme principaleLunivers graphique du Muse des Confluences reposesur une gamme colore divise en 2 parties, une gammeprincipale utiliser dans la majorit des cas, et une gammecomplmentaire.Ces couleurs rappellent la fois les sciences humaines(ocre, marron) et les sciences naturelles (bleu, vert) ainsique larchitecture du muse (gris, blanc, bleu) pour le ctmtallique et vitr.La gamme principale est compose de 2 couleurs et de blanc.Ce sont les couleurs du logotype. Les couleurs pantone sontissues du nuancier Pantone Solid Coated.Ocre (Pantone 174 C)Bleu (Pantone Green C)#A64417 #00A19AR 166 V 68 B 23 R 0 V 161 B 154C 25 M 79 J 100 N 20C 80 M 10 J 45 N 0Gris (Pantone Cool Gray 10 C) Blanc#878787 #FFFFFFR 135 V 135 B 135 R 255 V 255 B 255C 0 M 0 J 0 N 60C0M0J0N0Charte graphique - muse des confluences_ 2. Gamme colore 12 12. 02 Couleurs GammecomplmentaireVoici la gamme complmentaire, qui sharmonise avec lagamme principale et diversifie lunivers du muse. Elle peuttre utilise 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 70C 50 M 70 J 80 N 70 BeigeJaune #F8F2AB#FFAD33 R 248 V 242 B 177R 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 58R 183 V 234 B 209 C 71 M 27 J 93 N 12C 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 - muse des confluences_ 2. Gamme colore 13 13. 03 TypographieTypographie du logo Le nom du logotype (CONFLUENCES) t cr partir dune typographie spcifique non utilisable pour dautres textes. La baseline (Muse des confluences) est compose de la typographie DIN. Cest une typographie linale assez simple, qui permet une lecture aise.DIN regularabcdefghijklmnopqrstuvwxyz& ( ) ! ? * $ % @ oe...ABCDEFGHIJKLMNOP Q R ST U V W0123456789Charte graphique - muse des confluences_ 3. Typographie14 14. 03 TypographieTypographie des textes daccompagnements Pour les textes daccompagnements sur supports papiers et web, la typographie utilise sera GOTHAM, utilise dans ses versions medium, book, light et light italic uniquement. La Gotham est une typographie de type linale, dcline dans plusieurs graisses diffrentes, ce qui permet de bien hirarchiser les informations. De plus, elle est assez sobre et peut permettre un confort de lecture pour les longs pavs de texte. Modalits dutilisation :Texte courantParcillam 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, lgendesParcillam 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 - muse des confluences_ 3. Typographie 15 15. 04 Ensemble graphiqueUsagesFacebook Le compte Facebook du Muse des Confluences se voit dot dun ensemble graphique respecter. Il comprend un avatar et une page de couverture. 200px200px Avatar Page de couverture Taille maximale 200x200px. Taille : 851x315px Incrustation donnant un aperu de la page internet.Charte graphique - muse des confluences_ 4. Diffrents usages16 16. 04 Ensemble graphiqueUsagesTwitter Le compte Twitter du Muse 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 200pxAvatarTaille maximale 200x200px.Page de couverture.Incrustation donnant un aperu de lensemble graphique.Charte graphique - muse des confluences_ 4. Diffrents usages 17 17. 04 Usages Dclinaisons papier : Papier en-tteLe destinataire est situ demanire ce que lorsque le 97mmpapier sera pli en 3 et misdans une enveloppe 11x22cm, 120mmil apparaisse dans la petiteMme La Destinataire11 Carr Lon Blum,fentre.38090 VILLEFONTAINELobjet du message est situjuste avant le premier plidu papier, ainsi lorsque le Objet : Lorem ipsum dolor sit ametdestinataire sort la lettre, il adirectement lobjet du message Lyon, le 17 Dcembre,sous les yeux.Madame, Monsieur,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus dui necsem condimentum quis consectetur mauris congue. Donec ut sem augue, vitaedictum purus. Aliquam erat volutpat. Pellentesque vitae malesuada sem. In hachabitasse platea dictumst. Donec sed erat ante, non ullamcorper nunc. Maecenas35mmnec sodales nisl. Sed vel velit mauris. Nam quis gravida eros. Vestibulum semper 35mmtempor 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 tinciduntlacinia, dignissim in neque. Maecenas euismod nisl at eros aliquam dictum. Sed atsodales sem. Suspendisse eget egestas odio.Pellentesque quis purus dolor, sit amet luctus mauris. Morbi nec tortor nisi, velposuere sem. Aliquam sapien nunc, aliquam euismod mattis non, vestibulum alorem. Morbi at turpis justo. Donec lobortis semper rhoncus. Aliquam luctus semnon 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 anteipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donecmolestie vehicula sapien, sed sollicitudin est pellentesque nec. Aenean blandit nisivitae ipsum consectetur vel pellentesque tellus pretium. Integer rutrum male-suada tortor a fermentum. Nam at quam arcu. Cordialement, John Doe, Signature.Charte graphique - muse des confluences_ 4. Diffrents usages18 18. 04 Usages Cartes de visite Dclinaison en carte de visite personnalise pour chaque employ, lchelle 1. Taille : 85x54mm RectoVerso M. John Doe FonctionCharte graphique - muse des confluences_ 4. Diffrents usages19 19. 04 Usages Tickets dentre Tickets 2 souches permettant lentre au muse, lchelle 1. Taille : 117,5x55mmCharte graphique - muse des confluences_ 4. Diffrents usages20 20. 04 Usages Goodies : Voitures defonction, Cls usb,Sacs recyclables Quelques produits drivs (goodies) pour affirmer limage du muse, faire de la publicit, et quiper le personnel tels que des cls usb, des sacs recyclables, ou encore des voitures de fonction.Charte graphique - muse des confluences_ 4. Diffrents usages21 21. 05 Interdits Il est interdit de...Changer les couleurs du logoChanger la couleur du cartoucheDformer de manirenon homothtique Supprimer la baseline Changer la langue Supprimer le cartouche ou la typographieCharte graphique - muse des confluences_ 5. Les interdits22 22. 06 Notice Liste des diffrents fichiers joints Vous trouverez ci-joint diffrents fichiers exploitables du logo : - favicon.gif (Favicon utiliser en 16x16px) - icone_smartphone.eps (Icne pour smartphone 57x57px) - logo_carre_couleur_72dpi.jpg (Logo en basse rsolution) - logo_carre_couleur_RVB.eps - logo_carre_couleur_CMJN.eps (Version carr couleur print) - logo_carre_couleur_RVB.jpg (Haute rsolution) - logo_carre_nvgris_72.eps (Logo en niveau de gris) - logo_carre_nvgris_300.eps - logo_couleur_72.jpg (Version rectangle basse rsolution) - logo_couleur_300.jpg (Version rectangle haute rsolution) - 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 - muse des confluences_ 6. Mode demploi23