Passeport Web 09. Introduction Architecture Règles de déclinaison

Transcription

1 Passeport Web 09 Introduction Architecture Règles de déclinaison

2 Introduction A propos Planche d intentions

3 A propos Voyage au cœur de la marque numérique L objectif de ce document est de garantir une cohérence graphique au sein du dispositif Internet en lien avec la charte corporate de GDFSUEZ et l ensemble des outils de communication interne. Ces guidelines s appliquent à l ensemble des sites de GDFSUEZ et toute exception devra être vue et validée avec le Centre d Expertise. Les guidelines concernent plus particulièrement les structures et tendances graphiques des sites. Néanmoins, les principes, traitement et partis-pris énoncés s appliquent à chaque niveau d arborescence. Ce document sera amené à évoluer et à s enrichir. Ce document est émis par la Direction de la Communication en lien avec le Centre d Expertise.

4 Une forme structurante pour une perception immédiate de la marque Planche d intentions Une structure dynamique en mouvement Une forme d accueil justifiant l approche du groupe Sécurité / Confiance : 2 entités sûres, qui ont fait leurs preuves Ouverture / Avenir : une nouvelle stratégie, une volonté de s ouvrir aux autres Une vibration synonyme d Energie et Dynamisme

5 Une ambiance visuelle porteuse d émotions L horizon est la limite de ce que chacun peut voir. Planche d intentions La continuité du bandeau en hors champ : ça se passe partout même au delà de ce que vous pouvez voir Des visuels panoramiques donnant à voir un horizon Une image découpée en forme d horizon : une invitation à entrer et plonger dans l image

6 Planche d intentions Un accès à l information pensé et structuré Une famille typographique anguleuse et arrondie en écho à la forme d accueil Helvetica Neue - titrages ABC abc ABC abc Tahoma texte courant ABC abc La dynamique des couleurs Des couleurs froide pour les prises de parole de la marque. Des couleurs chaudes pour les éléments d échanges et d interactions. Un univers pastel pour englober le tout dans un climat de confiance et apaisant.

7 Architecture Zoning Déclinaison des grilles

8 Zoning Structurer et hiérarchiser l information Eléments structurants d une grille standard 1 - identitaire et zone transverse 2 - navigation principale 3 - zone éditoriale + navigation secondaire 4 - footer Ce zoning général présente les zones principales d architecture. Sa structure offre une souplesse de déclinaison

9 Zoning 1 - Zone identitaire et fonctionnalités transverses 1.1 Encadré + Positionnement du logotype : Placé toujours en haut à gauche de la structure le logo doit être positionné dans la zone graphique dédiée Zone d information et/ou Fonctionnalités transverses 1.3 Zone d expression visuelle 1.4 Expression éditoriale

10 Zoning 2 - Navigation de premiers niveaux Premier niveau : Numérotée et en capitale, on identifie la rubrique active par une flèche et un éventuel jeu de couleur 2.2 Second niveau : En minuscule, la typographie système est privilégiée L emplacement de cet élément peut évoluer en fonction de la profondeur éditoriale du site et de la grille

11 Zoning 3 - Zone éditoriale L organisation des contenus s organise autour de 4 gabarits distincts toutes grilles confondues 3.1 Full page : Utilisée pour l affichage de modules très spécifiques, cette grille offre une largeur maximale pour la présentation des contenus 3.2 Navigation ou focus : Zone de contenu large avec navigation horizontale 3.3 Navigation + focus (continuum) : Zone de contenu encadrée par la navigation et les Focus (continuum) d accès aux contenus de page px px 760px

12 Zoning 4 - Footer Eléments structurants d une grille standard Pied de page dédié au site 4.2 Footer corporate centralisé : Vecteur commun, il est utilisé pour véhiculer l information Groupe Baseline légale : Soutenue par un ombré rappelant l horizon. Cette baseline répond à une obligation légale française

13 Grilles Répondre aux besoins éditoriaux et fonctionnels de chaque site L identification des besoins est primordiale dans le choix d une grille. Le besoin identitaire, l architecture de contenus et l approche éditoriale sont autant de critères décisifs dans la sélection. _4 types de gabarits structurants permettent de déployer le site : Homepage Sous Homepage (facultatif) Page Navigation _3 niveaux de besoin identitaire segmentent finement le besoin (Fort, Moyen, Faible) et posent l équilibre des structures entre graphisme et éditorial. _3 modes de navigation couvrent l envergure éditoriale globale (Horizontale1&2, Verticale) Homepage Sous Homepage Page Navigation Fort Horizontale 1 Moyen Horizontale 2 Faible Verticale

