EPFL

c h a r t e g r a p h i q u e

Site internet de l’EPFL1 7 . 0 1 . 2 0 0 2 / v e r s i o n 1 . 0

2

01/02 EPFL

Sommaire

1. L’identité visuelle

1.1 Ligne graphique 1.2 Structure de page 1.3 Éléments de page

2. Code Couleur

2.1 Couleur des bandeaux 2.2 Valeurs colorimétriques

3. Code graphique

3.1 Graphique des bandeaux

4. Code typographique

4.1 Feuilles de style

5. Architecture des pages

5.1 Page «Entrée principale» 5.2 Page de type vitrine ou portail

6. Éléments graphiques

6.1 Le bandeau

6.2 Les modules 6.3 Le pied de page 6.4 Les visuels

7. Typographie

7.1 Typographie éditable

7.2 Codes typographiques HTML 7.3 Valeur typographique éditable 7.4 Typographie bitmap 7.5 Raccourcis clavier 7.6 Valeur typographique bitmap 7.7 Liens

8. La page

8.1 Mise en page

9. Source

03

040506

08

0911

13

14

16

17

18

1920

21

22232425

28

29303334353637

38

39

41

3

01/02 EPFL


La nouvelle identité visuelle de l’EPFL veut se démarquer d’une image traditionnelle que peut véhiculer une institution. Loin des clichés mettant en scène le diplômant costumé dans un décor gréco-romain, l’EPFL veut se doter d’une image qui met l’accent sur l’individu dans un contexte original et technologique.

Le thème de la «connectivité» (connexion/activité) exprimant les liens des principaux acteurs (professeurs, étudiants et industrie) mais aussi le réseau de connections des compétences, des ressources et des cultures multiples composant la communauté de l’EPFL a donné naissance à un langage visuel évolutif.

L’identité visuelle recherchée véhicule une notion d’originalité forte, d’humanité et de professionnalisme et génère une image percutante qui ne laissera pas insensible les utilisateurs du site internet. Une ambiance dépouillée, empruntée au laboratoire de recherche retranscrit une sensation d’expérimentation, de technologie, tout en plaçant le sujet humain au centre du propos. Plusieurs éléments graphiques ont été mis en place afi n de contribuer notamment à cette identité visuelle: le bandeau identitaire (comprenant le logo EPFL), le visuel photographique, les modules, la typographie, la mise en page…

Le soin porté au visuel photographique a une grande part de responsabilité dans l’image identitaire de ce site. Chaque photographie se veut décalée, interrogative, déconcertante afi n de remplir son rôle accrocheur et stimulant. L’association de cette image à un titre ou à un slogan permet d’obtenir un message moteur teinté, si le cas le permet, d’une pointe d’ironie positive.

Le langage graphique choisi offre de faire évoluer des pages de manière libre tout en conservant une certaine homogénéité entre celles-ci. Il donne volontairement une défi nition de fi nesse, de précision, de dépouillement dans un univers blanc aseptisé.

Le bandeau identitaire est la signature de l’EPFL. Il est aussi un outil ergonomique permettant d’identifi er le secteur dans lequel nous nous trouvons par sa couleur, son titre. Son concept de code graphique regroupe les couches principales entre elles selon leur nature.

4

01/02 EPFL

1.1 Ligne graphique

Page «Entrée principale»


1. page «Place centrale»2. page «Bureau virtuel»3. page portail

1. 2.

3.

5

01/02 EPFL

1.2 Structure de page


Page structuréeLe système de mise en pages propose une architecture simple et méthodique, adaptée à chaque type de pages.

Une zone horizontale supérieure est dédiée impérativement au logo de l’EPFL, au bandeau graphique (indication du lieu, des liens principaux et des sous-titres) et au petit bandeau (langues et cheminement).L’espace principal dédié au contenu des pages est divisé en quatres colonnes invisibles, respectivement deux petites colonnes latérales et deux grandes colonnes centrales.

Ces quatres colonnes servent de guide pour aligner les éléments textes et images.La colonne de droite est réservée aux différents modules outils.

1 bandeau «signature» réservé au logo et aux éléments identitaires

2 petite colonne

