INTRANET CHARTE GRAPHIQUE DES INTRANETS JUIN. Mélanie TETART DIRECTION DES TECHNOLOGIES R ESPONSABLE DES P ROJETS W EBDESIGN

Transcription

1 INTRANET CHARTE GRAPHIQUE DES INTRANETS JUIN 2006 DIRECTION DES TECHNOLOGIES Mélanie TETART R ESPONSABLE DES P ROJETS W EBDESIGN melanie.tetart@bfbp.banquepopulaire.fr

2 2

3 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 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 Couleurs Une couleur a été attribuée par Direction. DIRECTIONS réf. WEB réf. RVB #E6ECF PORTAIL GROUPE PONANT #0E #E5F6FD BFBP #00A6EB #EDEEF DÉVELOPPEMENT #4A579B #F2E7E LOGISTIQUE # #EFF4F RH #618FBF #FEF3EC TECHNOLOGIES #F18B #F4F6E FINANCIÈRE #B3C #F3EFF STRATÉGIE #9E7FCD #F1F6F RISQUES #5D91A #F2F3FA SECRÉTARIAT #818ACD #F2EDE JURIDIQUE & CONFORMITE #A9885E #FAEEEE COMITÉ D ENTREPRISE #E #EAE7D AUDIT & CONTROLE PERIODIQUE #578E Couleurs complémentaires pour fond de cellule Background des pages #E0E0E Fond des modules, tableaux et contour d images #F2F2F Police courrante #3B3B3B

14 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

15 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 x 90 px 15

16 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

17 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 Sous-titre Arial - Bold - 16px - #Couleur dominante Intertitre Arial - Majuscule - Bold- 11px - #Couleur dominante précédé d une puce carré (7x7px) de la #Couleur dominante Chapeau Arial - Bold - 12px - #3B3B3B 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 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

18 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 19

20 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 21

22 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

23 Page de listing & Fiches, Annuaires Contour gris #E0E0E0 de 1px Intertitre sans puce Pointillés FICHES / ANNUAIRES Système de fiche, étiquette... 23

24 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

25 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

26 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

27 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

28 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

29 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 - #0E