Charte graphique · Charte graphique. 2 1. L’isotype 1.1 Les propositions 1.2 L’isotype retenu...

Post on 14-Jul-2020

1 views 0 download

Transcript of Charte graphique · Charte graphique. 2 1. L’isotype 1.1 Les propositions 1.2 L’isotype retenu...

Charte graphique

2

1. L’isotype

1.1 Les propositions1.2 L’isotype retenu

3. Les recommandations

3.1 L’imagotype3.2 La zone de protection3.3 Les tailles minimales3.4 L’utilisation sur fond de couleur et photo3.5 L’application par les partenaires

2. Le logotype

2.1 Définition de la typographie choisie2.1 La police d’accompagnement2.2 La police de substitution

4. Les mises en situation

4.1 Pour la papeterie4.2 Pour le multimédia

SOMMAIRE

3

L’isotype

1.

4

1.1 Les propositions

5

1.2 L’isotype retenu

L’isotype est la représentation symbolique de la marque « ublane ». L’orientation prise est la suivante :

Nombre d’or NébuleuseComètes

6

1.2.1 Les couleurs

L’imagotype (isotype et logotype) ne peut être utilisé qu’avec les couleurs principales et secondaires définies dans ce présent document.

À défaut de pouvoir être utilisé avec ses couleurs d’origine, l’imagotype devra soit être utilisé en blanc soit en noir (si l’environnement qui l’entoure le permet, cf. 3.4).Son utilisation en couleur monochrome y est également identique.

En conséquence, aucune autre couleur n’est autorisée à être utilisée sur l’imagotype, y compris les couleurs complémentaires définies à la suite de ce document.

Couleurs principales

Pantone Red 032 C

Pantone Black C

R : 247V : 50B : 63

C : 0M : 88J : 67N : 0

Hexa : #F7323F

R : 46V : 41B : 37

C : 65M : 61J : 62N : 74

Hexa : #2E2925

7

Des couleurs secondaires sont définies et sont à respecter dans tous les documents exclusivement dédiés à l’usage d’Ublane.Elles ont pour objectif de créer une cohérence entre tous les documents et créations artistiques qui seront à réaliser, en interne ou en externe, par les prestataires.

Couleurs secondaires

Pantone 207 C

Pantone 177 CPantone Cool Gray 7 C

R : 171V : 0B : 50

C : 21M : 100J : 68N : 17

Hexa : #AB0032

R : 255V : 129B : 136

C : 0M : 63J : 32N : 0

Hexa : #FF8188

R : 153V : 152B : 153

C : 41M : 32J : 32N : 11

Hexa : #999899

8

Des couleurs complémentaires sont également définies dans le but d’enrichir les créations visuelles.Aucunes autres couleurs que celles-ci ne peuvent être utilisées dans une utilisation exclusivement dédiées à Ublane.

Elles sont toutefois à utiliser avec modération.

Couleurs complémentaires

Pantone 7724 C

Pantone 3262 C Pantone 123 C

R : 0V : 148B : 109

C : 84M : 15J : 69N : 2

Hexa : #00946D

R : 0V : 187B : 179

C : 84M : 0J : 39N : 0

Hexa : #00BBB3

R : 255V : 198B : 39

C : 0M : 25J : 86N : 0

Hexa : #FFC627

9

1.2.2 Les déclinaisons couleurs autorisées (et monochromie)

Correspond également à la déclinaison en niveau de gris

10

1.2.3 Le pictogramme associé

L’imagotype défini précédemment représente également le pictogramme associé à l’identité visuelle d’Ublane.

11

Le logotype

2.

12

2.1 Définition de la typographie choisie

Le logotype est la représentation typographique de la marque « ublane », conçue de façon originale avec une

police de caractères spéciale.

Police de caractère de base (Century Gothic) :

ublaneAprès modifications :

13

2.2 La police d’accompagnement

La police d’accompagnement permet d’harmoniser la lecture en n’utilisant qu’une seule police qui est plus claire et adaptée à la lecture sur tous types de supports.Que ce soit pour les titres, les accroches, le corps de texte, liés exclusivement à une utilisation pour Ublane, les styles de police présents dans cette charte graphique devront être respectés.

Montserrat Light

AaBbGgJjABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Montserrat Regular

AaBbGgJjABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Montserrat Semi Bold

AaBbGgJjABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Montserrat Bold

AaBbGgJjABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

14

2.3 La police de substitution

En revanche, une police de substitution est mise en place uniquement dans le cas où le terminal diffusant le support visuel ne permet pas d’utiliser la police d’accompagnement précédemment définie (essentiellement pour la bureautique).

Arial Regular

AaBbGgJjABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Arial Bold

AaBbGgJjABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

15

Les recommandations

3.

16

3.1 L’imagotype

L’imagotype est l’assemblage de l’isotype et du logotype précédemment définis.

Imagotype en position verticale Imagotype en position horizontale

17

3.2 La zone de protection

En aucun cas la zone de confort de l’imagotype ne doit être franchie par quelconque élément graphique. Il est impératif de respecter cette règle pour ne pas altérer la lisibilité et la visibilité de l’imagotype.Cette zone de protection correspond exactement à la hauteur de l’un des deux principaux ronds centraux situés dans l’imagotype.

x

x

2x

2x

2x 2x

2x

2x

2x 2x 2x

2x

18

3.3 Les tailles minimales

Les tailles minimales de l’imagotype sont définies de telle sorte à ce que celui-ci reste le plus identifiable et lisible possible à une petite échelle.

Il est strictement interdit d’utiliser l’imagotype sous ces valeurs définies. Il est en revanche possible d’utiliser le pictogramme définit précédemment (cf.

1.2.3) si l’espace d’utilisation de l’imagotype demande à être sous ces tailles minimales.

12,5 mm

6 mm

19

3.4 L’utilisation sur fond de couleur et photo

20

3.5 L’application par les partenaires

6 mm

21

Les mises en situation

4.

22

4.1 Pour la papeterie

Papier A4 & Carte de visite

23

4.1 Pour le numérique

Icône d’application Android

24

Icône d’application iOS

25

Favicon (site web)