Charte Graphique Intranet.pdf 1s6a4t

INTRANET CHARTE GRAPHIQUE DES INTRANETS JUIN

2006

DIRECTION DES TECHNOLOGIES

M é l a n i e RESPONSABLE

DES

T E TA R T P RO J E T S W E B D E S I G N

01 40 39 63 28 - [email protected]

2

Sommaire OBJECTIFS D’UNE CHARTE GRAPHIQUE

4

CONSEILS & GENERALITÉS

5

ORGANISATION DE L’ESPACE

6

STRUCTURE DES GABARITS

7

PERSONNALISATION DES SITES

8

BANDEAU

9

PRINCIPES DE NAVIGATION

10

ENCARTS DE DROITE

11

PICTOS

12

COULEURS

13

IMAGES

14

EN TÊTE & PIED DE PAGE

16

HIÉRARCHIE DE LECTURE : LA PAGE TYPE

17

BARRE OUTILS & BLOC DE LIEN

18

GABARITS : EXEMPLES DE MISE EN PAGE

20

3

Objectifs Ce document de charte graphique des Intranets est un cadre de travail qui établit les règles de cohérence en matière de design et d'ergonomie pour véhiculer l'identité du Groupe Banque Populaire. Un intranet n’a pas la même vocation qu’un site internet. On ne s’adresse pas aux mêmes types d’internautes. Il s’agit d’un « outils » de communication et non d’un « magazine ». Un intranet doit avoir des principes d’expression « Groupe ». L’information doit être traitée avec la même cohérence sur l’ensemble des intranets d’un groupe.

LES PRINCIPAUX BÉNÉFICES ATTENDUS : - La garantie du respect de "règles de base" en matière de graphisme et d'ergonomie. - Un meilleur confort de l'utilisateur à travers un "cadre général" toujours présent, "rassurant", facilitant le repérage et l'utilisation des informations et fonctions. - Une cohérence et harmonie au travers des différents intranets du Groupe Banque Populaire. L’objectif de ce document est de formaliser l’aspect graphique des sites intranets du Groupe Banque Populaire et ainsi de poser les éléments techniques permettant aux sites de conserver leur intégrité visuelle, lors de la phase d’intégration et pour le développement futur d’autres sites. Cette charte a été conçue de manière à permettre le plus d’évolution et de personnalisation possible. Sa simplicité permet ainsi aussi bien aux utilisateurs de comprendre les possibilités, aux Chefs de Projet d’être force de proposition dans la traduction “des besoins utilisateurs”, qu’aux développeurs / prestataires dans l’amorce d’un projet en conformité avec celle-ci.

4

Conseils & Généralités

COMPATIBILITE AVEC LES NAVIGATEURS Les sites doivent être compatibles avec la version 5+ d'internet explorer. RESOLUTION D'ECRAN Les sites doivent être conçu pour une résolution d'écran de 800*600. Pour toute résolution supérieure, le site se retrouvera centré sur fond gris dans la largeur dans la fenêtre. PROFONDEUR DES PAGES Pour des raisons de lisibilité, il est recommandé de limiter la profondeur à 3 niveaux. LE POIDS DES PAGES Pour des raisons de confort lié au temps de chargement, le poids des pages doit rester inférieur à 50ko. Excepté pour les pages plus graphiques où une taille de 80ko est acceptable. LE POIDS DES FICHIERS TS Les fichiers Word, Powerpoint, pdf... annexés, doivent impérativement se limiter à une taille de 3mo pour garantir la bonne reception par le destinataire. RÈGLE DE NOMMAGE DES FICHIERS Les caractères accentués (é,è,à ...), les apostrophes, les guillemets, les espaces et en règle général tous les caractères non alphabétiques ou numériques sont à proscrire. Vous pouvez cependant utiliser le tiret (-) ou le souligné (_). UTILISATION DE FRAMES Pour faciliter le référencement des pages et leur impression, celles-ci seront construites sans "frames". ILLUSTRATION ET DROITS L'utilisation de n'importe quelle image requiert des droits et doivent être listées dans la mentions "crédits" pour satisfaire les droits d'utilisation. Assurez vous bien que les droits ont bien été négociés pour les s intranet.

5

Organisation

de l’espace

ZONE SUPERIEURE OU BLOC-MARQUE 1-

Logo, nom & accroche de l’intranet et bandeau illustratif

-2 Navigation horizontale, principale et transverse -3 Connexion/identification et accès direct au moteur de recherche ZONE CENTRALE 4-

