Charte graphique.

Transcription

1 Charte graphique

2 Sommaire Préface Partie 1 > Le logo 1.1 Logotype p Zones de protection p Principes d utilisation du logo p Couleurs p Logotype en noir&blanc p Variantes du logotype selon la couleur de fond p Variantes interdites p. 11 Partie 2 > La typographie 2.1 Typographies p Typographies de substitution p. 15 Partie 3 > Les GRANDS PRINCIPES DE LA CHARTE GRAPHIQUE 3.1 Couleurs par thématique p Principes d utilisation des éléments p. 18 Partie 4 > Les outils de communication 4.1 Info chantier p La lettre d information du nouvel écoquartier de Cran-Gevrier p Affiches / Flyers p Présentation Powerpoint p. 26 Le présent manuel présente le logotype Les Passerelles, l environnement dans lequel il doit évoluer et tous les paramètres qui vont constituer son identité visuelle. Elle a pour objectif de créer une cohérence entre les différentes publications. Le logo Cette partie du manuel décrit le système de déclinaison du logotype et donne toutes les informations permettant de le reproduire et de l utiliser en préservant son intégrité. Le logo ne doit jamais être redessiné. Il est impératif d utiliser les fichiers mis à la disposition des utilisateurs. Les typographies Cette partie du manuel présente les typographies préconisées pour la communication, interne et externe, ainsi que leurs règles d utilisation. Le respect de ces instructions assure la nécessaire homogénéité de l image. Les outils de communication Cette unité de présentation permet de créer chez les correspondants un réflexe de reconnaissance immédiate. L ensemble de ces paramètres, logotype, supports, typographies, mises en page, constitue l identité graphique Les Passerelles. Ce programme d identification visuelle élaboré avec et pour Les Passerelles afin de répondre aux besoins de communication ne peut être efficace que si sa mise en œuvre est rigoureuse. Pour la suite de cette charte graphique, nous distinguons : - les documents administratifs : powerpoint, etc. - les documents de type informations promotionnelles : affiches, flyers, annonces publicitaires, etc. - les documents éditoriaux : lettre d information, plaquettes, livrets pédagogiques, etc. Porteur d image 2 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

3 Partie 1 > Le logo 1.1 > Logotype 4 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

4 Partie 1 > Le logo 1.2 > Zones de protection Le logotype a une zone de protection, un blanc tournant, égal à la hauteur du «L» : Les Passerelles. Les éléments avoisinants n entrent pas dans cette zone. On laisse au minimum cet espace de respiration. 1.3 > Principes d utilisation du logo Si Les Passerelles est l émetteur Le logo sera toujours placé en haut à gauche du document en respectant la zone de protection. Si Les Passerelles est co-émetteur Le logo sera toujours placé avec les autres logos, de la même hauteur, en respectant la zone de protection. Exemple Exemple Zones de protection respectées Zones de protection non respectées Si meliora dies, ut vina, poemata reddit, scire velim, chartis pretium quotus arroget annus. scriptor abhinc annos centum qui decidit Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo. Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. 6 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

5 Partie 1 > Le logo 1.4 > Couleurs 1.5 > Logotype en noir&blanc Il est recommandé d utiliser les couleurs du logotype figurant ci-dessous pour tous les supports de communication. Pour toute utilisation print, le logotype est en quadrichromie. Il est en RVB pour une utilisation web. Une version pantone est disponible pour une autre utilisation. Version quadrichromie CMJN > CMJN > CMJN > CMJN > CMJN > CMJN > Version rvb RVB > RVB > RVB > RVB > RVB > RVB > Version pantone PANTONE Cool Gray 5 C PANTONE 376 C PANTONE 1595 C PANTONE 3125 C PANTONE Black 7 C PANTONE 675 C 8 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

6 Partie 1 > Le logo 1.6 > Variantes du logotype selon la couleur de fond 1.7 > Variantes interdites Logo quadrichromie Ci-dessous quelques exemples de déclinaisons interdites. > sur fond blanc > sur fond noir > sur fond coloré RDIT INTE RDIT INTE RDIT INTE RDIT INTE Logo noir&blanc > sur fond blanc > sur fond noir > sur fond illustré Tout autre déclinaison du logo, qui ne serait pas conforme aux variantes proposées en p.10 est interdite Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

7 Partie 2 > La typographie 2.1 > Typographies La typographie choisie pour le logotype Les Passerelles est Aaargh Normal. Pour accompagner cette typographie, on utilise la typographie Frutiger. Cette typographie a été choisie pour ses qualités de lisibilité, d efficacité et de commodité. C est une police simple, sans empattement. Elle bénéficie d un éventail de graisses particulièrement adaptées pour transmettre une information claire et hiérarchisée. La lisibité est la qualité première de la typographie Frutiger qu elle soit exploitée en bas de casse (minuscules) ou en capitales (majuscules). Frutiger Regular &é» ( è!çà) Light Italic 12 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

