CHARTE INTRANET

CHARTE GRAPHIQUE INTRANET
Usine à sites
Janvier 2015
Confidentialité : C1
Page 1 / 35

CONTACTS
Direction de la communication
COMM DIG
Jean-Paul Chapon
Head of Digital Communications & e-Reputation
Jean-Paul.Chapon@socgen.com
Tél. +33 1 41 45 99 31
Gilles Bexon
MOS Digital Workplace & Usine à sites Intranet
Gilles.Bexon@socgen.com
Tél. +33 1 42 13 15 19
Page 2 / 35
Confidentialité : C1

SOMMAIRE
1 - SYSTEME DE CONCEPTION DES SITES INTRANET ............................................................................5
1.1 UN OUTIL UNIQUE : LIFERAY.......................................................................................................................5
1.2 TYPES DE CONTENUS PROPOSES ...............................................................................................................5
1.3 GABARITS DE PRESENTATIONS POSSIBLES..................................................................................................6
1.3.1 Version Poste de travail ...................................................................................................................6
1.3.2 Version tablettes (projet D4A)..........................................................................................................6
1.3.3 Composition générale ......................................................................................................................8
1.4 PRINCIPES DE PRESENTATION 3 COLONNES ................................................................................................8
1.4.1 Composition générale ......................................................................................................................9
1.4.2 Répartitions des informations ..........................................................................................................9
1.5 PRINCIPES DE PRESENTATION 4 COLONNES ................................................................................................9
1.5.1 Composition générale ................................................................................................................... 10
1.5.2 Répartitions des informations ....................................................................................................... 10
1.6 PRINCIPES DE PAGES D’ACCUEIL ............................................................................................................ 10
1.7 NOS CONSEILS PERFS ............................................................................................................................ 11
1.7.1 Nombre de contenus par page ..................................................................................................... 11
1.7.2 Agrégateurs de contenus .............................................................................................................. 11
1.7.3 Les plus lus / Les plus commentés ............................................................................................... 11
1.7.4 Plan du site ................................................................................................................................... 11
1.7.5 Onglets .......................................................................................................................................... 12
1.7.6 Pages sécurisées ......................................................................................................................... 12
1.7.7 Nettoyer les anciennes versions ................................................................................................... 12
1.7.8 Attribution de rôles (liés à la contribution) .................................................................................... 12
1.8 HAUT DE PAGE ....................................................................................................................................... 13
2 - NAVIGATION ET ERGONOMIE ............................................................................................................. 15
2.1 NAVIGATION HORIZONTALE ..................................................................................................................... 15
2.1.1 Depuis un PC ................................................................................................................................ 15
2.1.2 Depuis une tablette ....................................................................................................................... 15
2.2 NAVIGATION VERTICALE .......................................................................................................................... 16
2.2.1 Navigation PC ............................................................................................................................... 16
2.2.2 Navigation tablettes ...................................................................................................................... 16
2.3 PICTOS ET LIENS .................................................................................................................................... 17
2.4 FIL D’ARIANE ET FOOTER ........................................................................................................................ 18
2.4.1 Fil d’ariane .................................................................................................................................... 18
2.4.2 Footer ............................................................................................................................................ 18
3 - STYLES ................................................................................................................................................... 19
3.1 COULEURS ............................................................................................................................................ 19
3.2 TYPOGRAPHIE ........................................................................................................................................ 20
3.2.1 Cas par défaut .............................................................................................................................. 21
3.2.2 Achat de la licence ........................................................................................................................ 21
3.3 ICONOGRAPHIE ...................................................................................................................................... 22
3.3.1 Pour les tablettes .......................................................................................................................... 22
3.4 IMAGES, FORMATS ET PLACEMENTS......................................................................................................... 24
3.5 EXEMPLES DE BANNIERES ...................................................................................................................... 25
4 - EXEMPLES ............................................................................................................................................. 26
4.1 PORTAIL POLE D’ACTIVITES, PAGE D’ACCUEIL .......................................................................................... 26
4.2 PORTAIL DIRECTION FONCTIONNELLE, PAGE D’ACCUEIL............................................................................ 27
4.3 PORTAIL D’UN SITE METIER, PAGE D’ACCUEIL ........................................................................................... 28
4.4 PAGE D’ACCUEIL ONGLET DE SITE ........................................................................................................... 29
4.5 PAGE DE SOMMAIRE ............................................................................................................................... 30
4.5.1 Une colonne .................................................................................................................................. 30
Confidentialité : C1
Page 3 / 35

