Identité visuelle AS ESPCI

38
IDENTITÉ VISUELLE Charte graphique Association sportive de l’ESPCI - 1 mars 2016 - Julien Barrier - ESPCI Promotion 133

Transcript of Identité visuelle AS ESPCI

Page 1: Identité visuelle AS ESPCI

IDENTITÉ VISUELLECharte graphique

Association sportive de l’ESPCI - 1 mars 2016 - Julien Barrier - ESPCI Promotion 133

Page 2: Identité visuelle AS ESPCI

2

Page 3: Identité visuelle AS ESPCI

Ce document a été créé pour uniformiser les formes decommunication au sein de l’Association sportivede l’École supérieure de physique et de chimie industriellesde la Ville de Paris.

La communication est notre atout le plus important. Ainsi, nous nous devons de créer et maintenir une image de marque. Bien l’utiliser, c’est s’assurer que le BDS reste reconnaissable, et conserve sa valeur. Cette identité visuelle est un schéma composé de plusieurs éléments qui, assemblés, forment un style cohérent, distinctif, qui rend immédiatement l’AS ESPCI identifiable.

3

Page 4: Identité visuelle AS ESPCI

TYPOGRAPHIELOGOTYPECOULEURSCO-BRANDINGDÉCLINAISONS POUR L’IMPRESSIONDÉCLINAISONS WEBUNIVERS DE MARQUE

SOMMAIRE

59

1721232931

4

Page 5: Identité visuelle AS ESPCI

TYPOGRAPHIE

5

Page 6: Identité visuelle AS ESPCI

Dénomination de l’association

Depuis sa création en juin 1963, l’association porte le nom deAssociation sportive de l’École supérieure de physique et de chimie industrielles de la Ville de Paris.On portera une attention particulière aux majuscules et aux accents : Association, École, Ville et Paris sont les seuls mots qui portent une majuscule. La première lettre de École est toujours accentuée.Ce nom ne sera jamais traduit dans la perspective du rayonnement international de l’association en tant qu’entité de l’École.Dans certains cas, on pourra choisir une abbréviation à ce nom :Association sportive de l’ESPCI ou encore AS ESPCI.Depuis le 1er mars 2016, un nom de marque a été déposé :BDS ESPCI Paris. L’expression Bureau des sports pourra être utilisée pour la communication interne mais doit toujours apparaître après la dénomination (ou l’abbréviation) de l’association.

Utiliser le nom

Dans la plupart des cas, on utilisera la dénomination Association sportive de l’ESPCI. Lorsque l’on désignera l’équipe plus que l’association, on pourra utiliser BDS ESPCI Paris.

Le nom complet s’écrit:- soit sur une ligne ;- soit sur deux lignes :Association sportive de l’École supérieurede physique et de chimie industrielles de la Ville de Paris- soit sur trois lignes :Association sportivede l’École supérieure de physique et de chimie industriellesde la Ville de ParisOn ne tentera aucune autre variation lorsque le nom sera écrit seul.

6

Page 7: Identité visuelle AS ESPCI

La typographie - communication globale

La typographie « Montserrat » s’utilisera seule ou en titre, en jouant sur les différentes graisses.Elle sera accompagnée pour les paragraphes de la typo « Helvetica ».

Montserrat Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–. … €$ @

Montserrat Semi Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–−. … €$ @

Helvetica Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–−. … €$ @

Helvetica Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–−. … €$ @

7

Page 8: Identité visuelle AS ESPCI

La typographie - Communication spéciale

La typographie « Indian Lives » pourra être utilisée pour des évènements spéciaux, pour une communication à usage interne à l’École ou pour accompagner des images.

Sur le web uniquement, on utilisera la typographie « Helvetica Neue » ou à défaut, « Open Sans »

Indian Lives Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–. … €$ @

Helvetica Neue Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–. … €$ @

Helvetica Neue Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–. … €$ @

Open Sans Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–. … €$ @

Open Sans Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234456789« » () !? -–. … €$ @

8

Page 9: Identité visuelle AS ESPCI

LOGOTYPE

9

Page 10: Identité visuelle AS ESPCI

10

Ce logo est une marque déposée auprès de l’INPI

Page 11: Identité visuelle AS ESPCI

Définition du logotype