3 grande colonne

4 grande colonne dynamique

5 petite colonne dédiée aux différents modules

6 pied de page

1

2 3 4 5

6

6

01/02 EPFL

1.3 Éléments de page


Page portail ou vitrine

1 logotype offi ciel de l’EPFL

2 bandeau graphique incluant l’indication du lieu virtuel

3 bandeau contenant des liens de première navigation sur les domaines équivalents (uniquement dans les portails ou vitrines) ou les sous-titres

4 bandeau comprenant le choix des langues

5 bandeau comprenant le cheminement

6 visuel photographique associé à un titre/slogan

7 texte courant

8 modules outils

9 pied de page

6

5

9

7

12

34

8

7

01/02 EPFL

1 logotype offi ciel de l’EPFL

2 bandeau graphique incluant l’indication du lieu virtuel

3 bandeau contenant les sous-titres ou indiquant le contenu de la page

4 bandeau comprenant le choix des langues

5 bandeau comprenant le cheminement

6 emplacement des modules de navigation à l’intérieur du site des pages (sommaire) ainsi que des modules outils

7 plage destinée au texte courant ainsi qu’à l’intégration d’éléments visuels

8 emplacement des modules outils (liens utiles, bons plans, contacts, …)

9 signature et coordonnées en guise de pied de page

10 pictogramme renvoyant en haut de la page si la fenêtre dépasse les 800 px


Page contenu

1 23

54

6

7

8

9

10

8

01/02 EPFL

2. Code Couleur

Un système de couleur a été mis en place afi n d’améliorer la reconnaissance des différentes entités de l’École.

9

01/02 EPFL

2.1 Couleur des bandeaux

LogiqueChaque page est identifi ée par un bandeau d’entête d’une couleur spécifi que déclinée en camaïeu. Cette couleur dépend de la source d’informations qu’offre la page. Il s’agit d’un repère visuel donnant à l’utilisateur une indication sur sa situation géographique dans le site.

Pages e-pfl Ces pages, gérées par le projet e-pfl , concernent l’entrée principale et la place centrale du site, ainsi que les services d’informations offerts sur le site de l’École (mémento, moteurs de recherche, portails, actualités, plan d’orientation, etc.).

2. Code couleur

Pages Formation & RechercheLes pages des deux missions principales de l’École, formation et recherche.

Bureau Virtuel L’affi chage du bureau virtuel e-pfl et des pages personnelles.

Pages Services Les informations administratives issues des services centraux.

10

01/02 EPFL

Faculté SV

Faculté ENAC

Faculté I&C

Faculté STI

Collège des Humanités

Faculté SB

2. Code couleur

11

01/02 EPFL

2.2 Valeurs colorimétriques

CouleursPalettes de base par section et déclinaisons.Le symbole indique les couleurs non comprises dans la palette «web safe».

e-pfl 339999

formation & recherche999933

bureau virtuel660066

services999999

99CCCC CCCC33 CC99CC CCCCCC

B8DBDB DBDB71 DBB8DB DBDBDB

faculté SV669933

99CC99

B8DBB8

faculté ENACCC3300

FF9966

FFB894

faculté I&C336666

669999

94B8B8

faculté STI333366

9999CC

B8B8DB

collège des Humanités990000

CC9999

DBB8B8

faculté SB336699

6699CC

94B8DB

2. Code couleur

12

01/02 EPFL

Logotype optimiséLogotype offi ciel optimisé pour Internet.

noir et FF0000

Cellules informationnelles non liées à une section.Cellules importantes (outils de recherche, intranet)FF0000

autres cellules (actions, navigation)ACACAC

texte blancFFFFFF

bandeCCCCCC

texte666666

Couleurs additionnellesBande contenant le choix des langues et le chemin.

2. Code couleur

13

01/02 EPFL

3. Code graphique

Élément d’identité supplémentaire, le code graphique regroupe les couches principales entre elles selon leur nature.

3. Code graphique

14

01/02 EPFL

3.1 Graphique des bandeaux

Code graphique des pages institutionnellesÉvolution de l’élément «code graphique» selon la progression dans les niveaux des pages institutionnelles.

Niveau 1