4.5.2 Deux colonnes .............................................................................................................................. 31
4.6 PAGE DE CONTENU ................................................................................................................................ 32
4.7 PAGE LISTE DE CONTENUS ..................................................................................................................... 33
4.8 PAGE GALERIE MULTIMEDIA .................................................................................................................... 34
4.9 TABLEAUX ............................................................................................................................................. 35
Confidentialité : C1
Page 4 / 35

1 - SYSTEME DE CONCEPTION DES SITES INTRANET
1.1 Un outil unique : Liferay
La création de cette charte intranet Groupe répond à la volonté d’installer une véritable culture d’entreprise
commune.
Ses principes graphiques capitalisent sur les signes distinctifs de l’identité du Groupe pour favoriser le
ralliement des collaborateurs.
La structure graphique et les principes ergonomiques de la charte permettent de gérer le besoin de
cohérence transversal tout en respectant la particularité de chaque filière métier, branches et entités.
Le groupe met à disposition un outil unique pour l’ensemble des intranets du groupe: Liferay
Les intranets qui ne peuvent bénéficier de cet outil (contraintes techniques ou besoins spécifiques non
couverts par Liferay) continueront de développer leur intranet mais selon les principes de présentation de
cette charte.
Différentes informations complétant cette charte sont présentes sur le site vitrine :
https://uas.safe.socgen/fr/web/uas/accueil
Nb : Cette charte prend en compte les versions Poste de travail et tablettes 8 pouces (mises à disposition
dans le cadre du programme « Digital for All »).
1.2 Types de contenus proposés
Les types de contenu suivants sont proposés :
Audio,
Vidéo,
Image,
Image sans titre,
Flash
Article,
Intertitre,
Bloc libre,
Liste de liens et documents
Bloc multimédia
Agrégateurs de contenus
Profiling
Sondage
Plan du site ou sommaire
Bibliothèque de document
Menu de navigation
Newsletter
Espaces privés
Formulaire
Calendrier,
Nuage de tag,
Bibliothèque de documents
…
Confidentialité : C1
Page 5 / 35

1.3 Gabarits de présentations possibles
1.3.1 Version Poste de travail
1.3.2 Version tablettes (projet D4A)
Sur chacune des pages le menu apparait sur la droite dans un volet ouvrant. Seuls les 3 derniers niveaux
apparaissent.
Ci-après la liste exhaustive des principes de base.
Confidentialité : C1
Page 6 / 35

Il convient donc d’adapter le positionnement des contenus aux 2 types d’utilisation (que se soit
graphiquement ou éditorialement), ceci afin de ne pas rendre illisibles votre Intranet à partir de la version
tablettes.
Nb : La visualisation sur tablettes est la même que l’on soit en mode portrait ou en mode paysage.
Confidentialité : C1
Page 7 / 35

1.3.3 Composition générale
La largeur utile des écrans sur Postes de travail est de 964 pixels, zone centrée dans la fenêtre selon
l’ouverture de la fenêtre du navigateur.
5 largeurs sont possibles pour les colonnes :
1 – colonne 25% = 211px
2 – colonne 33% = 288px
3 – colonne 50% = 442px
4 – colonne 75% = 673px
5 – colonne 100% = 904px
Les images ont des dimensions fixes que l’on soit sur
1.4 Principes de présentation 3 colonnes
Contenus à la Une
/ évènements
Zone réservée aux
actualités en cours ou
aux descriptifs d’activités
Zone réservée aux
informations récurrentes ou
aux liens permanents
Sur tablettes, ce sont les contenus positionnés au centre qui se positionnent en premiers. Par conséquent,
on préfèrera écrire les contenus « chauds » dans cette colonne.
Confidentialité : C1
Page 8 / 35