Chemin de fer ou repère de navigation

5

Zone de contenu

ZONE LATERALE DROITE 6-

Navigation secondaire relative aux rubriques de niveau 1

7-

Modules contextuels ou transverses. Mise en avant, tremplin vers d’autres pages, sites internes ou externes.

8

Boîte à outils

PIED DE PAGE 9

, Plan du site, Copyright, Image de la “mention Groupe”

1 2

3

4 5

6

7 8

9

6

Structure des gabarits

770 px

78 px 25 px 30 px

3 px

25 px

25 px

25 px

25 px 25 px 9 px

552 px

9 px

9 px

7

Personnalisation

des sites

BANDEAU VISUEL En plus de la couleur dominante par Direction, il permet d’illustrer et de préciser visuellement le métier.

COULEUR DOMINANTE RELATIVE À LA DIRECTION Elle s’applique sur : - Les onglets de navigation - Le titre du site - Le fond des cartouches - Les titres, sous-titres et intertitres des contenus - Les liens

8

BEditorial and eau Charte desphoto intranetsCharte des Principegraphique de montage avec fusiongraphique d’images, illustrant le métier intranetsCharte graphique intranetsCharte graphique avec un flou progressif versdes la couleur dominante puis versdes le blanc. intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique desaintranetsCharte graphique Chaque site, direction, métier, son propre bandeau. Pour des chaque intranetsCharte des intranetsCharte des bandeau, il existegraphique une déclinaison de 3 formatsgraphique : intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte des x 78 px FORMAT POUR LES SITES INTRANET graphique 770 intranetsCharte (14ko maximum) graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des

intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des FORMAT POUR LES ENQUÊTES, NEWSLETTER ET intranetsCharte graphique des intranetsCharte graphique des MAILS COMMUNIQUANTS (10ko maximum) 600 x 61 px intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des

intranetsCharte graphique des “PUSH” intranetsCharte graphique des FORMAT POUR ENCART 200 x 40 px intranetsCharte graphique des intranetsCharte graphique des SUR COLONNE DE DROITE (5ko maximum) intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique desCOMME intranetsCharte graphique des OU CAS PARTICULIERS LES PAGES intranetsCharte graphique desOU intranetsCharte graphique des PUBLICATIONS FLASH ACTIFS (ref.ponant) 552 x 40 px intranetsCharte (5 ko maximum) graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des

9

Principes de

Editorial navigation

Charte graphique des intranetsCharte graphique des 2 ESPACES DE NAVIGATION : intranetsCharte graphique des intranetsCharte graphiqueFilet des HORIZONTAL ET VERTICAL séparateur intranetsCharte graphique des intranetsCharte graphique des BLANC intranetsCharte graphique des intranetsCharte graphique des de des 1px intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des Horizontale, transversale et principale pour des rubriques de niveau 1 graphique des intranetsCharte graphique des intranetsCharte - Sur une ligne, centrée, roll-over(changement de couleur) intranetsCharte graphique des intranetsCharte graphique des - Une page sommaire devra etre accessible en cliquant sur le titre la rubrique graphique des intranetsCharte graphique des de intranetsCharte - Possibilité de er un onglet sur intranetsCharte 2 lignes graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des Par défaut : Arial, Regular, Majuscule, #Couleur dominante, fd de cellule #F2F2F2 intranetsCharte graphique des intranetsCharte graphique des Picto flèche Roll-over : Arial, Regular, Majuscule, #Blanc, fd de cellule #Couleur dominante intranetsCharte graphique des intranetsCharte graphique des déscendante intranetsCharte graphique des intranetsCharte graphique des pour montrer intranetsCharte graphique des intranetsCharte graphique des qu’il s’agit de Chemin de fer ou repère de navigation intranetsCharte graphique des intranetsCharte graphique des la navigation intranetsCharte graphique des intranetsCharte graphique des contextuelle. Liens actifs : Arial, 11px, Bold, #Couleur dominante intranetsCharte graphique des intranetsCharte graphique des Page en cours : Arial, 11px, Regular, #3B3B3B intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des Verticale contextuelle et/ou tranverse intranetsCharte graphique des intranetsCharte graphique des - Le cartouche reprend l’intitulé de la Rubrique de niveau 1 des intranetsCharte graphique des intranetsCharte graphique - Au clic sur une rubrique n-2, le sous-niveau n-3 se déplie intranetsCharte graphique des intranetsCharte graphique des (Un niveau supplémentaire maximum n-4intranetsCharte est envisageable) graphique des intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique des Titre du cartouche : Arial, 11px, Majuscule, Bold, #Blanc graphique des intranetsCharte graphique des intraintranetsCharte Rubrique n-2 : Arial, 11px, Bold, #Couleur dominante, précédé d’une flèche de counets leur qui se déplie à 90° Sous-rubrique ou n-3 : Arial, 11px, Regular, #3B3B3B, précédé d’un chevron Roll-over : Rectangle blanc avec contour #3B3B3B

