Identité Visuelle
École normale supérieure de Lyon
Création juin 2003. version 1.2
L'identité visuelle de L'ENS Lyon
se définit tout d'abord par un
texte, reprenant l'intitulé complet
de l'école ainsi que son sigle, et sa
position particulière sur la plus
haute "marche" du podium.
école
normale
supérieure
de lyon
ENS
LYON
Typographie utilisée :
The-mix plain
The-mix bold plain
L'identité visuelle de L'ENS Lyon
ne supprime ni ne remplace le logo
officiel. Celui-ci devra toujours figurer
au moins une fois sur tous documents
imprimés. Il apparaîtra en général
proche des coordonnées de l'Ecole.
(Voir exemple d'utilisation page 24)
ECOLE NORMALE SUPERIEURE DE LYON
école
normale
supérieure
de lyon
ENS
LYON
La "marche" définit dans la page
2 zones de couleurs contrastées.
La proportion de ces 2 zones peut être
variable en fonction des besoins.
Elle définit aussi une grille de base
pour la mise en page (voir en page 6 ).
école
normale
supérieure
de lyon
ENS
LYON
école
normale
supérieure
de lyon
ENS
LYON
école
normale
supérieure
de lyon
ENS
LYON
école
normale
supérieure
de lyon
ENS
LYON
Dans certains cas extrèmes le texte
"école normale supérieure de lyon"
pourra être séparé de la "marche" ou
même suprimé. Il convient cependant
d'éviter le plus possible ces formes
limites de déclinaison.
ENS
école
LYON
normale
supérieure
de lyon
ENS
école
LYON
normale
supérieure
de lyon
ENS
LYON
ENS
LYON
Z
Zone de marges principales.
Zone de marges secondaires.
Y
xx
Zone de contenu principal, titre, Zone de contenu
sous titre, texte, schémas, images... secondaire texte
ou images.
Z Z
Y Y
école
normale
supérieure
de lyon
ENS
LYON
Identité visuelle
Exemple de mise en page 1
Some HTML code doesn't have a visible representation in a browser.
For example, comment tags don't appear in browsers. However, it can
be useful while you're creating a page to be able to select such
invisible elements, edit them, move them.
Dreamweaver allows you to specify whether it shows icons marking the location
of invisible elements in the Design view of the Document window. To show or
hide marker icons for invisible elements, choose View > Visual Aids > Invisible
Elements. Showing invisible elements lets you select them and change their
properties in the Property inspector; hiding them lets you see the page closer to
the way it will appear in a browser. Note that showing invisible elements may
slightly change the layout of a page, moving other elements by a few pixels, so
for precision layout, hide the invisible elements.
école
normale
supérieure
de lyon
ENS
LYON
Identité visuelle
Exemple de mise en page 2
Dreamweaver allows you to
specify whether it shows icons
marking the location of
Some HTML code doesn't have a visible representation in a browser.
invisible elements in the
For example, comment tags don't appear in browsers. However, it can
Design view
be useful while you're creating a page to be able to select such
invisible elements, edit them, move them.
Dreamweaver allows you to specify whether it shows icons marking the location
of invisible elements in the Design view of the Document window. To show or
hide marker icons for invisible elements, choose View > Visual Aids > Invisible
Elements. Showing invisible elements lets you select them and change their
properties in the Property inspector; hiding them lets you see the page closer to
the way it will appear in a browser. Note that showing invisible elements may
slightly change the layout of a page, moving other elements by a few pixels, so
for precision layout, hide the invisible elements.
école
normale
supérieure
de lyon
ENS
LYON
Dreamweaver allows you to
specify whether it shows icons
marking the location of
invisible elements in the
Design view
Identité visuelle
Exemple de mise en page 3
Some HTML code doesn't have a visible representation in a browser.
For example, comment tags don't appear in browsers. However, it can
be useful while you're creating a page to be able to select such
invisible elements, edit them, move them.
Dreamweaver allows you to specify whether it shows icons marking the location
of invisible elements in the Design view of the Document window. To show or
hide marker icons for invisible elements, choose View > Visual Aids > Invisible
Elements. Showing invisible elements lets you select them and change their
properties in the Property inspector; hiding them lets you see the page closer to
the way it will appear in a browser. Note that showing invisible elements may
slightly change the layout of a page, moving other elements by a few pixels, so
for precision layout, hide the invisible elements.
école
normale
supérieure
de lyon
ENS
LYON
Dreamweaver allows you to
Identité visuelle specify whether it shows icons
marking the location of
invisible elements in the
Exemple de mise en page 4 Design view
Some HTML code doesn't have a visible representation in a browser.
For example, comment tags don't appear in browsers. However, it can
be useful while you're creating a page to be able to select such
invisible elements, edit them, move them.
Dreamweaver allows you to specify whether it shows icons marking the location
of invisible elements in the Design view of the Document window. To show or
hide marker icons for invisible elements, choose View > Visual Aids > Invisible
Elements. Showing invisible elements lets you select them and change their
properties in the Property inspector; hiding them lets you see the page closer to
the way it will appear in a browser. Note that showing invisible elements may
slightly change the layout of a page, moving other elements by a few pixels, so
for precision layout, hide the invisible elements.
école
normale
supérieure
de lyon
ENS
LYON
Identité visuelle
Exemple de mise en page 5
école
normale
supérieure
de lyon
ENS
LYON
L'identité visuelle de L'ENS Lyon se décline
en couleurs à volonté.
Cependant nous avons défini une déclinaison
de base en 4 associations (couleurs quadri)
par secteurs de communication.
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
Couleurs attribuées à la "communication Couleurs attribuées à la "communication
enseignement" de l'école : générale" de l'école :
VERT = 40 cyan - 10 magenta - 100 jaune - 0 noir ORANGE = 0 cyan - 42 magenta - 100 jaune - 0 noir
BLEU = 100 cyan - 82 magenta - 8 jaune - 0 noir NOIR = 50 cyan - 25 magenta - 0 jaune - 100 noir
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
Couleurs attribuées à la "communication Couleurs attribuées à la "diffusion des savoirs"
scientifique" de l'école : de l'école :
GRIS = 13 cyan - 18 magenta - 20 jaune - 25 noir OR = 20 cyan - 40 magenta - 100 jaune - 0 noir
ROUGE = 40 cyan - 100 magenta - 70 jaune - 0 noir BLEU 2 = 100 cyan - 30 magenta - 35 jaune - 0 noir
Le texte "ENS LYON" peut prendre
la couleur de la partie supérieure à
condition que celle-ci maintienne
un contraste suffisant avec le fond.
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
Couleurs attribuées à la "communication Couleurs attribuées à la "communication
enseignement" de l'école : générale" de l'école :
VERT = 40 cyan - 10 magenta - 100 jaune - 0 noir ORANGE = 0 cyan - 42 magenta - 100 jaune - 0 noir
BLEU = 100 cyan - 82 magenta - 8 jaune - 0 noir NOIR = 50 cyan - 25 magenta - 0 jaune - 100 noir
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
Couleurs attribuées à la "communication Couleurs attribuées à la "diffusion des savoirs"
scientifique" de l'école : de l'école :
GRIS = 13 cyan - 18 magenta - 20 jaune - 25 noir OR = 20 cyan - 40 magenta - 100 jaune - 0 noir
ROUGE = 40 cyan - 100 magenta - 70 jaune - 0 noir BLEU 2 = 100 cyan - 30 magenta - 35 jaune - 0 noir
Une équivalence PANTONE
des 8 couleurs quadri de base
est déterminée comme suit:
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
Couleurs attribuées à la "communication Couleurs attribuées à la "communication
enseignement" de l'école : générale" de l'école :
PAPIER BRILLANT = P280 et P 377 PAPIER BRILLANT = P1375 et Noir
PAPIER MAT = Reflex Blue et P390 PAPIER MAT = P130 et Noir
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
Couleurs attribuées à la "communication Couleurs attribuées à la "diffusion des savoirs"
scientifique" de l'école : de l'école :
PAPIER BRILLANT = P409 et P202 PAPIER BRILLANT = P314 et P125
PAPIER MAT = P407 et P187 PAPIER MAT = P313 et P110
Les couleurs de base peuvent être
interverties. Le texte "école normale
supérieure de lyon" peut être passé en
blanc afin d'augmenter son contraste
avec la couleur de fond.
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
école
école
normale
normale
supérieure
supérieure
de lyon
de lyon
ENS
ENS
LYON
LYON
Le texte "ENS LYON" peut être imprimé en noir ou dans la
seconde couleur à condition de maintenir un fort contraste
avec la couleur de fond. Dans le cas où "ENS LYON" est en
noir le texte "école normale supérieure de lyon" pourra lui
aussi passer en noir mais en aucun cas en blanc.
école école
normale normale
supérieure supérieure
de lyon de lyon
ENS ENS
LYON
LYON
école
école
normale
normale
supérieure
supérieure
de lyon
de lyon
ENS
ENS
LYON
LYON
Identité visuelle
Exemple d'utilisation
des couleurs
école
normale
supérieure
de lyon
ENS
LYON
école
normale
supérieure
ENS
de lyon
LYON
Identité visuelle
Autre exemple d'utilisation
des couleurs et des images
L'identité visuelle peut être
utilisée sous une forme simplifiée
purement graphique sans texte,
ou alors en combinaison avec le
logo officiel et l'adresse de l'École.
ECOLE NORMALE SUPERIEURE DE LYON
École normale supérieure de Lyon, École normale supérieure de Lyon,
46, Allée d'Italie 69364 Lyon cedex 07 46, Allée d'Italie 69364 Lyon cedex 07
Téléphone: +33 (0)4 72 72 80 00 Téléphone: +33 (0)4 72 72 80 00
Fax: +33 (0)4 72 72 80 80 Fax: +33 (0)4 72 72 80 80
ECOLE NORMALE SUPERIEURE DE LYON http://www.ens-lyon.fr http://www.ens-lyon.fr
La taille de la "marche" peut varier
dans la largeur de la page mais ne
devra en aucun cas occuper plus de
la moitié de celle-ci.
ENS
LYON
ENS
LYON
50 %
ENS
LYON
Police The-mix plain 16pt :
abcdefghijklmn
opkrstuvwxyz
ABCDEFGHIJKL
MNOPKRSTUV
WXYZ
0123456789
Police The-mix bold 16pt :
Typographie abcdefghijklm
nopkrstuvwxyz
3 polices typographiques
ABCDEFGHIJKL
MNOPKRSTUV
L'identité visuelle utilise en priorité la polices "The-mix plain" et
"The-mix bold plain" mais toutes les variations de cette police sont
WXYZ
utilisables.
0123456789
Dans le cas d'une personne ne disposant pas de la police The-mix installée sur
son ordinateur la "Verdana" pourra être utilisée en remplacement. Le "Verdana"
étant une police système aussi bien sous Windows que sous Mac OS tous les
ordinateurs actuels en disposent.
En association avec la police "The-mix" ou la "Verdana" le "Garamond" sera
utilisé comme police d'accompagnement. Le "Garamond" sera utilisé pour le
texte principal comme pour les légendes ("Garamond italic"), les inter-titres
("Garamond bold") et autres contenus.
école
normale
supérieure
de lyon
ENS
LYON
Police Verdana 14pt :
abcdefghijklmn
opkrstuvwxyz
ABCDEFGHIJKL
MNOPKRSTUV
WXYZ
0123456789
Police Verdana bold 14pt :
Typographie abcdefghijklm
nopkrstuvwxyz
La "Verdana" remplace la "The-mix"
ABCDEFGHIJK
L'identité visuelle utilise en priorité la polices "The-mix plain" et "The-mix LMNOPKRSTU
bold plain" mais toutes les variations de cette police sont utilisables.
VWXYZ
Dans le cas d'une personne ne disposant pas de la police
0123456789
The-mix installée sur son ordinateur la "Verdana" pourra
être utilisée en remplacement. C'est le cas de cette page
donnée comme exemple. Le "Verdana" étant une police système aussi
bien sous Windows que sous Mac OS tous les ordinateurs actuels en disposent.
En association avec la police "The-mix" ou la "Verdana" le "Garamond" sera
utilisé comme police d'accompagnement. Le "Garamond" sera utilisé pour le
texte principal comme pour les légendes ("Garamond italic"), les inter-titres
("Garamond bold") et autres contenus.
école
normale
supérieure
de lyon
ENS
LYON
Police Garamond 16pt :
abcdefghijklmno
pkrstuvwxyz
ABCDEFGHIJK
LMNOPKRSTU
VWXYZ
0123456789
Police Garamond bold 16pt :
Typographie abcdefghijklmno
pkrstuvwxyz
La "Garamond" pour les textes
ABCDEFGHIJK
LMNOPKRSTU
L'identité visuelle utilise en priorité la polices "The-mix plain" et "The-mix
bold plain" mais toutes les variations de cette police sont utilisables.
VWXYZ
Dans le cas d'une personne ne disposant pas de la police The-mix installée sur
0123456789
son ordinateur la "Verdana" pourra être utilisée en remplacement. C'est le cas de
cette page donnée comme exemple. Le "Verdana" étant une police système aussi
bien sous Windows que sous Mac OS tous les ordinateurs actuels en disposent.
En association avec la police "The-mix" ou la "Verdana" le "Garamond" sera
utilisé comme police d'accompagnement. Le "Garamond" sera utilisé pour
le texte principal comme pour les légendes ("Garamond italic"), les inter-
titres ("Garamond bold") et autres contenus.
école
normale
supérieure
de lyon
ENS
LYON
Dos de document
Exemple de mise en page
Voici un exemple de mise en page du dos d'une pochette avec un plan
de situation de l'École dans son quartier.
NORD
Pour se rendre à l'ENS Lyon :
e
Crs
Crs Ch
ris
ch
rd
Pa
ira
rra
Pe ai
• De l'aéroport Lyon-Saint-
l. G
Qu
e
arg
Co
ar
arle
Exupéry prendre la navette
sF
t.
ieu
mag
ne
ve
Sortie
eL
an
SATOBUS de l'aéroport jusqu'à
Rue du Rhô
Rue Marcel Mérieu
.Y
Gerland
Ru
Charlemagne
Bd
e
e
la gare de Lyon Part-Dieu ou
es
6
uy
/A
aur
s Go
Pon la gare de Lyon Perrache.
A7
t Pa
nJ
Bus 32
ste
orge
Métro B
Mérieu
Mérieu
Mérieux
ur
Place A.
Jea
Station
• Depuis la gare de Lyon
Perrin
e Ge
Debourg
Av.
Sortie
Part-Dieu sortie Vivier Merle,
la
Perrache
Ru
M
de
M
Gerland Av. Debourg
ère
OUEST
prendre le Métro ligne B,
nt
Po
ENS
lati
EST
M
er
M
Mu
direction Stade de Gerland.
Place des
Lyon
Halle T. Garni
Av. ny Garnier
Pavillons
Descendre à la station
Allée d'Italie r
cour
Rue Challemel-Lacou
LE RHÔNE
LE RH
Challemel-La
L
LA SA
"Debourg".
P
ÔN
ÔNE
u Vercors
To
Rue d
• Depuis la gare de Lyon
Perrache sortie terminus des
A7
bus, prendre le bus ligne 32,
Av. Tony Garnier
direction Etats-Unis/Viviani.
Descendre à la station "Halle
Palais
Stade de Gerland
des
Marse
sports
ars ille
Tony Garnier".
SUD
École normale supérieure de Lyon,
46, Allée d'Italie 69364 Lyon cedex 07
Téléphone: +33 (0)4 72 72 80 00
Fax: +33 (0)4 72 72 80 80
ECOLE NORMALE SUPERIEURE DE LYON http://www.ens-lyon.fr
Mauvaises utilisations
Les varations suivantes
ne sont pas acceptables
A gauche : ne jamais
utiliser une troisième
couleur pour les textes
de l'identité visuelle.
Seul le noir ou le blanc
école école
normale normale
supérieure supérieure
peuvent venir en
de lyon de lyon
ENS ENS
LYON
LYON
complément.
A droite : ne jamais
Dossier de rentrée
2004/2005 utiliser des textes en
blanc et en noir sur un
même document.
A gauche : ne jamais
occuper avec l'identité
école
visuelle plus de la
normale
moitier de la largeur
supérieure
de lyon
ENS
de la page.
LYON
A droite : l'identité
visuelle ne doit pas être
tronquée par le bas de la
feuille. Un filet
minimum doit être
école
normale
visible en bas de page.
supérieure
de lyon
ENS
LYON
école
normale
supérieure
de lyon
ENS
LYON
Mauvaises utilisations
Les varations suivantes
ne sont pas acceptables
ENS A gauche : ne jamais occuper
LYON
toute la hauteur de la page.
Un filet minimum doit être
visible en haut de la feuille.
école
normale
supérieure
de lyon
A droite : éviter de modifier
ENS
LYON
le rapport de taille entre
les éléments de l'I.V.
Cette solution n'est à
envisager que pour un
document de très petit format
afin d'assurer la lisibilité
école
optimum du texte.
normale
supérieure
de lyon
Ne jamais modifier la
typographie de l'I.V.
Si vous ne disposez pas
de la typographie "The-
mix" installée dans votre
école école
normale normale
supérieure supérieure
système utilsez la
de lyon de lyon
ENS ENS
LYON
LYON
version vectorielle de
l'I.V. ou sa version image
(.tif ou .jpg) mais en
aucun cas une autre
typo (ni même verdana
ou garamond).
école
normale
supérieure
de lyon
ENS
LYON
- CD -
Le CD joint à cette
charte graphique contient :
• La charte graphique complète au format .pdf
• Les fichiers originaux de l'identité visuelle
au format Adobe Illustrtor 8.0 :
- en noir et blanc version vectorielle,
- dans les 3 couleurs de références version vectorielle,
- une version typographique de l'I.V.
au format .jpg à 300 dpi :
- en noir et blanc,
- 3 versions couleurs de références en RGB,
au format .tif en 300 dpi :
- 3 versions couleurs de références en CMYK
• Le gabari de référence d'une page A4
au format Adobe Illustrtor 8.0
• Un gabari de présentation avec templates Power Point
• Une version vectorielle du plan de situation
au format Adobe Illustrtor 8.0
• 3 versions des plans d'accés à l'école
aux formats .pdf et .jpg (usage internet, mails, power point...)
• Une version vectorielle du logo officiel
au format Adobe Illustrtor 8.0
Création graphique de
l'identité visuelle de l'ENS Lyon :
fçg design graphique 04 72 00 04 35
Photographies :
© François Boisjoly 04 72 88 24 91
Close