1.4.1 Composition générale
Le format général est composé de :
1 - la têtière, comprenant la zone de la marque, les outils, le bloc d’identification s’il est prévu.
2 - la zone de navigation horizontale
3 - L’espace de contenu central : Ici composé de 3 colonnes. Cette disposition est généralement utilisée
pour les pages d’accueil. Chacune des 3 colonnes mesure 288 pixels de large séparé de 2 gouttières de
20 pixels.
Les marges extérieures sont de 30 pixels.
1.4.2 Répartitions des informations
- à gauche: les informations liées à l’actualité
- à droite: les informations permanentes
1.5 Principes de présentation 4 colonnes
Contenus à la Une
/ évènements
Zone réservée aux
actualités en cours ou
aux descriptifs d’activités
Zone réservée aux
informations récurrentes
ou aux liens permanents
Sur tablettes, ce sont les contenus positionnés au centre (ou les plus larges selon les cas) qui se
positionnent en premiers. Par conséquent, on préfèrera écrire les contenus « chauds » dans ces colonnes.
Confidentialité : C1
Page 9 / 35

Nb : Toutes les autres dispositions de pages suivront le même fonctionnement. Les contenus que l’on
place en haut de page sur tablettes sont les contenus chauds. Les autres (bannières / liens…) se placent
dans les contenus au dessous.
1.5.1 Composition générale
L’espace de contenu central est divisé en 4 colonnes égales de 220 pixels de large et 3 gouttières de 20
pixels.
Les marges extérieures sont de 30 pixels.
1.5.2 Répartitions des informations
- à gauche: les informations liées à l’actualité
- au centre : les actualités évènementielles
- à droite: les informations permanentes
1.6 Principes de Pages d’accueil
De même que pour les paragraphes précédents, la répartition des infos se fait comme ceci :
- au centre : les informations liées à l’actualité
- à droite : les informations permanentes
- Tout en bas : les informations évènementielles
Nb : Cette répartition permet d’éviter de mauvaises surprises lorsque votre site sera vu à partir d’une
tablette.
Confidentialité : C1
Page 10 / 35

Exemple : 3 zones 25 – 50 - 25
1.7 Nos conseils Perfs
Voici quelques règles pour améliorer les performances de vos pages (rapidité d’affichage notamment) :
1.7.1 Nombre de contenus par page
Il faut penser à alléger les pages, en commençant par limiter le nombre de contenus sur une page.
1.7.2 Agrégateurs de contenus
Les agrégateurs « Listes de contenus » et « Listes de liens » sont consommateurs de ressources.
Il faut limiter ces types de contenus à 1 agrégateur maximum par page ; et éviter qu’ils soient présents sur
la page d’accueil d’un site.
Pour les autres types d’agrégateurs (« Actus 16/9 », « Actus sans images », etc…), on peut en placer 2
maximum par page.
1.7.3 Les plus lus / Les plus commentés
Il faut éviter de positionner le composant « Les plus… » lorsqu’un agrégateur est déjà présent sur la page.
1.7.4 Plan du site
Liferay vous permet d’afficher les niveaux que vous souhaitez dans le plan du site. Faites spécialement
attention si votre site possède un grand nombre de niveaux d’arborescence : n’affichez pas tous les
niveaux !
Confidentialité : C1
Page 11 / 35