3. Code graphique

Niveau 2

Niveau 3

Niveau 4

Niveau 5

15

01/02 EPFL

Code graphique pour les pages des facultésÉvolution de l’élément «code graphique» selon la progression dans les niveaux d’une faculté.

Niveau 1 (portail ou page vitrine)

Niveau 2 (information générale)

Niveau 3 (sections)

Niveau 4 (instituts)

Niveau 5 (chaires et laboratoires)

3. Code graphique

16

01/02 EPFL

Tous les caractères éditables (HTML) ont été défi nis par différentes feuilles de styles selon leur nature et fonction.

4. Code typographique

17

01/02 EPFL

4.1 Feuilles de styles

Voici les différentes classes à utiliser selon les besoins suivants:

La classe .text est la classe de base pour vos contenus textuels.

La classe .textbold est utilisée pour les paragraphes en évidence (en gras), hors des modules.

La classe .boxtext apparaît dans les modules rouges et gris.

La classe .boxtextbold sert aux liens.

La classe .path apparaît dans le pied de page et dans la bande grise des langues et du cheminement et comme légende des images. Elle affi che le texte en gris foncé.

La classe .title est utilisée pour tous vos titres dans le contenu, elle affi che en gris foncé gras.

La classe .boxtitle s’utilise quand on a des textes sur des fonds gris ou rouge (par exemple titres des modules ou de tableaux qui ne seraient pas des images). Elle affi che le texte en blanc et gras.

N.B.: Les liens ne sont pas soulignés, ils apparaissent en bleu foncé, puis en bleu clair lorsqu’on les survole ou qu’on les a déjà visités.

4. Code typographie

18

01/02 EPFL

Les pages principales sont présentées en squelette de manière à faciliter la compré-hension et la logique de construction. Chaque élément constitutif est dimensionné en pixel. Ces représentations servent de base pour l’évolution et mise à jour du site de l’EPFL. L’équivalent en code HTML de cette architecture et décrite en détail dans la charte technique.


19

01/02 EPFL

5.1 Page «Entrée principale»

1 755 x 9 px

2 39 x 63 px

3 120 x 63 px

4 4 x 63 px

5 318 x 34 px

6 270 x 34 px

7 588 x 1 px

8 589 x 28 px

9 747 x 14 px

10 747 x 20 px

11 4 x variable px

12 155 x variable px

13 4 x variable px

14 429 (212 + 5 + 212) x variable px


325 6

12 12

78

9

1111

10

1

7

4

13 1314

Cette architecture est réservée à l’entrée principale du site de l’EPFL.

20

01/02 EPFL

1 variable x 9 px

2 39 x 63 px

3 120 x 63 px

4 4 x 63 px

5 cellule dynamique (220 min.) x 34 px

6 270 x 34 px

7 cellule dynamique x 1 px


9 155 x 14 px

10 variable x 14 px


12 4 x variable px



15 cellule dynamique x variable px

16 155 x 5 px


5.2 Page de type vitrine ou portail

325 6

13 13

78

10

1212

11

1

7

4

14

9

15

16

16

21

01/02 EPFL


Les pages du site sont constituées de différents éléments graphiques qui contribuent à l‘identité visuelle et à l’ergonomie de navigation.

22

01/02 EPFL

6.1 Le bandeau

1 emblème offi ciel de l’EPFL } logotype de l’EPFL2 nom offi ciel de l’EPFL

3 bande graphique d’une couleur déclinée en deuxs tons (camaïeu) comprenant le titre et le code graphique (Trade Gothic bold / 24 px / FFFFFF)

4 bande, d’une tonalité plus foncée que la couleur de la bande graphique comprenant les liens et sous-titres (Trade Gothic bold / 14 px / FFFFFF)

5 bande grise (CCCCCC) comprenant le choix des langues et le cheminement: langues: classe .path cheminement: classe .path


Seul élément identitaire imposé du site, le bandeau comprend le logotype offi ciel de l’EPFL, le code couleur et graphique de la page en question, le choix des langues et le cheminement.

1 3

5

120 px35 px 270 pxvariable (220 px min.)4 px

18 px

34

2814 1

