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