1.7.5 Onglets
Limitez le nombre de rubriques de premier niveau (représentées par les onglets) à 7 maximum. Si on en
ajoute plus, vos onglets perdent en visibilité.
1.7.6 Pages sécurisées
Utilisez cette fonctionnalité avec modération. L’authentification prend du temps et elle est consommatrice
de ressources. Cette fonctionnalité est d’autant plus complexe qu’il faut dorénavant gérer les différents
types d’authentification (SAFE / GAIA).
1.7.7 Nettoyer les anciennes versions
Liferay conserve toutes les versions de page, de contenus, de documents chaque fois que vous en créez
une nouvelle. Dès que vous le pouvez, n’hésitez pas à supprimer les anciennes versions qui alourdissent
considérablement votre site !
D’une manière générale :
Utilisez la prévisualisation plutôt que la Publication. En effet, chaque publication crée une nouvelle
version…
pensez à faire du ménage. Certaines pages ne sont plus du tout regardées et n’ont pas
d’importance « historique ».
1.7.8 Attribution de rôles (liés à la contribution)
Certains contributeurs sont déclarés « Responsables de rubriques » sur un nombre très important de
pages. Il est grandement conseillé de les positionner « Admin de site » (dans la mesure du possible). La
multiplication des rôles sur un contributeur augmente le nombre de requêtes techniques à chacun de ses
clics !
Confidentialité : C1
Page 12 / 35

1.8 Haut de page
Le haut de page est dédié à l’identification du site.
Dans le super header, on trouve :
- A gauche, les liens transversaux communs à tous les intranets
- A droite, les outils propres au site concerné
En dessous, la zone de marque et le nom du site :
Le logo ou bloc marque se place à gauche, et le nom du site se place à droite.
‣ Exemples d’identification de sites
Page 13 / 35
Confidentialité : C1

- Acronyme de la direction
- Nom de la direction fonctionnelle ou du pôle
d’activités
- Mention de la direction
- niveau 2 de la direction (optionnel)
- Mention du code de la direction
- Nom du site
- Indication du type de site
- Autre exemple de personnalisation du nom du
site
Page 14 / 35
Confidentialité : C1

2 - NAVIGATION ET ERGONOMIE
2.1 Navigation horizontale
La barre de navigation horizontale permet d’atteindre 3 niveaux de profondeur à partir de toutes les pages
d’un site.
- Le pictogramme ‘Maison’ permet de revenir à la page d’accueil.
- Les onglets gris clairs (rubriques de niveau 1) contiennent les rubriques principales du site.
- Les sous-rubriques (niveaux 2) en gris foncé sont présentées sous les onglets. Les rubriques
actives sont repérées par un aplat gris anthracite.
- Le niveau 3 se présente sous forme de menu déroulant.
II convient de hiérarchiser votre menu de navigation, en fonction du type de contenu que vous avez défini.
L’ordre dans lequel doivent apparaître vos différents contenus est le suivant :
- Institutionnel : contenu qui présente par exemple la direction ou l’entité, sa mission sa vision, ses
valeurs, ses engagements - d’un point de vue général.
- Offres : cet onglet présente les différentes activités décrites sur le site. Il est conseillé d’organiser
cet onglet en fonction des publics cibles. Il sera soit transverse, soit organisé par besoin/cible.
- Rubrique Outils : cet onglet présente les contenus pratiques destinés aux collaborateurs de la
direction ou de l’entité émettrice.
Les liens des onglets sont spécifiques au site. On ne renvoie que de façon exceptionnelle vers d’autres
sites.
Il est conseillé de ne pas dépasser 7 onglets de niveau 1 pour la navigation.
2.1.1 Depuis un PC
2.1.2 Depuis une tablette
Le « burger » (picto aux trois barres horizontales) se place en haut à droite de la tablette.
Il est noir quand il n’est pas sélectionné, rouge quand le menu est déroulé.
Exemple de menu déroulé :
Lorsqu’il est déroulé, le menu prend toute la largeur de la page.
(Attention, menu non finalisé)
Confidentialité : C1
Page 15 / 35

2.2 Navigation verticale
Le menu vertical se place du côté gauche de la page. Il complète la navigation horizontale dans les pages
du site (hors page d’accueil !).
Menu fermé :
2.2.1 Navigation PC
Menu ouvert :
2.2.2 Navigation tablettes
Les menus verticaux sont présentés à partir du niveau 3 d’arborescence. Ils se présentent sous forme de
menu tiroir présenté sur la gauche de votre tablette, à l’aide de cet onglet :
Lorsqu’on étire le menu vers la droite, cela donne :
(Attention, menu non finalisé)
Confidentialité : C1
Page 16 / 35