La couleurLe logotype de l’Association sportive de l’ESPCI se présente en deux couleurs : bleu et bordeaux.C’est une référence à la Ville de Paris, dont les couleurs sont le bleu et le rouge. Ces couleurs sont gage de crédi-bilité et apportent une touche d’originalité.

Le blasonLa forme du logo est le signe d’une vie de campus. Nous affirmons la richesse de nos activités étudiantes par ce blason.

L’étoilePlacée en haut du blason, l’étoile est directement inspirée de l’étoile de PSL. Nous affirmons ainsi notre apparte-nance à l’Université d’excellence Paris Sciences et Lettres et notre affiliation à PSL sport. Au delà de PSL, cette étoile représente l’universalité, l’excellence et la performance et résume l’ambition de l’Association.

La marqueSur ce logo, la dénomination ESPCI apparaît plus grande que la mention BDS. Ceci nous sert à être identifiables rapidement à l’extérieur. En outre, les élèves-ingénieurs et étudiants de l’École s’identifient rapidement à ce logo ouvert à tous. La police de BDS et Paris est Montserrat, qui correspond à notre charte graphique. ESPCI est écrit avec la police « Ethos », qui rappelle la charte graphique de l’école.

11

Page 12: Identité visuelle AS ESPCI

LOGOTYPE DE RÉFÉRENCE

LOGOTYPE NOIRréservé à l’impression noir et blanc

LOGOTYPE BLANCréservé aux fonds colorés ou contrastés

LARGEUR MINIMALE11mm en impression, 50px sur écran

12

Page 13: Identité visuelle AS ESPCI

Logotype - espace de respiration

X

20% de X 20% de X

10% de X

10% de X

13

Page 14: Identité visuelle AS ESPCI

Logotype - utilisationIl est possible d’utiliser le logotype blanc sur des fonds colorés.

Il est également possible d’utiliser le logotype sur une image lorsque cela paraît adéquat, en cherchant toujours à optimiser sa lisibilité (en modi-fiant le contraste ou la netteté de l’image).

On veillera toujours à utiliser une versior RVB pour l’affichage sur écran et une version CMJN pour l’impression.

14

Page 15: Identité visuelle AS ESPCI

Logotype - conditions d’utilisationPour garantir l’identité et la cohérence, toute reproduction du logo doit être faite avec un maximum de rigueur.Une courte liste de ce que l’on ne se permettra pas avec le logo :

- Ne pas inverser les couleurs ;- Ne pas changer la typo et les symboles ;- Ne pas intervertir les éléments ;- Ne pas tracer de contour autour du logo ;- Ne pas accoler de forme ou de motif au logo ;- Ne pas passer le logo au trait ;- Ne pas déformer (tout ou partie) du logo ;- Ne pas enlever d’éléments ;- Ne pas changer les couleurs ;- Ne pas changer la proportion des éléments ;- Ne pas utiliser en motif ;- Ne pas utiliser ton sur ton ;- Ne pas utiliser simplement le bandeau « ESPCI » ;- Ne pas changer la typographie interne au logo ;- Ne pas changer le texte du logo ;- Ne pas flouter ;- Ne pas incruster d’image dans le logo ;- Ne pas accoler au logo un texte sans utiliser la zone de confort ;- Ne pas modifier l’opacité du logo ;- Ne pas placer le logotype dans une forme ou un objet ;- etc.

15

Page 16: Identité visuelle AS ESPCI

16

Page 17: Identité visuelle AS ESPCI

COULEURS

17

Page 18: Identité visuelle AS ESPCI

Couleurs pricipalesLa gamme des couleurs de l’Association sportive de l’ESPCI est composée de trois teintes principales : bleu, bordeaux et beige. Ces couleurs sont à utiliser en priorité.

Les références CMJN sont réservées à l’impression, les références RVB à l’affichage sur écran et les références Pantone © sont à utiliser pour la peinture.

Bleu BDS

R33 V68 B120C73 M43 J0 N53#215578Pantone 7687 C

Bordeaux BDS

R128 V0 B51C0 M100 J60 N50#800033Pantone 208 C

Beige BDS

R210 V162 B99C0 M23 J53 N18#d2a263Pantone 7407 C

18

Page 19: Identité visuelle AS ESPCI

Gris foncé

R60 V60 B60C0 M0 J0 N76Pantone 7 C

Bleu foncé ESPCI