1

2 4

23

01/02 EPFL

6.2 Les modules

1 titre du module / fonction bande rouge FF0000 / cadre 1 px Trade Gothic bold / 14 px / FFFFFF

2 Verdana regular / 10 px / 000000

3 zone de saisie + bouton validation

4 texte interactif (non visité) classe .boxtext

5 titre du module / fonction bande grise ACACAC / cadre 1 px Trade Gothic bold / 14 px / FFFFFF


1

2

3

4

155 px

8 px

18 p

x

155 px

18 p

x

8 px

5

6

7 titre du module / fonction bande grise ACACAC / cadre 1 px Trade Gothic bold / 14 px / FFFFFF


8 texte courant classe .boxtext

module outils

module de navigation et actions

155 px

7

8

9

18 p

x

8 px


24

01/02 EPFL

6.3 Le pied de page


Élément indispensable de toutes les pages, cette bande informe sur l’adresse physique, l’éditeur et la date de la page.

1 ligne horizontale / 1 px / grise CCCCCC

2 pied de page présenté sur deux lignes / classe .path. Chaque page est signée par un pied de page comprenant l’adresse physique et le téléphone du service concerné, un lien sur le mail de l’éditeur responsable, ainsi que la date de la dernière mise à jour de la page.

1

2

20 p

x

25

01/02 EPFL

6.4 Les visuels

Création d’un visuel pour le site de l’EPFLDeux types de visuels peuvent être créés pour le site: - Des visuels identitaires annonçant un service ou une entité.- Des visuels actualités annonçant un événement ponctuel tel qu’un forum ou une exposition.

Le processus de création est identique dans les deux cas: 1. choix d’une image, 2. intégration dans un cadre,3. intégration d’un texte.

Les pages suivantes décrivent ces trois étapes.

Dans les descriptions suivantes, il convient de distinguer l’image, qui est la partie purement photographique avec le visuel qui représente l’ensemble graphique englobant le cadre et le texte. Une illustration est une image utilisée à l’état brut pour accompagner du texte courant.

1. Choix d’une imageChaque image est une mise en scène avec un personnage et le thème du visuel, le tout dans un environnement minimaliste.

Le personnage, dans la majorité des cas un étudiant, peut également être représenté par une personne plus âgée, un robot…

Le thème du visuel est la représentation symbolique d’une unité, d’un concept ou d’un événement. Il est matérialisé sous la forme d’un objet appelé à interagir avec le personnage.

L’environnement doit être dépouillé ou du moins consacrer une part importante de l’espace au vide. Ne pas oublier qu’un texte sera intégré dans l’image et que le message devra être lisible en un coup d’oeil.

Le visuel ci-dessus a été retenu pour illustrer les journées Polyarchitecture. Le thème est représenté par une maquette de maison. Sans doute aucun étudiant de l’EPFL ne présenterait un projet pareil et probalement aucun élève ne s’habillerait comme le modèle de la photo. Un décalage avec la réalité permet de laisser une part de rêve. L’environnement vide met en avant le sujet tout en laissant un espace important au texte.


26

01/02 EPFL

Les visuels communiquent un message. Ils doivent interpeller et provoquer une réaction. Ils ne sont pas là pour combler un espace vide. Voici une série d’exemples qui illustrent à chaque fois un type de visuel utilisable sur le site de l’EPFL et un type de visuel à éviter.

Il ne faut pas utiliser des visuels passe-partout et/ou ennuyeux.

Eviter dans la mesure du possible les visuels tristes ou inutilement provocateurs. Le ton général doit être décalé mais positif.

Eviter les environnement surchargés. En plus de problèmes de lisibilité du texte, un environnement surchargé repousse le regard plus qu’il ne l’attire.

Garder en tête qu’il s’agit d’une école. Eviter des images trop orientées business, même en traitant des sujets liés à l’économie ou à l’administration.

Le visuel de gauche a été retenu pour son humour décalé favori-sant le dialogue. Il est accom-pagné du message: les corridors sont remplis de collègues fabu-leux. Les connaissez-vous tous ? Le visuel de droite, trop décalé, déformerait ou étoufferait le message recherché.