Boîte à outils Titre du cartouche : Arial, 11px, Majuscule, Bold, #Blanc Picto + lien : Arial, 11px, Bold, #Couleur dominante

10

Encarts de droite

Mises en avant, remontées d’actualités, tremplin vers d’autres pages, sites internes ou externes...

Bandeau illustratif avec lien : 200x40 px (5ko max)

Bandeau + Insertion d’un lien court par dessus le bandeau

Possibilité d’associer du texte ou des liens sous le bandeau

Remontée d’actualités sous forme de lien long “en savoir plus” >>> + accès aux archives :Tous les...

Texte avec ou sans vignette* associée *Vignette : 70x70 px (5ko max)

11

Pictos

Seul l’intitulé d’un pictogramme est cliquable et non le pictogramme lui-même.

Dans un soucis d’harmonisation et de cohérence, à la fois pour les développeurs que pour les utilisateurs (clients), des pictogrammes ont été réalisés. De nouveaux pictos sont régulièrement créés au fur et à mesure pour des demandes spécifiques.

picto-doc.gif

picto-zoom.gif

picto-word.gif

picto-outilscom.gif

picto-excel.gif

picto-contribuer.gif

picto-powerpoint.gif

picto-orga.gif

picto-pdf.gif

picto-calendrier.gif

picto-image.gif

picto-search.gif

picto-lecture.gif

picto-auth.gif

picto-son.gif

picto-listeagences.gif

picto-flash.gif

picto-calcul.gif

picto-newsletter.gif

picto-glossaire.gif

picto-mailing.gif

picto-tarif.gif

picto-telechargement.gif

picto-histo.gif

picto-ajouter.gif

picto-habilitation.gif

picto-supprimer.gif

picto-faq.gif

picto-modifier.gif

picto-annuairegroupe.gif

picto-ensavoirplus.gif

picto-annuairesites.gif

picto-mail.gif

picto-inscription.gif

picto-imprimer.gif

picto-commande.gif

picto-archive.gif

picto_alerte.gif

picto-telephone.gif

picto-recherchedansdocs.gif

picto-cocher.gif

12

Couleurs Une couleur a été attribuée par Direction. DIRECTIONS

réf. WEB

réf. RVB

#E6ECF4

230 236 244

PORTAIL GROUPE PONANT

#0E4096

14 64 150

#E5F6FD

229 246 253

BFBP

#00A6EB

0 166 235

#EDEEF5

237 238 245

DÉVELOPPEMENT

#4A579B

74 87 155

#F2E7E7

242 231 231

LOGISTIQUE

#821312

130 19 18

#EFF4F9

239 244 249

RH

#618FBF

97 143 191

#FEF3EC

254 243 236

TECHNOLOGIES

#F18B49

241 159 73

#F4F6E8

244 246 232

FINANCIÈRE

#B3C466

179 196 102

#F3EFF9

243 239 249

STRATÉGIE

#9E7FCD

158 127 205

#F1F6F8

241 246 248

RISQUES

#5D91A2

93 145 162

#F2F3FA

242 243 250

SECRÉTARIAT

#818ACD

129 138 205

#F2EDE7

242 237 231

JURIDIQUE & CONFORMITE

#A9885E

169 136 94

#FAEEEE

250 238 238

COMITÉ D’ENTREPRISE

#E44646

228 70 70

#EAE7D8

234 231 216

AUDIT & CONTROLE PERIODIQUE

#578E46

87 142 170

Background des pages

#E0E0E0

224 224 224

Fond des modules, tableaux et contour d’images

#F2F2F2

242 242 242

Police courrante

#3B3B3B

59 59 59

Couleurs complémentaires pour fond de cellule

13

Editorial Images Pour garantir une homogénéité tout au long des pages et sur l’ensemble des sites, nous avons mis en place plusieurs formats suivant les cas spécifiques.

