Identité visuelle de l Manuel Internet, Intranet et applications Web Janvier 202 Charte graphique Internet, Intranet et applications Web
6.0 Internet, Intranet et applications Web Sommaire 6. Généralités: site Internet, Intranet et applications web 4 6.2 Accueil 5 6. 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 6.8 Définition de la police 2 6.9 Impressum 4
6. 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 comprennent 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, R0) et l accessibilité (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). 4 Charte graphique Internet, Intranet et applications Web
6.2 Accueil Charte graphique Internet, Intranet et applications Web 5
6. Structure des pages La structure des pages a été optimisée pour une résolution de 24 x 768 pixels. En cas de maquette dynamique, la largeur de la colonne 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.. 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 et à la localisation de l unité d organisation.. 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. 2 4 5 6 9 7 8 6 Charte graphique Internet, Intranet et applications Web
6.4 Template accueil 570 970 400 0 9 5 7 2 85 25 27 80 29 5 5 9 variable, mais max. 250 px 50 27 560 6 2 4 0 20 5 25 970 Charte graphique Internet, Intranet et applications Web 7
6.5 Template standard 570 970 400 0 9 5 7 9 85 25 52 2 27 29 9 5 5 5 20 25 20 variable 40 20 5 25 80 570 80 8 Charte graphique Internet, Intranet et applications Web
6.6 Template large 570 970 400 0 9 5 7 9 85 25 2 27 29 52 5 variable 5 5 variable variable 40 20 5 25 80 760 Charte graphique Internet, Intranet et applications Web 9
6.7 Définition des couleurs 2 4 4 4 2 4 Charte graphique Internet, Intranet et applications Web
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 (arborescence 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. DICS #9B889 DSJ #44697D DIAF #972F DAEC #0069C DFIN #669B7 DSAS #004DB4 DEE #002C77 CHA #00958 2 Gris clair #EEEFEF Utilisation: bordures de séparation des différents contenus. Noir #000000 Utilisation: toutes les lignes de séparation. 4 Blanc #FFFFFF Utilisation: fond du site Web et fond des contenus. Charte graphique Internet, Intranet et applications Web
6.8 Définition de la police 2 4 2 2 5 2 8 6 7 4 8 9 5 2 9 5 2 6 7 2 Charte graphique Internet, Intranet et applications Web
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 Localisation de la Direction / du Service gras (sigle en non-gras) 2 pt #000000 Barre d accessibilité / liens contextuels / recherche / chemin de navigation 2 Lien gras pt #000000 Choix de la langue / meta-navigation Lien gras 2 pt #000000 4 Liens actifs gras 2 pt #CCCCCC Navigation principale 5 Lien er niveau normal pt #000000 6 Lien er niveau actif gras pt couleur de la Direction / du Service > voir page 7 Lien 2 e niveau gras 2 pt #000000 8 Lien 2 e niveau actif gras 2 pt couleur de la Direction / du Service > voir page 9 Lien e niveau normal 2 pt #000000 Lien e niveau actif gras 2 pt couleur de la Direction / du Service > voir page Lien 4 e niveau normal pt #000000 2 Lien 4 e niveau actif gras pt couleur de la Direction / du Service > voir page Contenu Titre gras 5 pt #000000 4 Police de base normal 4 pt #000000 5 Lien contenu normal 4 pt couleur de la Direction / du Service > voir page 6 Pied de page (texte) normal pt #000000 7 Pied de page (lien) normal pt couleur de la Direction / du Service > voir page 8 Contexte (texte) normal 2 pt #000000 9 Contexte (lien) normal 2 pt couleur de la Direction / du Service > voir page Charte graphique Internet, Intranet et applications Web
6.9 Impressum Extrait «Manuel Internet, Intranet et applications Web» de la charte graphique de l identité visuelle de l Janvier 202 Chancellerie d Etat CHA Staatskanzlei SK Rue des Chanoines 7, 70 Fribourg www.fr.ch/cha Pour de plus amples informations, veuillez contacter le Secteur des projets informatiques de la Chancellerie d Etat: Chancellerie d Etat CHA Staatskanzlei SK Secteur des projets informatiques Sektor Informatikprojekte Rue des Chanoines 7, 70 Fribourg T +4 26 05 45, F +4 26 05 48 www.fr.ch/cha Conception et élaboration de la charte graphique: macmac.ch 4 Charte graphique Internet, Intranet et applications Web