Le visuel de gauche a été sélec-tionné en guise de bienvenue sur la page d’entrée du site. Il intri-gue et met en évidence le con-tenu du message tandis que le visuel de droite l’aurait écrasé.

Le visuel de gauche a été sélec-tionné en liaison avec le lan-cement d’une nouvelle stratégie.

De toute évidence, l’image de droite a été extraite d’une image-rie bancaire. Décalée oui, mais ni interpellante ni intéressante.

Le visuel de gauche attire le regard, car il met en scène un étudiant dans un style propre à l’EPFL. Le visuel de droite, trop standard, passerait inaperçu.


27

01/02 EPFL

2. Intégration dans un cadreIl existe deux cadres de base utilisables pour les visuels occupant deux colonnes. Il est recommandé de les utiliser en fonction de la mise en page. Cependant, il est autorisé d’en créer de nouveaux tant que la ligne graphique est respectée. Les traits accompagnés d’un point ne sont pas décoratifs mais marquent le début d’un texte qui n’a pas obligatoirement un lien avec l’image.

3. Intégration du texteLe texte doit être court et rapidement décodable. Un ou deux mots-clés doivent ressor-tir. Le texte doit compléter l’image, mais en aucun cas l’écraser. Il faut également éviter de placer du texte directement sur le sujet central.

Couleurs autorisées pour le texte : le rouge FF0000, le noir, le blanc et les nuances de gris. Police: Trade Gothic Bold

Le texte interpelle l’utilisateur. Les messages doivent être suffi samment clairs pour permettre à l’utilisateur de savoir où il se dirigera en cliquant sur l’image, et assez intriguants pour susciter l’intérêt. Inutile de donner trop de détails à ce niveau.

Exemples d’intégration de texte dans un visuel:Dans le cas de la journée Polyarchitecture, l’utilisateur n’a pas besoin à ce stade de con-naître les organisateurs ou de prendre con-naissance d’un résumé du programme.

Les textes doivent interpeler l’utilisateur. Il est vivement conseillé de s’adresser directement à lui. Dans le cas du visuel sélectionné pour l’Intranet, le message choisi (Les corridors sont pleins...) est préférable à un texte long et moralisateur.

6+. Éléments graphiques

28

01/02 EPFL

7. Typographie

Polices de caractèreLe site «epfl .ch» utilise deux polices de caractères: la police «Verdana» pour le texte HTML et la police «Trade Gothic» pour le texte bitmap des différents visuels.

29

01/02 EPFL

7.1 Typographie éditable

Texte éditable (HTML)Les polices de caractères sont gérées par des feuilles de style (style.css).La typographie utilisée pour le texte éditable fait référence à la «Verdana». Cette police de caractères est installée d’offi ce sur les systèmes PC et MAC et a été développée particulièrement pour l’affi chage à l’écran.

Verdana regularMAC + PC / postscript / 1996 Microsoft Corporation

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890(.,;:?!$&-*){ÄÖÜÅØÆŒÇ}

ABCDabcd12340?@ABCDabcd12340?@Verdana boldMAC + PC / postscript / 1996 Microsoft Corporation


ABCDabcd12340?@ABCDabcd12340?@

7. Typographie

30

01/02 EPFL7. Typographie

7.2 Codes typographiques HTML

Space

! ! Exclamation mark

" " Quotation mark

# # Number sign

$ $ Dollar sign

% % Percent sign

& & Ampersand

' ' Apostrophe

( ( Left parenthesis

) ) Right parenthesis

* * Asterisk

+ + Plus sign

, , Comma

- - Hyphen

. . Period (fullstop)

/ / Solidus

0 - 9 0 - 9 Decimal digits

: : Colon

; ; Semi-colon

< < Less than

= = Equals sign

> > Greater than

? ? Question mark

@ @ Commercial at

A - Z A - Z Uppercase letters

[ [ Left square bracket

\ \ Reverse solidus

] ] Right square bracket

^ ^ Caret

_ _ Horizontal bar

` ` Grave accent

a - z a - z Lowercase letters

{ { Left curly brace

| | Vertical bar

} } Right curly brace

~ ~ Tilde