14 Grilles Homepage 75% Page d accueil du site, cette structure est très important dans le premier contact avec l utilisateur. On distingue 3 architectures : 1 Fort : Visuellement forte, cette structure permet de faire passer un message important au travers du visuel. Info+ : Intéressant pour une approche de partenariat ou évènementielle. 40% 2 Moyen : Utilisée pour des homepage de type corporate, cette approche offre un équilibre entre la zone d expression graphique et la zone éditoriale. 3 Faible : Très limitée graphiquement cette structure offre une envergure éditoriale très importante. Utilisée pour les sites de crises ou d informations riches. 25% Infos+ Une grille supplémentaire «full graphique» peut répondre à un besoin très particulier de type campagne qui ne rentre pas forcement dans la structure native du Framework GDF SUEZ.

15 Grilles Sous Homepage 75% Facultatif, ce gabarit s impose dans des sites à forte envergure éditoriale. Dans le même esprit que la page d accueil, 3 types d architecture sont déclinés : 1 Fort : Expression graphique importante, cette structure peut trouver un intérêt fort dans un discours commercial ou de marque. 40% 2 Moyen : Equilibre entre zone graphique et remontées éditoriales. Le bandeau d identité met en avant le métier ou l esprit de la rubrique. 3 Faible : Forte éditorialement, l intérêt graphique pour ce gabarit est moindre. La zone graphique permettra simplement d identifier la rubrique et d en faire bénéficier les pages attenantes. 25%

16 Grilles Page 30% Elément central du site et décliné en 4 organisations possibles (cf Zoning Editorial), ce gabarit a pour objectif principal la présentation des contenus. 3 niveaux permettent de couvrir les besoins en termes d équilibre identitaire et besoin éditorial. 20% 1 Fort : La zone graphique, spécifique par page, accompagne et pose le discours de la page. 2 Moyen : L appartenance à la rubrique est affichée et crée une cohérence dans la navigation de l utilisateur. 3 Faible : Zone d expression graphique nulle pour un besoin éditorial important, l illustration graphique trouve sa place dans le contenu. 0%

17 Grilles Navigation 1 La navigation se définie par profondeur éditoriale et besoin ergonomique. 3 méthodes peuvent être utilisées en fonction des besoins: 1 Horizontale 1 : Répond à une profondeur d arborescence forte en proposant 1, 2 ou 3 (exceptionnellement) niveaux d arborescences dans la navigation horizontale. Les autres niveaux se situant dans la zone verticale gauche de la page. 2 2 Horizontale 2 : Limitée à un seul niveau dans la zone horizontale, sont placement l intègre dans la zone d expression graphique pour donner plus d importance à l espace réservé aux fonctions transverses. Info+ : Privilégier cette structure pour des sites à faibles contenus et àfortes interaction avec l utilisateur 3 Verticale : Optimisée pour une profondeur max d arborescence de 3 niveaux, cette navigation se place dans la col de gauche de la page. 3

18 Règles de déclinaison Gamme de couleurs Expression graphique

19 Gamme de couleurs Créer une gamme en cohérence avec les codes graphiques métiers et Groupe Règle générale : 3 couleurs principales structurantes. Couleur 1 : Corporate Couleur métier déclinée ou Corporate, elle pose l endossement du logo dans un dégradé léger. Couleur 2 : Associée ou Métier Couleur associée (ou complémentaire) de la couleur 1, elle s inscrit dans la logique couleurs Groupe et pose un premier niveau hiérarchique de contenu. Couleur 3 : Libre Couleur d appui utilisée essentiellement dans la structuration éditoriale (titrage, Focus ). Elle se choisit librement en fonction des 2 premières couleur pour créer une identité harmonieuse. Infos+ Pour des environnements marque avec une identité forte, il est préconisé d utiliser une couleur 1 très neutre. Le travail de hiérarchisation et d animation éditoriale permet l insertion de couleurs d accompagnement à cette gamme principale.

20 Gamme de couleurs L univers coloriel 3 familles de couleurs structurent l environnement coloriel du Groupe. Corporate Associée(couleur d accompagnement) Métier Infos+ Les codes couleurs sont disponibles dans la charte graphique corporate

21 Gamme de couleurs La vibration Expression des énergies rassemblées symbolisant la dynamique du Groupe. Composée de traits nets et floutés de différentes couleurs et d épaisseurs, son placement se situe en accompagnement du bandeau d expression graphique, sa hauteur et ses couleurs associées sont variables en fonction des besoins et du gabarit.. Différents types de vibrations sont possibles : Vibration simple Vibration medium Vibration large Simple Medium Large Infos+ Des variations de couleurs par métiers sont disponibles en annexes et dans la charte édition corporate Une composition peut être réalisée en fonction des couleurs présentes dans la gamme du site. Dans ce cas la seule contrainte est de conserver la ligne rouge.

22 Exemple d utilisation Gamme de couleurs

23 Exemple d utilisation Gamme de couleurs

24 Expression graphique Exploiter les zones d expression pour affirmer une identité forte L objectif de cette charte est de créer une uniformité graphique. Il est important de conserver certaines libertés pour permettre à chacun de poser une identité spécifique. 1 Les degrés de liberté se situent dans différentes zones de la structure : 1. Bandeau d expression graphique 2. Background du site 3. Contenu textuel et illustratif 4. Traité des focus 5. Footer