View
214
Download
0
Category
Tags:
Preview:
DESCRIPTION
Charte graphique du centre EPFL
Citation preview
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
1. L’identité visuelle
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. L’identité visuelle
1. page «Place centrale»2. page «Bureau virtuel»3. page portail
1. 2.
3.
5
01/02 EPFL
1.2 Structure de page
1. L’identité visuelle
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
1. L’identité visuelle
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
1. L’identité visuelle
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.
5. Architecture des pages
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
5. Architecture des pages
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
8 cellule dynamique x 28 px
9 155 x 14 px
10 variable x 14 px
11 cellule dynamique x 20 px
12 4 x variable px
13 155 x variable px
14 212 x variable px
15 cellule dynamique x variable px
16 155 x 5 px
5. Architecture des pages
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
6. Éléments graphiques
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
6. Éléments graphiques
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
6 texte interactif (non visité) classe .boxtext
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 interactif (non visité) classe .boxtext
8 texte courant classe .boxtext
module outils
module de navigation et actions
155 px
7
8
9
18 p
x
8 px
6. Éléments graphiques
24
01/02 EPFL
6.3 Le pied de page
6. Éléments graphiques
É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.
6. Éléments graphiques
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.
6. Éléments graphiques
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
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890(.,;:?!$&-*){ÄÖÜÅØÆŒÇ}
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
decimal code char description
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
decimal code char description
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
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890(.,;:?!$&-*){ÄÖÜÅØÆŒÇ}
ABCDabcd12340?@ABCDabcd12340?@
Trade Gothic BoldMAC + PC / postscript / 1948 Jackson Burke
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890(.,;:?!$&-*){ÄÖÜÅØÆŒÇ}
ABCDabcd12340?@ABCDabcd12340?@
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
Recommended