Nonbreaking space

decimal code char description

31

01/02 EPFL

À À Capital A, grave accent

à à Small a, grave accent

Á Á Capital A, acute accent

á á Small a, acute accent

Â Â Capital A, circumflex accent

â â Small a, circumflex accent

Ã Ã Capital A, tilde

ã ã Small a, tilde

Ä Ä Capital A, dieresis or umlaut mark

ä ä Small a, dieresis or umlaut mark

Å Å Capital A, ring

å å Small a, ring

Æ Æ Capital AE dipthong (ligature)

æ æ Small ae dipthong (ligature)

Ç Ç Capital C, cedilla

ç ç Small c, cedilla

È È Capital E, grave accent

è è Small e, grave accent

É É Capital E, acute accent

é é Small e, acute accent

Ê Ê Capital E, circumflex accent

ê ê Small e, circumflex accent

Ë Ë Capital E, dieresis or umlautmark

ë ë Small e, dieresis or umlautmark

Ì Ì Capital I, grave accent

ì ì Small i, grave accent

Í Í Capital I, acute accent

í í Small i, acute accent

Î Î Capital I, circumflex accent

î î Small i, circumflex accent

Ï Ï Capital I, dieresis or umlautmark

ï ï Small i, dieresis or umlautmark

µ µ Micro sign

Ñ Ñ Capital N, tilde

ñ ñ Small n, tilde

Ò Ò Capital O, grave accent

ò ò Small o, grave accent

Ó Ó Capital O, acute accent

ó ó Small o, acute accent

Ô Ô Capital O, circumflex accent

ô ô Small o, circumflex accent

Õ Õ Capital O, tilde

õ õ Small o, tilde


32

01/02 EPFL

Ö Ö Capital O, dieresis or umlautmark

ö ö Small o, dieresis or umlautmark

Ø Ø Capital O, slash

ø ø Small o, slash

ß ß Small sharp s, German (sz

ligature)

Ù Ù Capital U, grave accent

ù ù Small u, grave accent

Ú Ú Capital U, acute accent

ú ú Small u, acute accent

Û Û Capital U, circumflex accent

û û Small u, circumflex accent

Ü Ü Capital U, dieresis or umlautmark

ü ü Small u, dieresis or umlautmark

ÿ ÿ Small y, dieresis or umlautmark

¨ ¨ Umlaut

¯ ¯ Macron accent

´ ´ Acute accent

¸ ¸ Cedilla

¡ ¡ Inverted exclamation

¿ ¿ Inverted question mark

· · Middle dot

« « Left angle quote

» » Right angle quote

¶ ¶ Paragraph sign

§ § Section sign

© © Copyright

® ® Registered trademark

? Soft hyphen

÷ ÷ Division sign

ª ª Feminine ordinal

º º Masculine ordinal

¬ ¬ Not sign

° ° Degree sign

± ± Plus or minus

¤ ? General currency sign

¢ ¢ Cent sign

£ £ Pound sterling

¥ ¥ Yen sign


33

01/02 EPFL

Possibilité d’édition de la typographie pour le niveau maîtrisé.

1 langues et cheminement: classe .path

2 texte à l’intérieur des modules classe .boxtext

3 titre sur page contenu: classe .title

4 texte courant en évidence: classe .textbold

5 liens (apparaissent en bleu): classe a:active, a:link ou classe .boxtextbold classe a:visited, a:hover ou classe .boxtextbold

6 texte courant : classe .text

7 signature, coordonnées et contact: classe .path

7.3 Valeur typographique éditable

7. Typographie

1

4

6

5

7

2

3

2

34

01/02 EPFL

Texte bitmapLa typographie utilisée pour tout ce qui concerne les images bitmap, c’est-à-dire principalement les titres et slogans des visuels, fait référence à la «Trade Gothic».

Trade GothicMAC + PC / postscript / 1948 Jackson Burke



Trade Gothic BoldMAC + PC / postscript / 1948 Jackson Burke



7.4 Typographie bitmap

7. Typographie

35

01/02 EPFL

↑ g

64@

alt 5

91[

↑alt 7

92\

alt 6

93]

^ space

94^

↑ -