8 Partie 2 > La typographie 2.1 > Typographies (suite) 2.2 > Typographies de substitution Bold Condensed Pour une utilisation administrative : Si vous ne disposez pas de cette police sur votre ordinateur et/ou que vous n arrivez pas à l installer, il est conseillé d utiliser une police de substitution : la police Frutiger pourra être remplacée par la police Verdana disponible sur tous les ordinateurs. Bold Italic Black Black Italic Light Condensed Bold Condensed Black Condensed Verdana Regular &é» ( è!çà) Italic Bold Bold Italic 14 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

9 Partie 3 > Les grands principes de la charte graphique 3.1 > Couleurs par thématique Les différentes thématiques de l écoquartier Les Passerelles se retrouvent à travers les couleurs constitutives de la charte (vert, gris, orange, bleu, vert et fuschia). Chaque couleur utilisée a une signification spécifique, il est donc nécessaire d être vigilant à leur utilisation. Vert La thématique principale de l écoquartier étant le développement durable, le vert (couleur représentative de cette thématique) est une couleur récurrente sur les supports promotionnels et peut servir de fond dominant pour certains supports éditoriaux. Gris Première pierre, construction. Orange événement, énergie, dynamique de la ville. Bleu Eau, lien, projet, politique. Fuschia Dimension sociale, humain. Gris foncé Couleur neutre de complément permettant d aborder toute autre thématique. 16 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

10 Partie 3 > Les grands principes de la charte graphique 3.2 > Principes d utilisation des éléments Typographie : Exemple Bloc incliné : Forme vague : La typographie choisie pour l ensemble de la communication est Frutiger avec un choix multiple de déclinaisons développés en 2.1. Carré vert (ex. 1) : Pour les documents promotionnels, on utilise un carré vert. Celui-ci est de la hauteur du rectangle contenant le logo. Toujours positionné en haut à gauche du document. Titre (ex. 2) : ex. 1 ex. 2 Principe utilisé sur tous les supports éditoriaux. Pente avec une inclinaison de 4. Aplat utilisant l une des couleurs thématiques du logo. Exemple Principe pour le bloc marque des supports éditoriaux, que l on peut retouver sur certains éléments intérieurs comme sur la lettre d information. La forme de la vague est définie selon le modèle ci-dessous (fournie avec la charte graphique en fichier illustrator). Sa forme est montante au début, puis descendante. Sur une double page, la première partie de vague qui apparaît est la n 1, que ce soit sur la page de gauche ou la page de droite. La partie n 2 ne peut apparaître en page de droite que si la partie n 1 est utilisée en page de gauche. Blanc, gris foncé (couleur de la charte graphique) ou blanc avec contour gris foncé (épaisseur voir selon support). Page simple Double page 2 Bloc carré incliné (ex. 3) : 1 Page simple Inclinaison de 14, ce bloc couleur appelé deuxième titre peut être utilisé en bas à droite selon la thématique du support (à l exception de la couverture de la lettre d information). Carré de taille identique au carré vert quand celui-ci se trouve seul. ex. 3 Lettre d information Exemples Repères de page Bandeau du bas (ex. 4) : Blanc ou avec une partie gris fonçé pour les lettres d information (ou éventuellement plaquettes). Composé du site internet de la ville de Cran- Gevrier et des logos porteurs du projet sur la partie droite. Affiche ex. 4 Lettre d information 18 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

11 Partie 4 > Les outils de communication 4.1 > Info chantier L info chantier a vocation à donner de l actualité immédiate sur le chantier ainsi que de l information service notamment en cas de risque de perturbation ou de nuisance. Il peut être édité en recto simple ou en recto- verso selon la quantité d information à donner. Ce support reprend les principes édictés de mise en page des supports éditoriaux en privilégiant des variations dans la lecture grâce à la vague, au biseau et aux couleurs. Une (recto) La Une reprend le type de bloc-titre de la lettre d information avec un article principal et un bloc deuxième titre qui pourra être soit une deuxième information, soit en complément à l article principal. Cette Une a une dominante verte, qui ne correspond pas nécessairement à la thématique chantier mais qui apporte un rappel systématique de la dimension environnementale du projet par rapport à une actualité parfois sensible. Verso Le verso reprend un visuel en entrée traité avec la vague ainsi qu une partie en colonne biseautée comme la dernière de couverture de la lettre d information, permettant encore une fois de donner des rendez-vous ou des brèves de chantier. Les autres nouvelles pourront être traitées avec leurs codes couleurs thématiques. 20 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