Lorsqu’il est étiré, le menu prend environ 2/3 de la largeur de la page.
2.3 Pictos et liens
Les liens sont la plupart du temps générés automatiquement dans le back office.
Les pictos prennent la couleur du contenu sélectionné par le contributeur (voir plus loin).
Ex :
- En noir :
- En rouge :
Ou (selon le type de contenu) :
Picto pièce jointe, ici présenté en noir :
Commentaire :
D’autres pictos sont proposés dans la charte. Ils ne sont cependant que rarement utilisés et peu
préconisés au sein des contenus.
Par défaut on privilégie les liens précédés d’un picto qui précise leur fonction.
Page 17 / 35
Confidentialité : C1

Le libellé est en gras, non souligné.
2.4 Fil d’ariane et footer
2.4.1 Fil d’ariane
Le fil d’ariane (ou chemin de fer ou traceur) apparaît dès la page d’accueil du Portail, au dessus de la zone
de contenu et aligné à gauche avec la barre de navigation horizontale.
Les sections du fil d’ariane sont cliquables et permettent de remonter aux pages situées à un niveau
supérieur à la page consultée.
Exemple :
2.4.2 Footer
Dans le footer, on pourra trouver des liens du type :
I Charte d’utilisation I Crédits I FAQ I Mentions Légales I Plan du site I Accessibilité
Exemple de footer (avec picto accessibilité vérifiée) :
Confidentialité : C1
Page 18 / 35

3 - STYLES
3.1 Couleurs
Le blanc est la couleur dominante suivie des couleurs institutionnelles (le rouge, le noir et le gris) pour tous
les sites.
L’orange, le bleu et le violet. Elles permettent de différencier un site Intranet d’un site Internet.
Les couleurs complémentaires interviennent dans la zone de contenu pour les aplats, titres ou fond de titre.
Elles s’appliquent aussi aux différents pictogrammes et bannières.
Les couleurs complémentaires sont présentées à titre indicatif (liste non exhaustive). Ces couleurs peuvent
être complétées par les couleurs «métiers» de la charte internet.
Confidentialité : C1
Page 19 / 35

3.2 Typographie
Utilisation de la typographie HELVETICA NEUE.
Page 20 / 35
Confidentialité : C1

Il y a deux cas d’utilisation de la typographie sur les pages HTML des sites web :
3.2.1 Cas par défaut
Si la typographie Helvetica Neue est installée sur le poste utilisateur, celle-ci s’affiche sur les pages HTML
(ex : utilisateurs Mac). Sinon, la police est substituée automatiquement par de l’Arial.
3.2.2 Achat de la licence
Helvetica Neue est une police sous licence propriétaire, il est donc interdit de la proposer gratuitement aux
utilisateurs ne l’ayant pas installée sur leur poste.
Si l’entité souhaite proposer la typographie Helvetica Neue même pour les utilisateurs qui n’ont pas la
typographie installée sur leur poste, elle doit alors acheter une licence rattachée à son nom de domaine sur
le site http://www.fonts.com .
- Achat typographie Helvetica Neue Light 45 et Helvetica Neue Medium 65
http://www.fonts.com/font/linotype/neue-helvetica/45-light/web-font
http://www.fonts.com/font/linotype/neue-helvetica/65-medium/web-font
- Le type de licence correspond aux besoins de l’entité et se calcule en fonction du nombre de
visiteurs/mois. C’est à l’entité de choisir la souscription qui lui convient le mieux.
- Lorsque la transaction est effectuée, le site fonts.com met à disposition un lien vers une feuille de
style unique et utilisable seulement depuis le site portant le nom de domaine associé à la
typographie achetée.
- La ligne de code à remplacer pour le chargement de la fonte Helvetica Neue via le site fonts.com
est la suivante :
o Entre les balises et , intégrer la balise suivante :
o
Le lien en rouge est à remplacer par le lien fourni par Fonts.com à l’achat de la
typographie.
- Avec cette méthode, le site web rattaché s’affichera avec la police Helvetica Neue pour tous les
utilisateurs.
Titre de page
Titre éditorial
Textes courant et liens html
Introduction
Contenu
24px Helvetica Neue Thin
18px Helvetica Neue Thin
Arial regular ou bold
14px
12px
Textes des contenus HTML :
- L’Arial est utilisé pour la navigation, le contenu et les textes dans le header et le footer.
- L’Helvetica Neue Thin est utilisé pour les titres, images, widgets et bloc éditoriaux.
Page 21 / 35
Confidentialité : C1