Pour le traitement des images, le logiciel “The Gimp” ainsi qu’un guide d’utilisation sont à votre disposition. Vous pouvez en faire la demander au SVP (114).

- Les images seront toujours encadrées d’un contour gris #E0E0E0 généré automatiquement en HTML. - Fichiers compressés en .jpg - Toutes images venant illustrer un contenu (une page type) doit être déclinée en 2 formats. - Le respect des formats est impératif pour garantir l’homogénéité et leur réutilisation dans d’autres sites...

FORMAT VIGNETTE 70 x 70px (5 ko maxi)

Un dossier d’images prédécoupées aux formats recommandés est à votre disposition sur P:\Dossiers_Banque _Federale\Photothèque

70 x 70 px

FORMAT CONTENU PAGE TYPE LIBRE 150 x 200 px ou 200 x 150px Horizontale ou Verticale (15 ko maxi) Il s’agit là que d’une recommandation pour éviter des problèmes d’affichage et de chargement liés au poids de celle-ci. Certaines images peuvent cependant faire l’exception selon la nature de l’information. 200 px

14

PHOTOTHÈQUE + ZOOM EN OPEN WINDOW Sur les gabarits de photothèque, la vignette est générée automatiquement et homothétiquement par rapport à l’image d’origine. 400 px

FORMAT IMAGE ZOOM POUR OPEN WINDOW Longueur ou largeur maximum : 400px Il s’agit là encore une fois que d’une recommandation pour éviter l’apparition de scroll (ascenceur) si celleci est plus grande que les paramètres de la fenêtre.

FICHE COLLABORATEUR,TROMBINOSCOPE...

PHOTO D’IDENTITÉE 65 x 90px Respect du format impératif pour l’homogénéité et la réutilisation de celles-ci dans les fiches, trombinoscope... 65 x 90 px

15

En tête & Pied de Page L E S

S T Y L E S

Nom de l’intranet

Arial - Majuscule - Bold - 22 px - #Couleur dominante Accroche de l’intranet

Arial - Majuscule - Regular - 10 px - #3B3B3B

Voir “Principes de navigation”

Positionnement, dimensions et codes couleurs du logo

Intitulé

Arial - Regular - Majuscule - 11px - #3B3B3B

9px

Filet

3px - #Couleur dominante Background des pages #E0E0E0 Utilisation des boutons par défaut. Pas de style associé.

60px

#0E4096

Lien pied de page : Arial, 11px, Bold, #3B3B3B, non souligne uniquement au age de la souris

#00A6EB

Copyright :

Arial, Regular, 9px, #3B3B3B

Ce picto doit apparaître constament dans le pied de page, il permet de remonter directement en haut de la page consultée. Il peut être également intégré à la fin de chaque section. 16

La mention Groupe doit figurée en bas à droite de tous les sites du Groupe Banque Populaire

Hiérarchie de lecture 1 Titre de la page

L A

Cartouche sur fond #Couleur dominante Titre : Arial - Majuscule - Bold - 11px - toujours précédé de

PAGE T Y P E

7

1

2 Sous-titre

Arial - Bold - 16px - #Couleur dominante

6 2

3 Intertitre

Arial - Majuscule - Bold- 11px #Couleur dominante précédé d’une puce carré (7x7px) de la #Couleur dominante

4 3

5

4 Chapeau

Arial - Bold - 12px - #3B3B3B 5 Texte courrant / Paragraphe

Arial - Regular - 11px - #3B3B3B Riche text : Majuscule - Bold - Italic #EF0808 (rouge) - lien hypertexte alignement libre (centré -à gauche à droite)

9

10 6 Légende, Source, Auteur Cartouche sur fond #F2F2F2

11

Arial - Regular - Italic - 11px #3B3B3B 12 7 Date

Arial - Regular - 11px - #FFFFFF 8 Note/PS 8

Arial - Regular - 9px - #3B3B3B 9 Liens courts (Lien hypertexte Bloc liens - mail - en savoir plus...)

Riche text désactivé partout sauf pour les styles Texte courrant / Paragraphe

11 Bloc de lien sur fond #F2F2F2 Intitulé : Arial - Bold - 12 px - #3B3B3B Lien court avec picto associé :

- Etat par défaut : Arial - Bold 11px - #Couleur dominante - Roll over : Même chose mais souligné au age de la souris

Arial - Bold - 11 px - #Couleur dominante 12 Barre d’outils Liens courts avec picto associé :

Arial - Bold - 11 px - #Couleur dominante Filets : 3px - #Couleur dominante

