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

download Identité visuelle de l’Etat de .Etat de Fribourg Charte graphique Internet, Intranet et applications

of 14

  • date post

    12-Sep-2018
  • Category

    Documents

  • view

    212
  • download

    0

Embed Size (px)

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

  • Etat de FribourgCharte graphique Internet, Intranet et applications Web 1

    Identit visuellede lEtat de Fribourg Manuel Internet, Intranet et applications WebJanvier 2012

  • 6.1

    Gnralits: 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

    Dfinition des couleurs 10

    6.8

    Dfinition 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

    Gnralits: site Internet

    Les notions graphiques de base sur lesquelles se fonde la conception dcran des mdias lectroniques de ladministration de lEtat com-prennent un volet dinformations spcifiques au mdia Internet, y.c. lIntranet et aux applications Web intgres dans les sites de lEtat et un autre relatif lidentit visuelle.

    Les pages prises en exemple dans ce guide peuvent tre obtenues sous forme de documents HTML auprs du secteur Projets informatiques de la Chancellerie dEtat. Il en va de mme pour les feuilles de style correspondantes. Comme ces fichiers sont constamment actualiss, le prsent manuel se limite aux notions de base de la cration de sites Web. Les directives concernant la convivialit (usability, R013) et lac-cessibilit (accessibility, P028) ont t prises en compte. Les documents ce sujet ont valeur de norme la Confdration suisse et doivent tre intgralement respects. Les deux documents sont accessibles sur le site de lUnit de stratgie informatique de la Confdration 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 optimise pour une rsolution 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 latrales reste constante (sauf dans le modle Large ou la colonne latrale droite est remplace par la zone de contenu. La surface dune page se compose de huit zones disposes de manire constante et remplissant chaque fois la mme fonction.

    1. Barre daccessibilit: Aide accessibilit, Aller au texte, Aller au menu, Taille de la police, Choisir un style.2. Logo: espace rserv au logo de lEtat de Fribourg et la localisation de lunit dorganisation.3. Mta-navigation pour les points gnraux sur la navigation et choix de la langue: nom de la langue dans la langue originale (Deutsch,

    Franais). Cette zone contient galement la recherche rapide et permet daccder aux thmes de son choix traits sur le site.4. Navigation principale.5. Le chemin de navigation permet linternaute de se reprer dans loffre dinformation.6. La zone contextuelle permet daccder des informations dtailles.7. La zone de contenu montre les informations figurant dans les rubriques choisies.8. Le pied de page indique lditeur du site et prcise 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

    Dfinition 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 rattachs

    Utilisation: barre de code de couleur (Direction et les Services rattachs), rubrique slectionne dans la navigation principale (arbores-cence dans la colonne de gauche), couleur des liens, point actif dans la navigation principale et lignes de sparation.

    Pour la dfinition des couleurs en Pantone, CMJN et RGB, veuillez consulter le Manuel 5 Publications, pages 4 et 5.

    2 Gris clair #EEEFEF

    Utilisation: bordures de sparation des diffrents contenus.

    3 Noir #000000

    Utilisation: toutes les lignes de sparation.

    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

    Dfinition 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 critres daccessibilit, le texte doit tre format comme suit:

    Police: Arial, taille selon le tableau ci-dessous

    Texte align gauche

    Pas ditalique

    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 daccessibilit / 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 lidentit visuelle de lEtat de FribourgJanvier 2012

    Chancellerie dEtat 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 dEtat:

    Chancellerie dEtat 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