95_

` space

96`

alt 8

123{

alt 7

124|

alt 9

125}

alt n space

126~

21½

22¼

23¹

24¾

25³

26²

27¦

alt 3

35#

↑alt a

129Å

alt 4

130Ç

alt ^ ↑ e

131É

alt n ↑ n

132Ñ

alt ^ + a

135á

alt n + a

139ã

alt a

140å

alt ^ + i

146í

↑^ + i

147ì

alt n + n

150ñ

alt ^ + o

151ó

↑^ + o

152ò

alt n + o

155õ

alt ^ + u

156ú

↑^ + u

157ù

alt t

160†

alt u

161°

alt é

162¢

alt è

164§

↑alt $

165•

alt $

166¶

alt s

167ß

alt r

168®

alt c

169©

↑alt x

170™

↑alt à

174Æ

↑alt o

175Ø

alt 1

177±

alt y

180¥

alt m

181µ

alt h

187ª

alt j

188º

alt à

190æ

alt o

191ø

alt ‘

192¿

alt i

193¡

alt l

194¬

alt f

196ƒ

alt ,

199«

↑alt ,

200»

alt .

201…

alt n + ↑ a

204Ã

alt n + ↑ o

205Õ

↑alt q

206Œ

alt q

207œ

alt -

208–

↑alt -

209—

alt 2

210“

↑alt 2

211”

alt ¨

212‘

↑alt ¨

213’

↑alt .

214÷

↑alt 3

220‹

↑alt f

224‡

↑alt h

225·

↑alt g

226‚

↑alt a

231Á

↑alt e

232Ë

↑alt r

233È

↑alt z

234Í

↑alt t

235Î

↑alt 9

239Ô

↑alt 8

241Ò

↑alt 0

242Ú

↑alt u

244Ù

↑alt k

246ˆ

↑alt j

247˜

↑alt h

248¯

Jeu de caractères spéciaux Trade Gothic pour Macintosh

Jeu de caractères spéciaux Trade Gothic pour Windows

↑ 2

64@

[

91[

\

92\

]

93]

↑ 6

94^

↑ -

95_

` space

96`

↑ [

123{

↑ \

124|

↑ ]

125}

