Identité visuelle de l’Etat de Fribourg · Etat de Fribourg Charte graphique Internet, Intranet...

14
Identité visuelle de l’Etat de Fribourg Manuel Internet, Intranet et applications Web Janvier 2012

Transcript of Identité visuelle de l’Etat de Fribourg · Etat de Fribourg Charte graphique Internet, Intranet...

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 Web 5

6.2

Accueil

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