INTRANET CHARTE GRAPHIQUE DES INTRANETS JUIN 2006 DIRECTION DES TECHNOLOGIES Mélanie TETART R ESPONSABLE DES P ROJETS W EBDESIGN 01 40 39 63 28 - melanie.tetart@bfbp.banquepopulaire.fr
2
Sommaire OBJECTIFS D UNE CHARTE GRAPHIQUE CONSEILS & GENERALITÉS ORGANISATION DE L ESPACE STRUCTURE DES GABARITS PERSONNALISATION DES SITES BANDEAU PRINCIPES DE NAVIGATION ENCARTS DE DROITE PICTOS COULEURS IMAGES EN TÊTE & PIED DE PAGE HIÉRARCHIE DE LECTURE : LA PAGE TYPE BARRE OUTILS & BLOC DE LIEN GABARITS : EXEMPLES DE MISE EN PAGE 4 5 6 7 8 9 10 11 12 13 14 16 17 18 20 3
Objectifs 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. 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. 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 JOINTS 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 supports 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 Contact, Plan du site, Copyright, Image de la mention Groupe 1 4 2 3 5 6 7 8 9 6
Structure des gabarits 770 px 78 px 25 px 3 px 30 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
Bandeau Editorial Charte Principe graphique de montage des photo intranetscharte avec fusion graphique d images, illustrant des le métier intranetscharte avec un flou progressif graphique vers des la couleur intranetscharte dominante graphique puis vers des le blanc. intranetscharte Chaque site, direction, graphique métier, des a intranetscharte son propre bandeau. graphique Pour des chaque intranetscharte bandeau, il existe graphique une déclinaison des intranetscharte de 3 formats graphique : des intranetscharte FORMAT POUR graphique LES SITES des intranetscharte INTRANET graphique 770 desx 78 px intranetscharte (14ko maximum) graphique des intranetscharte graphique des intranetscharte FORMAT POUR graphique LES ENQUÊTES, des intranetscharte NEWSLETTER graphique des ET intranetscharte MAILS COMMUNIQUANTS graphique des intranetscharte (10ko maximum) graphique des 600 x 61 px intranetscharte FORMAT POUR graphique ENCART des PUSH intranetscharte graphique des 200 x 40 px intranetscharte SUR COLONNE graphique DE DROITE des intranetscharte (5ko maximum) graphique des intranetscharte graphique des intranetscharte graphique des intranetscharte graphique des intranetscharte graphique des intranetscharte OU CAS PARTICULIERS graphique des COMME intranetscharte LES PAGES graphique des intranetscharte PUBLICATIONS graphique FLASH des OU intranetscharte ACTIFS (ref.ponant) graphique des 552 x 40 px (5 ko maximum) 9
Principes de Editorial navigation Charte graphique des intranetscharte graphique des 2 ESPACES DE NAVIGATION : intranetscharte graphique des intranetscharte graphique Filet des HORIZONTAL ET VERTICAL intranetscharte graphique des intranetscharte graphique séparateur des intranetscharte graphique des intranetscharte graphique BLANC des intranetscharte graphique des intranetscharte graphique de des 1px Horizontale, transversale et principale intranetscharte pour des graphique rubriques des intranetscharte de niveau 1 graphique des - Sur une ligne, centrée, roll-over(changement intranetscharte de couleur) graphique des intranetscharte graphique des - Une page sommaire devra etre accessible intranetscharte en cliquant graphique sur le titre des de intranetscharte la rubrique graphique des - Possibilité de passer un onglet sur intranetscharte 2 lignes graphique des intranetscharte graphique des Par défaut : Arial, Regular, Majuscule, #Couleur dominante, fd de cellule #F2F2F2 Roll-over : Arial, Regular, Majuscule, #Blanc, fd de cellule #Couleur dominante Picto flèche déscendante pour montrer qu il s agit de Chemin de fer ou repère de navigation la navigation Liens actifs : Arial, 11px, Bold, #Couleur dominante contextuelle. Page en cours : Arial, 11px, Regular, #3B3B3B Verticale contextuelle et/ou tranverse - Le cartouche reprend l intitulé de la intranetscharte Rubrique de niveau graphique 1 des intranetscharte graphique des - Au clic sur une rubrique n-2, le sous-niveau intranetscharte n-3 se déplie graphique des intranetscharte graphique des (Un niveau supplémentaire maximum n-4 intranetscharte est envisageable) graphique des intranetscharte graphique des Titre du cartouche : Arial, 11px, Majuscule, intranetscharte Bold, #Blanc graphique des intranetscharte graphique des intranets Rubrique n-2 : Arial, 11px, Bold, #Couleur dominante, précédé d une flèche de couleur 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 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. Seul l intitulé d un pictogramme est cliquable et non le pictogramme lui-même. picto-doc.gif picto-word.gif picto-excel.gif picto-powerpoint.gif picto-pdf.gif picto-image.gif picto-lecture.gif picto-son.gif picto-flash.gif picto-newsletter.gif picto-mailing.gif picto-telechargement.gif picto-ajouter.gif picto-supprimer.gif picto-modifier.gif picto-ensavoirplus.gif picto-mail.gif picto-zoom.gif picto-outilscom.gif picto-contribuer.gif picto-orga.gif picto-calendrier.gif picto-search.gif picto-auth.gif picto-listeagences.gif picto-calcul.gif picto-glossaire.gif picto-tarif.gif picto-histo.gif picto-habilitation.gif picto-faq.gif picto-annuairegroupe.gif picto-annuairesites.gif picto-inscription.gif picto-imprimer.gif picto-archive.gif picto-commande.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 Couleurs complémentaires pour fond de cellule 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 13
Editorial Images 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). 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. - 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... Un dossier d images prédécoupées aux formats recommandés est à votre disposition sur P:\Dossiers_Banque _Federale\Photothèque FORMAT VIGNETTE 70 x 70px (5 ko maxi) 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 9px Positionnement, dimensions et codes couleurs du logo Intitulé Arial - Regular - Majuscule - 11px - #3B3B3B Filet 3px - #Couleur dominante Background des pages #E0E0E0 60px #0E4096 #00A6EB Utilisation des boutons par défaut. Pas de style associé. Lien pied de page : Arial, 11px, Bold, #3B3B3B, non souligne uniquement au passage de la souris 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. La mention Groupe doit figurée en bas à droite de tous les sites du Groupe Banque Populaire 16
Hiérarchie de lecture LA PAGE TYPE 1 Titre de la page Cartouche sur fond #Couleur dominante Titre : Arial - Majuscule - Bold - 11px - toujours précédé de 1 6 7 2 Sous-titre Arial - Bold - 16px - #Couleur dominante 2 4 3 Intertitre Arial - Majuscule - Bold- 11px - #Couleur dominante précédé d une puce carré (7x7px) de la #Couleur dominante 3 5 4 Chapeau Arial - Bold - 12px - #3B3B3B 9 11 12 10 5 6 7 Texte courrant / Paragraphe Arial - Regular - 11px - #3B3B3B Riche text : Majuscule - Bold - Italic - #EF0808 (rouge) - lien hypertexte - alignement libre (centré -à gauche - à droite) Légende, Source, Auteur Cartouche sur fond #F2F2F2 Arial - Regular - Italic - 11px - #3B3B3B Date Arial - Regular - 11px - #FFFFFF 8 8 Note/PS Arial - Regular - 9px - #3B3B3B Riche text désactivé partout sauf pour les styles Texte courrant / Paragraphe 11 12 Bloc de lien sur fond #F2F2F2 Intitulé : Arial - Bold - 12 px - #3B3B3B Lien court avec picto associé : Arial - Bold - 11 px - #Couleur dominante Barre d outils Liens courts avec picto associé : Arial - Bold - 11 px - #Couleur dominante Filets : 3px - #Couleur dominante 9 10 Liens courts (Lien hypertexte - Bloc liens - mail - en savoir plus...) - Etat par défaut : Arial - Bold - 11px - #Couleur dominante - Roll over : Même chose mais souligné au passage de la souris 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 passage 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 joints, de contact, 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 BARRE OUTILS Elle se situe toujours en fin de page, elle regroupe les liens uniques de contact, document et la fonction d impression. S il y a plusieurs contacts ou documents : Alors la liste s affichera en dehors de la barre outils dans des BLOC DE LIEN respectifs pour contacts et documents. 18
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 en page d accueil LES DIFFÉRENTS TYPES D ENCARTS - 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, Annuaires Contour gris #E0E0E0 de 1px 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 Tableaux 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 Charte graphique MODULE des DE intranetscharte RECHERCHE graphique des intranetscharte ARCHIVES graphique des intranetscharte graphique des intranetscharte Barre graphique de recherche des dans intranetscharte les archives graphique des intranets 26
Album Photo 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, Enquête, Editorial Newsletter MAIL - Soit actualité issues du contenu d un site - Soit texte libre (Anciennement mail à bfbp Tous) NEWSLETTER Information plus complète, 2 listing d actualité : Edito+sommaire 3 avec système de liens ancrés 1 ENQUÊTE 28
Listing des Editorial newsletter 1 2 Visuel générique issu de la newsletter + frise 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