↑ `

126~

alt + 0189

189½

alt + 0188

188¼

alt + 0185

185¹

alt + 0190

190¾

alt + 0179

179³

alt + 0178

178²

alt + 0166

166¦

↑ 3

35#

alt + 0166

197Å

alt + 0199

199Ç

alt + 0201

201É

alt + 0209

209Ñ

alt + 0225

225á

alt + 0227

227ã

alt + 0229

229å

alt + 0237

237í

alt + 0204

236ì

alt + 0241

241ñ

alt + 0243

243ó

alt + 0242

242ò

alt + 0245

245õ

alt + 0250

250ú

alt + 0249

249ù

alt + 0134

134†

alt + 0176

176°

alt + 0162

162¢

alt + 0167

167§

alt + 0149

149•

alt + 0182

182¶

alt + 0223

223ß

alt + 0174

174®

alt + 0179

179©

alt + 0153

153™

alt + 0198

198Æ

Ø

alt + 0177

177±

alt + 0165

165¥

alt + 0181

181µ

alt + 0170

170ª

alt + 0186

186º

alt + 0230

230æ

alt + 0216

216ø

alt + 0191

191¿

alt + 0161

161¡

alt + 0172

172¬

alt + 0131

131ƒ

alt + 0171

171«

alt + 0187

187»

alt + 0133

133…

alt + 0195

195Ã

alt + 0213

213Õ

alt + 0140

140Œ

alt + 0156

156œ

alt + 0150

150–

alt + 0151

151—

alt + 0147

147“

alt + 0148

148”

alt + 0145

145‘

alt + 0146

146’

alt + 0247

247÷

alt + 0139

139‹

alt + 0135

135‡

alt + 0183

183·

alt + 0130

130‚

alt + 0193

193Á

alt + 0203

203Ë

alt + 0200

200È

alt + 0205

205Í

alt + 0206

206Î

alt + 0212

212Ô

alt + 0210

210Ò

alt + 0218

218Ú

alt + 0217

217Ù ˆ ˜

alt + 0175

175¯

7. Typographie

7.5 Raccourcis clavier

36

01/02 EPFL

7.6 Valeur typographique bitmap

Possibilité d’édition de la typographie pour les portails et les pages vitrines.

1 lieu virtuel: Trade Gothic bold / 24 px / majuscule / alignement gauche / couleur blanche (FFFFFF)

2 liens (uniquement pour les portails) et sous-titres: Trade Gothic bold / 14 px / majuscule / alignement gauche / couleur blanche (FFFFFF) 3 titre du module:

Trade Gothic bold / 14 px / majuscule / alignement gauche / couleur blanche (FFFFFF)

4 texte slogan: Selon la nature de la phrase vous pourrez décomposer le texte en plusieurs valeur typographique de manière (majuscule/minuscule, taille, couleur) à mettre en évidence un mot en particulier. La valeur typographique la plus petite commence à partir de: Trade Gothic bold / 14 px / alignement gauche / couleur à choix (ACACAC/ FF0000/000000)

5 titre de rubrique sur page vitrine: Trade Gothic bold / 14 px / majuscule / alignement gauche / couleur grise (666666)

1

5

4

3

2

7. Typographie

37

01/02 EPFL

7.7 Liens

Une logique a été établie pour mettre en évidence de manière ergonomique le mot ou la phrase qui sert de lien vers une destination défi nie.

liens non visités:a:active, a:link (003366)

liens visités:a:visited, a:hover (336699)

7. Typographie

38

01/02 EPFL

8. La page

Afi n de respecter la cohérence graphique mise en place, garant d’un équilibre entre les textes et les visuels, une liste non exhaustive de propositions de mise en page vous est recommandée.

39

01/02 EPFL

8.1 Mise en page

Le créateur de nouveaux visuels est relativement libre par rapport à l’exploitation des trois colonnes à sa disposition. Voici cependant quelques règles de base à respecter:

Les visuels ont toujours 200 pixels de haut et sont toujours collés à gauche pour occuper une, deux (le standard) ou trois colonnes. La quatrième colonne est réservée aux outils.

NB : les quatre colonnes ne sont pas de largeur égale. La première et la quatrième colonnes ont une largeur de 155 pixels, alors que la deuxième colonne a une valeur de 212 pixels et la troisième colonne est dynamique en sa largeur.

8. La page

40

01/02 EPFL

Les règles relatives à l’intégration d’une image changent si celle-ci est insérée dans une page texte en tant qu’illustration.

Les images, tableaux, graphiques, etc. relatifs à un texte sont intégrés dans la partie éditoriale et occupent une ou deux colonnes. Leur hauteur est libre. Il est conseillé d’utiliser des illustrations ne comportant pas de cadre ni de texte intégré. Utiliser les illustrations de préférence à l’état brut: sans bord flou, relief ou dégradé.

Si une image n’occupe qu’une colonne, le texte en vis-à-vis ne doit pas coller à l’illustration (environ 10 pixels d’espace). De plus, il faut prévoir un espace pour la légende de l’image. Les légendes sont en classe .path.

N’utiliser des illustrations que si elles apportent une réelle plus-value au texte. Ne pas les utiliser uniquement pour remplir l’espace ou décorer une page. Évitez les images de fond.

8. La page

41

01/02 EPFL

9. Source

Quelques liens utiles pour les utilisateurs de cette charte graphique:

> Le World Wide Web Consortium (W3C) http://www.w3.org/

> Cet espace web regroupe toutes les ressources nécessaires au travail de communi- cation Web pour le site epfl .ch. Cette page fait offi ce de référence pour les éditeurs de site à l’intérieur de l’École. http://myepfl .ch/atelier

> La conférence des webmaster (inscrivez-vous). C’est un organe où se discutent et se décident les recommandations et directives concernant l’usage du Web à l’EPFL, notamment.

42

01/02 EPFL

ImpressumConception et réalisation par le groupe de travail constitué à cette occasion par Oxyde:Blaise MagnenatLaurent ClémentAlexandre KeshavjeeNicolas Hagner

Documents

EPFL