12 Partie 4 > Les outils de communication 4.2 > La lettre d information du nouvel écoquartier de Cran-Gevrier La lettre d information du nouvel écoquartier est un vecteur qui a vocation à donner une information de fond sur les thématiques et les avancées du projet, notamment en donnant la parole aux acteurs de celui-ci. Programmée 2 à 3 fois par an, cette lettre offre une pagination minimale de 8 pages avec une couverture de type magazine, une page 2 réservée à l édito et au sommaire et une dernière de couverture offrant un bandeau pour des brèves et des rendez-vous agendas. Laissant une part importante aux visuels qui peuvent être traités de différentes manières (rectangles, bords en vague, fonds perdus, détourage), la mise en page offre des courbes et des variations en termes de grilles qui permettent des entrées multiples de lecture et donne un côté ludique à l ensemble en lui conservant une élégance affirmée et une relative sobriété. Pages intérieures Couverture Dos de couverture La couverture de la lettre d information a pour couleur dominante le gris foncé, couleur neutre de complément. Le logotype a une place importante sur la couverture pour permettre sa bonne identification au projet. Les sujets traités dans la lettre d information sont annoncés sous forme de renvois illustrés et colorés en fonction de la thématique. La thématique principale de la lettre ou le titre est obligatoirement écrit en blanc, gris foncé (couleur de la charte graphique) ou blanc avec contour gris foncé (épaisseur 2 pt) selon l image de fond utilisée. Le dos de la lettre d information est utilisé pour traiter les news et l agenda dans un bloc couleur gris foncé. Un visuel vient composer l ensemble de la page. Le texte sur ce dos decouverture est obligatoirement écrit en blanc dans un bloc gris foncé. Une couleur par page selon les thématiques abordées. Le sommaire reprend les thématiques et leurs couleurs. Selon la mise en page, plusieurs articles traitant de la même thématique et donc utilisant la même couleur peuvent se retrouver sur une double page. < Exemples de double page traitant de la même thématique et donc utilisant une seule couleur. 22 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

13 Partie 4 > Les outils de communication 4.1 > Affiches / Flyers Sur chaque support de communication, le logo, accompagné d un carré vert à sa droite, se trouve ferré en haut à droite de l affiche / flyer. On trouvera toujours au bas de l affiche / flyer un bandeau de référence incluant le site internet de la ville de Cran-Gevrier ainsi que les logos des porteurs du projet. Selon la thématique abordée sur l affiche / flyer, un bloc couleur deuxième titre peut être utilisé en bas à droite de l affiche / flyer. Le texte de ce bloc couleur est obligatoirement blanc. Pour une campagne d image Pour les campagnes visuelles, on utilise uniquement un grand visuel qui viendra composer l ensemble de l affiche / flyer. Descriptif : - titre : blanc, gris foncé (couleur de la charte graphique) ou blanc avec contour gris foncé (épaisseur 5 pt). - BANDEAU DU BAS : blanc. - BLOC DE COULEUR (ici fuschia) : même dimension que le carré vert, inclinaison de 14. Pour une campagne d information Pour les campagnes d information, on utilise un fond coloré en adéquation avec la thématique abordée. Descriptif : - TEXTE : blanc, ferré à gauche. - BANDEAU DU BAS : blanc. - BLOCS DE COULEUR : bloc du haut en couleur et incliné à 14. Blocs du dessous avec visuels. Dimension de ces 3 carrés plus petit que le carré vert. Version à l italienne Version à l italienne Version à la française Version à la française 24 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

14 Partie 4 > Les outils de communication 4.4 > Présentation PowerPoint Exceptionnellement pour la partie administrative du type PowerPoint, les couleurs ne correspondent pas aux thématiques des sujets abordés, mais permettent de structurer les parties des documents en déclinant une succession de chapitres. Couverture Rappel typographique : Si vous ne disposez pas de la police Frutiger sur votre ordinateur ou que vous n arrivez pas à l installer, il est conseillé d utiliser la police de substitution : la police Verdana disponible sur tous les ordinateurs. Sommaire Parties Chaque une de chapitre possède un titre en blanc sur un fond de couleur (prolongé sur la droite), et en dessous, un sous-titre de la couleur du chapitre. Le tout centré dans la page et ferré à gauche. Le sommaire reprend les titres de chacun des chapitres du document PowerPoint. Chaque chapitre, ou partie, se compose d un numéro de page et d un titre, dans la couleur du chapitre. Le numéro de page se trouve à gauche du nom du chapitre, ferré à droite. Le titre est ferré à gauche à une distance de 0,60 cm du numéro de page. 26 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

15 Partie 4 > Les outils de communication 4.4 > Présentation PowerPoint (suite) Titre Sous-titre Visuel Voici un exemple de mise en page de une de chapitre. Les sous-titres sont placés en haut, à la droite du cartouche contenant le logo. Ils doivent être sur fond de couleur, qui se prolonge vers la droite, comme illustré ci-dessus. Lorsqu un visuel est présent, il convient de le placer sans contour, à gauche ou à droite du texte. En-dessous du visuel, centré, doit se trouver la légende dans la couleur du chapitre en cours. Il est possible de mettre des visuels en pleine page. Dans ce cas sa légende se trouve dans un bloc blanc qui se prolonge sur la droite et légèrement transparent, en bas du visuel. À la gauche de ce bloc doit se trouver un carré de la couleur du chapitre en cours. Ce carré doit être positionné à partir du premier tiers de la largeur de la page. 28 Charte graphique Les Passerelles - Juin 2011 Charte graphique Les Passerelles - Juin

16 Cette charte graphique a été réalisée en juin 2011 par Pour toute question nous vous invitons à prendre contact avec : Service communication Ville de Cran-Gevrier