R21 V47 B78C100 M80 J40 N40Pantone 281 C

Bleu ESPCI

R100 V185 B233C60 M10 J0 N0Pantone 2915 C

Gris clair

R204 V204 B204C0 M0 J0 N20Pantone 3 C

Blanc

R255 V255 B255C0 M0 J0 N0

Couleurs secondairesDes couleurs supplémentaires sont utilisées en aplat (cartouches, fonds) ou pour certains textes. Celles-ci viennent enrichir la charte et donner du contraste, de la variété et permettent de mieux identifier les documents. Elles sont basées sur la charte graphique de l’École de 2016.

19

Rouge ESPCI

R228 V0 B70C0 M94 J64 N0Pantone 192 C

Page 20: Identité visuelle AS ESPCI

20

Page 21: Identité visuelle AS ESPCI

CO-BRANDING

21

Page 22: Identité visuelle AS ESPCI

Coexistence du BDS avec ses partenairesSuivant les contrats et partenariats que le BDS a avec ses partenaires, la coexistence des logos peut être indispensable.On veillera à toujours placer le logo de l’AS ESPCI à l’extrémité droite de la ligne présentant les logos. Lorsque l’AS ESPCI organise un évène-ment, le logo sera 110% plus grand que les logos partenaires. En cas de coexistence avec l’ESPCI ou PSL sport (lorsque seuls ces deux logos sont présents), on respectera les proportions suivantes :

A

50% de A

A

50% de A

40% de A

20% de A20% de A20% de A

A

22

PA R I S

1882

40% de A

PA R I S

1882

Page 23: Identité visuelle AS ESPCI

DÉCLINAISONSPOUR L’IMPRESSION

23

Page 24: Identité visuelle AS ESPCI

Styles de titres

TITRE PRINCIPAL et sa baseline

pour le titre d’un document.Montserrat Regular, 30pt, bleu BDS, une partie en semi-bold, tout en majusculestitre toujours accompagné d’une baseline en Montserrat Regular, 18pt, bordeaux, alignée sur la droite du titre.

TITRE DE PARTIEtitre de section d’un documentMontserrat Semi-bold, 30pt, bleu BDS, tout en majuscule.

Titre dynamiquepour un document plus petit (flyer, 1 page, etc.)Montserrat Regular, 24pt, noir, peut comporter du semi-bold.

Titre de section de premier niveauMontserrat Regular, 18pt, couleur bleu BDS

Titre de section de second niveauMontserrat Regular, 14pt, couleur beige BDS

Titre de section de troisième niveauMontserrat Semi Bold, 12pt, couleur bordeaux BDS

24

Page 25: Identité visuelle AS ESPCI

Styles de paragraphes

Paragraphe d’introduction à un document

Lorem ipsum dolor sit amet,mea cibo impedit tibique ei.Ea pri aeterno percipitur neglegentur. Ex ignotaappetere partiendo per, est cu eius persequeris.Sea quod illumet.

Entête en Montserrat Regalar 18pt, bleu BDS. paragraphe qui suit en Helvetica Regular, 12pt, noir.

Paragraphe mis en valeur

Lorem ipsum dolor sit amet, mea ciboimpedit tibi que ei. Ea pri aeternopercipitur neglegentur.

Paragraphe en Montserrat Semi bold, 12pt, noir, précédé d’une bordure bordeaux BDS de 2pt d’épaisseur.

Paragraphe classique

Helvitica Regular, 12pt, noir. On justifiera tous les paragraphes, dans la mesure du possible.

25

Page 26: Identité visuelle AS ESPCI

Autres styles

Listes

On écrira les listes comme l’impose la typographie franmaise : avec un tiret au début et un point virgule à la fin de chaque ligne. Un point sur la dernière ligne. On n’utilisera jamais de puces. Helvetica Regular, 12pt, noir.

− Lorem ipsum ;− dolor ;− sit amet.

Tableaux

Les tableaux sont centrés sur la page. L’entête est en Montserrat Semi-bold, 11pt, bleu BDS, centrée, majuscules. Elle est soulignée par une ligne bleu ESPCI de 1pt d’épaisseur.Les autres lignes sont en Helvetica Regular, 12pt, noir, alignées à gauche. Les chiffres seront centrés. Ces lignes sont soulignées par une ligne bleu ESPCI de 0,5pt d’épaisseur.