3.3 Iconographie
L’iconographie reprend les principes de la charte iconographique Société Générale :
Style : reportage, moment volé, mouvement, sur le vif, en relation
Valoriser : les valeurs du Groupe : innovation, esprit d’équipe, responsabilité et engagement, diversité
culturelle et géographique, générationnelle, le relationnel
Couleurs légèrement désaturées
Sur les Intranets on leur associe des accroches avec un titrage de couleur vive afin de mettre en avant un
message.
ATTENTION les textes doivent avoir des couleurs suffisamment contrastée pour une bonne lisibilité
(critères d’accessibilité)
3.3.1 Pour les tablettes
Les images qui prennent 100% de la taille d’une colonne sur un écran PC ne prendront plus forcément
100% de la largeur de la colonne sur tablette.
Exemple :
En format 3 colonnes, l’image ci-dessous fait 288px de large (soit 100% de la largeur). Sur tablette, l’image
n’est pas redimensionnée. Elle est centrée comme ceci :
Confidentialité : C1
Page 22 / 35

Confidentialité : C1
Page 23 / 35

3.4 Images, formats et placements
On trouve 2 formats d’image fixes :
- 120 x 120 px pour les images introductives
- 50 x 50 px pour les vignettes de sommaire et « image preview » integrées dans les agrégateurs de
contenus
Tous les autres formats remplissent une largeur de colonne (deux pour la structure 4 colonnes dans le cas
où les 2 colonnes centrales sont fusionnées)
Si elles prennent la largeur de la colonne, ce sera donc : 211, 288, 442, 673 ou 904px.
Les vignettes (ou « images preview » en anglais) ont des tailles fixées par l’outil (50*50px
Confidentialité : C1
Page 24 / 35

3.5 Exemples de bannières
33%, 25%...
Page 25 / 35
Confidentialité : C1

4 - EXEMPLES
4.1 Portail Pôle d’activités, page d’accueil
Exemple : IBFS
Page 26 / 35
Confidentialité : C1

4.2 Portail Direction fonctionnelle, page d’accueil
Portail Ressources (RESG)
Page 27 / 35
Confidentialité : C1

4.3 Portail d’un site métier, page d’accueil
Portail Reflex (GTPS)
Page 28 / 35
Confidentialité : C1

4.4 Page d’accueil onglet de site
Page 29 / 35
Confidentialité : C1

4.5 Page de sommaire
4.5.1 Une colonne
Ce qui est appelé « sommaire » est situé dans la colonne centrale. C’est, par exemple, un contenu suivi
d’un agrégateur de contenus.
Confidentialité : C1
Page 30 / 35

4.5.2 Deux colonnes
Même principe que pour le sommaire une colonne.
Page 31 / 35
Confidentialité : C1

4.6 Page de contenu
Il existe bien des moyens de créer une page de contenu.
Généralement, on y trouve le menu sur la gauche.
Page 32 / 35
Confidentialité : C1

4.7 Page Liste de contenus
Page 33 / 35
Confidentialité : C1

4.8 Page Galerie multimédia
Page 34 / 35
Confidentialité : C1

4.9 Tableaux
Les tableaux peuvent respecter les normes d’accessibilité. Pour plus d’info, voir la charte d’accessibilité sur
Wellcom>Outils>Chartes graphiques>Internet et Intranet.
Confidentialité : C1
Page 35 / 35