10 Liens longs (Limité à 3/4 lignes Remontées dans les listing...)

- Etat par défaut : Arial Regular - 11px - #3B3B3B +>>> en bold + #Couleur dominante - Roll over : Même chose mais souligné au age de la souris

17

Barre outils

Editorial & Bloc de lien

PRINCIPES DU BLOC DE LIEN ET PRESENTATION Un bloc de lien est une liste de documents ts, de , de lien vers d’autres sites... 2 CAS DE FIGURE Bloc de lien associé à un paragraphe par section

Barre Outils Bloc de lien global à la page

18

BARRE OUTILS Elle se situe toujours en fin de page, elle regroupe les liens uniques de , document et la fonction d’impression. S’il y a plusieurs s ou documents : Alors la liste s’affichera en dehors de la barre outils dans des “BLOC DE LIEN” respectifs pour “s” et “documents”.

19

GABARITS EXEMPLES DE MISES EN PAGE

Encarts de la page d’accueil Pages de Listing & Fiches, Annuaires FAQ & Sommaire avec liens ancrés Formulaires & Tableaux Recherche, Plan du site, Glossaire, Archives Album Photo Mail, Enquête, Newsletter Listing des newsletter

20

21

Encarts de remontées

LES DIFFÉRENTS TYPES D’ENCARTS

en page d’accueil - Encart simple : titre dans cartouche de couleur + info sur fond gris

- Encart Quoi de neuf ? : Tableau avec contour gris + alternance de fond gris Date + début actu cliquable + lien vers archives PONANT

- Encart Actualités : Encarts à part entière. Affichage du titre, chapeau, début de texte... + lien archives Encart Flash (ref.ponant): Mise en avant des actualités “A la Une” de la publication Flash + barre outils. Couleur propre à la Publication “Flash”

Encart évènement (ref.ponant): Mise en avant aléatoire des actualités à caractère évènementielles. Fond #couleur dominante en fonction de la provenance de l’évènement.

22

Page de listing & Fiches,

Contour gris #E0E0E0 de 1px

Annuaires

Intertitre sans puce

Pointillés

FICHES / ANNUAIRES Système de fiche, étiquette...

23

FAQ & Sommaire avec liens ancrés

Listing avec puce carré

, entouré dans un contour gris #E0E0E0.

Système de liens ancrés avec toujours la possibilité de remonter directement en haut de page à l’aide du picto en bas de chaque section à droite.

FAQ

PAGE AVEC SOMMAIRE en haut de page et liens ancrés vers le détail

24

Formulaires &Editorial Ta b l e a u x Champs des FORMULAIRES et menus déroulants Contour de 1px de la #Couleur dominante

Pour les boutons “d’action”, aucun style n’est appliqué, nous utiliserons les boutons standards.

Intitulé de colonne Arial, 11px, Majuscule, Bold, #Blanc sur fond de couleur dominante

TABLEAUX Pour plus de lisibilité, rythmer les rangées des tableaux par une alternance de gris #F2F2F2

25

Recherche, Plan du site,

Glossaire , Archives PLAN DU SITE

GLOSSAIRE

26

MODULEdes DE RECHERCHE Charte graphique intranetsCharte graphique des intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique ARCHIVES intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique Barregraphique de recherche les archives intranetsCharte desdans intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique intranetsCharte graphique des intranetsCharte graphique nets

des des des des des des des des des des des des des des des des des des des des des des des des des des des des des intra-

Album Pho to Largeur ou hauteur maximum des images est de 400px

Contour gris #E0E0E0 de 1px

Barre de navigation entre photos 3px #Couleur dominante

Vignette générée automatiquement

Picto “zoom” qui déclenche l’ouverture de l’image agrandit dans une nouvelle fenêtre

27

Mail, Editorial Enquête, Newsletter

MAIL

- Soit actualité issues du contenu d’un site - Soit texte libre (Anciennement mail à bfbp Tous)

NEWSLETTER

Information plus complète, listing d’actualité : Edito+sommaire avec système de liens ancrés

ENQUÊTE

28

2 3 1

Listing des Editorial newsletter

1 Visuel générique issu de la newsletter + frise 2 Numéro

toujours précédés d’un double chevron de couleur cyan Arial - Bold - 16px - #0E4096 N°X

Arial - Bold - 16px - #Couleur dominante 3 Liens du sommaire

toujours précédés d’une flèche de la couleur dominante Arial - Régular - 11px - #0E4096

1

2 3

29