LOREM IPSUM

Dolor

Amet

Mea

Sit

Cibo

Tibique ei

FLUCTUAT

Nec Mergitur

O Tempora

O Mores

26

Page 27: Identité visuelle AS ESPCI

Format des pages

Les documents conséquents comporteront une page de garde composée d’un titre principal, de sa baseline, alignés à 12mm du bord droit, centré verticalement sur la page, avec le logo BDS aligné à 12mm du bord gauche et 12mm du bas.

Sur les autres pages, les marges seront de 58mm à l’intérieur, de 12mm à l’extérieur et en bas, de 30mm en haut.Un pied de page rappellera la dénomination de l’association, le logo et éventuellement des informations de contact.

Pour les documents moins volumineux, une entête sera constituée de la façon suivante :

Suivant la taille du document, on adaptera la taille du texte. On pourra écrire le nom de l’association sur une ligne ; le texte sera centré verticalement sur le logo.Les marges d’impressions seront égales en tout bord.Le pied de page sera le même que pour des documents volumineux.

27

Association sportivede l’ESPCI ParisType de document

Page 28: Identité visuelle AS ESPCI

28

Page 29: Identité visuelle AS ESPCI

DÉCLINAISONS WEB

29

Page 30: Identité visuelle AS ESPCI

Styles de paragraphes

H1 HeadingH2 Heading

H3 Heading

TAG/CATÉGORIE

Paragraphe d’introduction

Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integersapien felis, fringilla at odio ut,cursus eleifend elit.

DESKTOP>1200

DESKTOP>992 & <1200

TABLETTE>768 & <992

SMARTPHONE>480 & <768

34 px

26 px

16 px

16 px

16 px

15 px

30 px

24 px

14 px

14 px

15 px

15 px

34 px

26 px

16 px

16 px

16 px

16 px

40 px

26 px

17 px

17 px

19 px

19 px

MontserratSemi Bold

MontserratSemi BoldMontserratSemi Bold

Helvetica NeueBold

Helvetica NeueBoldHelvetica NeueRegular

30

Page 31: Identité visuelle AS ESPCI

UNIVERSDE MARQUE

31

Page 32: Identité visuelle AS ESPCI

Biseaux

Lorsque l’on placera des images sur des affiches formelles, des dépliants, des dossiers de presse, on appliquera un bi-seau sur les images lorsqu’elles sont placées sur fond bleu BDS.

On pourra ajouter un sur le bas de l’image un bandeau comportant le titre du document (blanc, sans contour), à condition que celui-ci soit centré sur la ligne de base de l’image et que ce bandeau couvre toute la surface possible à sa droite :

Association sportivede l’ESPCI ParisType de document

32

Page 33: Identité visuelle AS ESPCI

33

Éléments structuraux

Lorsqu’une image est placée sur un document entier, on placera le logo de l’Association dans des éléments structuraux qui pourront être de différentes formes :

Dans le troisième modèle, on pourra placer deux images, à condition qu’un lien puisse être fait entre les deux images sans qu’elles n’en aient en apparence. L’une des deux images sera prise avec un grand champ tandis que l’autre se concen-trera sur le détail, zoomé, d’un sportif.

Page 34: Identité visuelle AS ESPCI

Applats de couleur

Lorsque l’on placera des images sur usne pleine page, on pourra chercher à accentuer l’intérêt visuel pour l’image. On placera sur cette image des applats de couleur bleu et rouge ou bordeaux. Dans la suite Adobe, on définira le mode de fusion des formes en multiplication (ou 40% d’opacité). Les applats rappelleront les biseaux.

34

Page 35: Identité visuelle AS ESPCI

35

Icônes et pictogrammes

Pour compléter des documents, on pourra utiliser les icônes du pack « Entypo », développées par Daniel Bruce (sous licence creative commons 4.0 ) - www.entypo.com.

Page 36: Identité visuelle AS ESPCI

36

Page 37: Identité visuelle AS ESPCI

37

Page 38: Identité visuelle AS ESPCI

Association sportive de l’École supérieurede physique et de chimie industrielles de la Ville de Paris

10 rue Vauquelin75 231 Paris cedex 0501 40 79 45 [email protected]

© 2016 - AS ESPCI - Julien Barrier - promotion [email protected]