identité visuelle de l’etat de fribourg · etat de fribourg charte graphique internet, intranet...
Post on 12-Sep-2018
218 Views
Preview:
TRANSCRIPT
Etat de FribourgCharte graphique Internet, Intranet et applications Web 1
Identité visuellede l’Etat de Fribourg —Manuel Internet, Intranet et applications WebJanvier 2012
6.1
Généralités: site Internet, Intranet et applications web 4
6.2
Accueil 5
6.3
Structure des pages 6
6.4
Template accueil 7
6.5
Template standard 8
6.6
Template large 9
6.7
Définition des couleurs 10
6.8
Définition de la police 12
6.9
Impressum 14
6.0
Internet, Intranet et applications Web Sommaire
—
Etat de FribourgCharte graphique Internet, Intranet et applications Web4
6.1
Généralités: site Internet
—
Les notions graphiques de base sur lesquelles se fonde la conception d’écran des médias électroniques de l’administration de l’Etat com-prennent un volet d’informations spécifiques au média Internet, y.c. l’Intranet et aux applications Web intégrées dans les sites de l’Etat et un autre relatif à l’identité visuelle.
Les pages prises en exemple dans ce guide peuvent être obtenues sous forme de documents HTML auprès du secteur Projets informatiques de la Chancellerie d’Etat. Il en va de même pour les feuilles de style correspondantes. Comme ces fichiers sont constamment actualisés, le présent manuel se limite aux notions de base de la création de sites Web. Les directives concernant la convivialité (usability, R013) et l’ac-cessibilité (accessibility, P028) ont été prises en compte. Les documents à ce sujet ont valeur de norme à la Confédération suisse et doivent être intégralement respectés. Les deux documents sont accessibles sur le site de l’Unité de stratégie informatique de la Confédération Suisse (www.isb.admin.ch).
Etat de FribourgCharte graphique Internet, Intranet et applications Web6
6.3
Structure des pages
—
La structure des pages a été optimisée pour une résolution de 1024 x 768 pixels. En cas de maquette dynamique, la largeur de la co-lonne centrale (zone de contenu) peut varier, alors que la largeur des colonnes latérales reste constante (sauf dans le modèle «Large» ou la colonne latérale droite est remplacée par la zone de contenu. La surface d’une page se compose de huit zones disposées de manière constante et remplissant à chaque fois la même fonction.
1. Barre d’accessibilité: «Aide accessibilité», «Aller au texte», «Aller au menu», «Taille de la police», «Choisir un style».2. Logo: espace réservé au logo de l’Etat de Fribourg et à la localisation de l’unité d’organisation.3. Méta-navigation pour les points généraux sur la navigation et choix de la langue: nom de la langue dans la langue originale (Deutsch,
Français). Cette zone contient également la recherche rapide et permet d’accéder aux thèmes de son choix traités sur le site.4. Navigation principale.5. Le chemin de navigation permet à l’internaute de se repérer dans l’offre d’information.6. La zone contextuelle permet d’accéder à des informations détaillées.7. La zone de contenu montre les informations figurant dans les rubriques choisies.8. Le pied de page indique l’éditeur du site et précise les dispositions applicables.9. Code de couleur par Direction et ses Services.
1
2 3
9
4 5 6
7
8
Etat de FribourgCharte graphique Internet, Intranet et applications Web 7
6.4
Template accueil
—
30
31019
135
121185
560
180
215
varia
ble
, mai
s m
ax. 2
50 p
x
1
19
1111
3
3
570
970
970
400
3710
10 10
15
27
36
1
12
30
2015
25
14
3
27
29
50
315
Etat de FribourgCharte graphique Internet, Intranet et applications Web8
6.5
Template standard
—
30
31019
135
121185 215
27
29
20
20
25
52
40
2015
25
10
10
10
varia
ble
1
3
3
3
9
570
970
400
3710
151010
10
101010
15
15
1010 10 1010
1010 3
1
3
911
31
570180 18010
Etat de FribourgCharte graphique Internet, Intranet et applications Web 9
6.6
Template large
—
30
31019
135
121185 215
27
29
52
40
2015
25
10
10
varia
ble
varia
ble
varia
ble
1
3
570
970
400
3710
151010
10
101010
15
15
1010 10 10
1010 3
1
3
911
31
76018010
Etat de FribourgCharte graphique Internet, Intranet et applications Web10
6.7
Définition des couleurs
—
1
2
2
3
3
4
4
4
3
1
1
1
1
1
11
1
1
1
1
1
1
4
1
Etat de FribourgCharte graphique Internet, Intranet et applications Web 11
1 Coloris par Direction et les Services rattachés
Utilisation: barre de code de couleur (Direction et les Services rattachés), rubrique sélectionnée dans la navigation principale (arbores-cence dans la colonne de gauche), couleur des liens, point actif dans la navigation principale et lignes de séparation.
Pour la définition des couleurs en Pantone, CMJN et RGB, veuillez consulter le Manuel «5 Publications», pages 4 et 5.
2 Gris clair #EEEFEF
Utilisation: bordures de séparation des différents contenus.
3 Noir #000000
Utilisation: toutes les lignes de séparation.
4 Blanc #FFFFFF
Utilisation: fond du site Web et fond des contenus.
DFIN#6639B7
DICS#9B1889
DSJ#44697D
DSAS#004DB4
DIAF#97233F
DEE#002C77
DAEC#00693C
CHA#009581
Etat de FribourgCharte graphique Internet, Intranet et applications Web12
6.8
Définition de la police
—
1
5
6
7
8
9
101112
13
13
13
14
2
2
2
2
34
3
2
15
15
16
17
19
18
Etat de FribourgCharte graphique Internet, Intranet et applications Web 13
Afin de respecter les critères d’accessibilité, le texte doit être formaté comme suit:
Police: Arial, taille selon le tableau ci-dessous
Texte aligné à gauche
Pas d’italique
Pas de majuscules dans les titres
Pas de soulignement
Localisation
1 Localisation de la Direction / du Service gras (sigle en non-gras) 12 pt #000000
Barre d’accessibilité / liens contextuels / recherche / chemin de navigation
2 Lien gras 11 pt #000000
Choix de la langue / meta-navigation
3 Lien gras 12 pt #000000
4 Liens actifs gras 12 pt #CCCCCC
Navigation principale
5 Lien 1er niveau normal 13 pt #000000
6 Lien 1er niveau actif gras 13 pt couleur de la Direction / du Service > voir page 11
7 Lien 2e niveau gras 12 pt #000000
8 Lien 2e niveau actif gras 12 pt couleur de la Direction / du Service > voir page 11
9 Lien 3e niveau normal 12 pt #000000
10 Lien 3e niveau actif gras 12 pt couleur de la Direction / du Service > voir page 11
11 Lien 4e niveau normal 11 pt #000000
12 Lien 4e niveau actif gras 11 pt couleur de la Direction / du Service > voir page 11
Contenu
13 Titre gras 15 pt #000000
14 Police de base normal 14 pt #000000
15 Lien contenu normal 14 pt couleur de la Direction / du Service > voir page 11
16 Pied de page (texte) normal 11 pt #000000
17 Pied de page (lien) normal 11 pt couleur de la Direction / du Service > voir page 11
18 Contexte (texte) normal 12 pt #000000
19 Contexte (lien) normal 12 pt couleur de la Direction / du Service > voir page 11
Etat de FribourgCharte graphique Internet, Intranet et applications Web14
6.9
Impressum
—
Extrait «Manuel Internet, Intranet et applications Web» de la charte graphique de l’identité visuelle de l’Etat de FribourgJanvier 2012
—
© Chancellerie d’Etat CHA© Staatskanzlei SK
Rue des Chanoines 17, 1701 Fribourgwww.fr.ch/cha
—
Pour de plus amples informations, veuillez contacter le Secteur des projets informatiques de la Chancellerie d’Etat:
Chancellerie d’Etat CHAStaatskanzlei SK
Secteur des projets informatiquesSektor Informatikprojekte
Rue des Chanoines 17, 1701 FribourgT +41 26 305 10 45, F +41 26 305 10 48www.fr.ch/cha
—
Conception et élaboration de la charte graphique:macmac.ch
top related