Spécifications fonctionnelles du site Danone RA 2017 Version du 15/12/2017

Contexte ........................................................................................................................... 4 Principes généraux............................................................................................................ 4 Design et responsive web design ............................................................................................................................... 4 Typographies ...................................................................................................................................................................... 4 Gestion multilingue .......................................................................................................................................................... 4 Partage réseaux sociaux ................................................................................................................................................. 4 Retour haut de page ......................................................................................................................................................... 4

Structure du site – arborescence ....................................................................................... 5 Description Gabarit page Home & N-1 // version mobile ................................................... 6 Structure générale des pages ....................................................................................................................................... 6 Menu déplié // version mobile ................................................................................................................................... 9

Description Gabarit page Home & N-1 // version desktop ............................................... 10 Zone de navigation ......................................................................................................................................................... 10 Zone d’affichage des contenus en desktop ........................................................................................................... 11 1 – Le visuel de fond....................................................................................................................................................... 11 2 – Le titre .......................................................................................................................................................................... 12 3 – Le sous-titre ............................................................................................................................................................... 12 4 – Le chapô ....................................................................................................................................................................... 12 5 – Les encarts .................................................................................................................................................................. 12 6 – Le bouton d’accès au contenu ............................................................................................................................. 12

Gabarit page N-1 // Version mobile ................................................................................ 13 Description // Gabarit page interne – model 1 // version mobile ..................................... 14 Description // Gabarit page interne – model 1 // version desktop ................................... 15 Description // Gabarit page Download center // version mobile ..................................... 16 Description // Gabarit page Download center // version desktop .................................... 17 Description // Gabarit page Module projets // version mobile ........................................ 18 Description // Gabarit page Module projets // version desktop....................................... 18 Description // zone de contenus – téléchargement // version mobile.............................. 19 Description // zone de contenus – téléchargement // version desktop ............................ 20 Description // zone de contenus – image + zoom // version mobile ................................. 20 Description // zone de contenus – image + zoom // version desktop ............................... 20 Description // zone de contenus – chiffre clé // version mobile ....................................... 21 Description // zone de contenus – chiffre clé // version desktop ..................................... 21 Description // zone de contenus – trombi // version mobile............................................ 22 Description // zone de contenus – trombi // version desktop .......................................... 23 Description // zone de contenus – slider // version mobile.............................................. 24 Description // zone de contenus – slider // version desktop ............................................ 24

2

Description // zone de contenus – Charts // version mobile ............................................ 25 Description // zone de contenus – Charts // version desktop .......................................... 25 Description // zone de contenus – Accordéon // version mobile...................................... 25 Description // zone de contenus – Accordéon // version desktop .................................... 25 Description // zone de contenus – Matrice dépliable // version mobile ........................... 25 Description // zone de contenus – Matrice dépliable // version desktop ......................... 25 Description // zone de contenus – Matrice simple // version mobile ............................... 27 Description // zone de contenus – Matrice simple // version desktop ............................. 27 Description // zone de contenus – portrait // version mobile .......................................... 28 Description // zone de contenus – portrait // version desktop ........................................ 28

3

Contexte Le site du RAI 2017 de Danone est un site basé sur la piste créa choisie parmi les 4 proposées. Elle est en adéquation avec la piste print. Sur l’ensemble du site, les écrans sont fullscreen. Les écrans intermédiaires entre les breakpoints doivent s’adapter (décalage des éléments, réduction des typos, …). N.B : les maquettes présentées ne sont pas définitives et validées en termes de contenus. Ce ne sont donc pas les bons visuels ni les bons contenus. L’arborescence présentée et les éléments de menu tiennent compte de la dernière version de l’arborescence dont nous disposons.

Principes généraux Design et responsive web design La piste graphique choisie se base sur un principe de fullscreen. Nous prenons en compte l’utilisation de deux breakpoints à 1024px et 640px. Les images de fond devront s’afficher de manière proportionnelle en fonction des écrans et des ratios des navigateurs au sein d’un même breakpoint. Au delà de 1440px les éléments pourront être fixés.

Typographies Les typographies utilisées sont : Bariol pour le texte courant, Blog Script pour les titres majeurs, les chiffres clés et certains intertitres.

Gestion multilingue Le site proposera une version anglaise (master) et une version française. Un lien depuis la home page permet de basculer d’une langue à l’autre. Le lien renvoie vers la page d’accueil du site dans la langue ciblée.

Partage réseaux sociaux Touts les pages sont partageables sur les réseaux sociaux grâce aux icones en bas des pages.

Sur desktop, au survol, les icônes passent en bleu.

Retour haut de page Toutes les pages de contenus (donc hors HP et N-1) disposent d’une icône en bas de page permettant à l’internaute de revenir en haut de page grâce à un lien ancre.

4

Structure du site – arborescence

Voir le fichier arborescence-danone-ra-2017-v13.png

Description Gabarit page Home & N-1 // version mobile Structure générale des pages La structure globale est composée :  d’une zone de navigation (jaune)  d’une zone d’affichage des contenus (bleu)

1

3

2

5

4

6

7

Dans la zone de navigation nous retrouvons : 1. le logo Danone cliquable (permettant de revenir à la HP du site) 2. L’icône de menu permettant d’accéder aux rubriques du site Au clic, un panneau latéral s’affiche depuis la gauche de l’écran pour afficher le menu. 3. L’accès direct à la page de « download center » Dans la zone d’affichage des contenus nous trouvons : 4. Le titre et sous-titre du site 5. L’image de fond 6. Un bouton d’accès direct aux rubriques (même comportement que l’icône menu du haut) 7. Les encarts d’accès direct à des contenus. Il peut y avoir 0, 1 ou 2 encarts. Les encarts sont constitués d’une image, d’un texte et d’un lien vers le contenu associé. L’image de fond n’aura pas le même cadrage sur desktop. Ce seront deux cadrages différents de manière à conserver le même fonctionnement image à droite et titre à gauche. En fonction des résolutions et des tailles d’écrans, les deux encarts devront se décaler vers la gauche. Ils seront tout le temps alignés à droite et en bas de la page. La taille du titre principal devra être réduite proportionnellement sur les résolutions inférieures au breakpoint.

7

Exemple en 480px

8

Menu déplié // version mobile 1

3

2 Au clic sur l’icône du menu dans le header l’utilisateur dépliera le menu. Ce dernier présente toutes les rubriques (titre + image de fond). 1. Quand le menu est déplié, l’icône se transforme pour devenir une icône « croix ». 2. La zone du bas du menu présente les icônes des RS pour ouvrir les liens externes en blank. Cette zone contient aussi le lien vers les mentions légales et les liens de changement de langue. 3. Au clic sur une rubrique, l’utilisateur accède directement au premier contenu de la rubrique (pas d’accès à un niveau -1 sur mobile). Les images des rubriques doivent être proportionnellement agrandie, notamment pour le format paysage sur mobile. N.B : pour le lancement du site, seules 5 rubriques seront affichées. La rubrique « Our sustainability projects » sera cachée.

9

Description Gabarit page Home & N-1 // version desktop Zone de navigation 1

Cette zone regroupe les liens de navigation ainsi que les fonctionnalités présentes sur l’ensemble du site. Il s’agit d’une couleur en opacité sur l’image de fond La zone est constituée de 3 blocs fonctionnels : 1. Le logo 2. Le menu de navigation 3. Les fonctionnalités transverses 1. Le logo Le logo est cliquable et permet de revenir à la HP, depuis toutes les pages du site.

2

La version du logo n’est pas la même que sur la version mobile. 2. Le menu de navigation Le menu est cliquable. Chaque item du menu possède un effet de survol (couleur passe en #023A83). Au clic sur un item du menu, on affiche le niveau -1. La transition entre les niveaux -1 doit être sous forme de slide de droite à gauche (https://jqueryui.com/show/ > slide )

3. Les fonctionnalités transverses Le bouton « Download center » permet d’accéder à la page dédiée où l’on retrouve les documents en téléchargement. Ce bouton possède un effet de survol (cf plus bas). Les icônes ‘FB’, ‘Twitter’ et ‘Linkedin’ permettent d’accéder aux réseaux sociaux associés en blank. Les liens ‘Fr’ et ‘En’ permettent de passer d’une langue à l’autre. La version active est symbolisée par la couleur bleue #023A83. Le lien « mentions légales » permet d’afficher la page associée, sur le modèle d’une page article.

3

Un effet de survol est présent sur chaque icône (passage de l’icône en bleue #023A83). Les survols

10

Zone d’affichage des contenus en desktop 1 2

3

4

5

6 La zone de contenu est composée : 1. D’un visuel de fond 2. D’un titre 3. D’un sous-titre (optionnel, uniquement présent en HP) 4. D’un chapo (optionnel, non présent sur HP) 5. De deux encarts maximum 6. Du CTA pour accéder aux contenus de la rubrique (sauf sur HP)

1 – Le visuel de fond Le visuel est fullscreen et s’étend sous le menu de navigation. Il doit être redimensionné proportionnellement en fonction des écrans et des navigateurs.

11

2 – Le titre Le titre utilise la typo ‘Blog Script’ en blanc. En termes de calibrage, le titre doit être composé de 40 caractères maximum. La typo est proportionnellement réduite en fonction de l’affichage. N.B : Nous conseillons de gérer ce titre en SVG pour le redimensionner dynamiquement en fonction des résolutions et tailles d’écrans sans perdre en qualité (la typo n’est pas très bien interprétée en version web).

3 – Le sous-titre Il est optionnel et uniquement utilisé en HP.

4 – Le chapô Il est optionnel et est utilisé sur les pages N-1. Le chapô utilise la typo ‘Bariol’ en blanc. En termes de calibrage, le chapô doit être composé de 260 caractères maximum. La typo est proportionnellement réduite en fonction de l’affichage. La couleur de ce texte est fonction de la rubrique (ex : blanc sur « Our ambition » et bleu sur « Our performance »).

5 – Les encarts Chaque niveau -1 peut contenir deux encarts maximum. Il s’agit de liens vers directs vers des contenus de la rubrique. Un encart est composé d’un visuel (le picto éventuel est intégré au visuel) et d’un titre dont la largeur est limitée à la moitié d l’image. L’ensemble de l’encart est cliquable.

6 – Le bouton d’accès au contenu Chaque niveau -1 dispose d’une flèche en bas de page permettant de déplier la navigation. Il n’y a pas d’animation prévue sur cette icône.

12

Exemple d’entrée de rubrique

Gabarit page N-1 // Version mobile Ce gabarit n’est volontairement pas utilisé sur la version mobile. Au clic sur le menu, nous accédons directement au contenu de niveau inférieur.

13

Description // Gabarit page interne – model 1 // version mobile

Le gabarit est composé de 2 zones : - la navigation principale (jaune) - le sous-menu de navigation + titre du contenu (vert) La première zone est sur fond blanc. Dans la seconde zone, nous retrouvons le sous-menu de navigation. S’il y a plus d’éléments (ici 4), nous proposons un système de scroll horizontal sur cette zone en mode slide. La barre de filtre n’est pas sticky. N.B : Le contenu de la page débute alors sous le sous-menu et prend 100% de la largeur de la page.

14

Description // Gabarit page interne – model 1 // version desktop

Sur desktop, la colonne de gauche se réduit et ne contient plus que le logo réduit de Danone (lien vers la HP du site) et l’accès au « download center ». L’apparition du panneau doit se faire avec animation (panneau apparaissant depuis le bord droit du navigateur) comme sur le site http://loveforiceland.com (clic sur ‘Discover’). Une flèche vers la gauche est ajoutée en haut de l’écran. Elle permet de revenir au niveau -1 de la rubrique concernée (entrée de rubrique). Pour revenir au niveau précédent, l’animation jouée doit être l’inverse (slide du panneau latéral vers la droite). Le visuel de fond n’est pas déplacé, cropé ou redimensionné par rapport au niveau précédent. Le panneau latéral est déplié depuis la droite au-dessus du visuel. Le panneau latéral déplié contient la zone de navigation secondaire et le titre de la rubrique (jaune) ainsi que la zone de contenu (bleu). Par défaut, lors de l’ouverture d’une rubrique, l’utilisateur sera redirigé vers le premier contenu de l’arborescence de la rubrique.

Zone de navigation La colonne de menu contient : - le titre de la rubrique affichée

15

- les items de menus. Ces derniers disposent d’un effet de survol (graisse et couleur). Lors de l’activation d’un item (ouverture d’une page), l’item est graissé et est mis en couleur ; une flèche vers la droite est ajoutée.

Zone de contenu Dans ce gabarit la zone de contenu contient : - un visuel optionnel en haut de page, sur 100% de la largeur de la zone - un titre de page La zone de contenu est complétée par des gabarits de contenus.

Description // Gabarit page Download center // version mobile

Lors de l’ouverture du download center, un layout fullscreen s’affichera au-dessus du contenu. Le fond sera blanc (avec opacité si la compatibilité navigateur et OS le permet). Les éléments du haut de page conserveront leur style. 16

Le gabarit est ensuite composé : - du titre de la page - de la liste des éléments à télécharger disposés les uns sous les autres Chaque publication (pdf ou zip) est présenté par : - un visuel - un titre - un poids de document L’image, le titre, l’icône flèche et le libellé sont cliquables pour permettre le téléchargement. Le comportement lors du téléchargement sera le comportement par défaut de l’OS et des navigateurs utilisés par l’internaute.

Description // Gabarit page Download center // version desktop 1

2

3 De la même façon que sur mobile, un layout blanc en opacité s’affiche sur 100% de l’écran. Comme sur la version mobile, la page contient le titre de la page, la liste des éléments. En plus, nous trouvons une flèche vers la gauche permettant de fermer le layout [1], un scroll vertical stylisé [2], et l’icône bleue [3] symbolisant l’état actif de la page.

17

Description // Gabarit page Module projets // version mobile

Description // Gabarit page Module projets // version desktop

18

Description // zone de contenus – téléchargement // version mobile

Ce contenu est composé : 1. d’un fond de couleur 2. d’un visuel 3. d’un titre (peut être sur 2 lignes) aligné sur le haut du visuel 4. d’une icône 5. d’un libellé avec le poids du document La zone du visuel est positionnée sur 25% du bloc maximum. A part le fond, tous les éléments sont cliquables pour permettre le téléchargement. Seuls des pdf ou des zip sont proposés en téléchargement.

19

Description // zone de contenus – téléchargement // version desktop

Le fonctionnement est le même sur desktop. Seuls les dimensions changent dans cette version.

Description // zone de contenus – image + zoom // version mobile Une image insérée dans le contenu peut contenir un lien qui permet d’ouvrir une autre image en fullscreen.

Description // zone de contenus – image + zoom // version desktop C’est le même fonctionnement qu’en mobile. Une image peut contenir un lien permettant d’ouvrir une image en fullscreen en layout sur le site.

20

Description // zone de contenus – chiffre clé // version mobile L’idée est de présenter des chiffres clés, au sein du contenu. Chaque chiffre est associé à un court texte. Il peut y avoir 1, 2 ou 3 chiffres présentés les uns sous les autres.

Description // zone de contenus – chiffre clé // version desktop

Sur la version desktop, les chiffres sont organisés en colonne. Ils sont présentés sur un fond de couleur uni (déterminé par les maquettes). Voici les présentations dans chaque cas : Aucune animation n’est prévue sur cette zone.

21

Description // zone de contenus – trombi // version mobile

Ce gabarit de contenu n’est utilisé que pour les pages « Management team » et « Board of Directors ». Chaque membre est présenté grâce à : - sa photo - son prénom / nom - sa fonction / son titre Chaque ligne contient 2 blocs. Il n’y a pas d’interaction ou d’animation prévu sur ces blocs.

22

Description // zone de contenus – trombi // version desktop

Sur la version desktop, les blocs sont présentés sur des lignes de 3 et les dimensions des blocs sont proportionnellement ajustées. Il n’y a pas d’interaction ou d’animation prévu sur ces blocs.

23

Description // zone de contenus – slider // version mobile Description // zone de contenus – slider // version desktop

Dans les pages « products », des renvois vers des stories sont associés en bas de page. Ils sont présentés sous forme de slider qui occupe 100% de la largeur de la zone de contenu. Pour plus de simplicité, ce slider peut être composé entièrement d’images. La navigation entre chaque image se fait grâce aux flèches droite et gauche et grâce aux points de navigation. L’animation souhaitée est un slide (droite ou gauche) https://jqueryui.com/show/ > slide

24

Description // zone de contenus – Charts // version mobile Description // zone de contenus – Charts // version desktop Description // zone de contenus – Accordéon // version mobile Description // zone de contenus – Accordéon // version desktop Description // zone de contenus – Matrice dépliable // version mobile Description // zone de contenus – Matrice dépliable // version desktop 1

2

Cette page permet de présenter les SDGs de manière globale. 1. La page dispose donc des mêmes éléments en que la matrice cliquable sur la zone du haut (titre, texte courant, expand de texte) 2. Chaque SDG est présenté par une icône et un titre. Au clic sur la zone (exemple zone jaune) un contenu de présentation texte se déplie.

25

4 3

2

1 1. Le contenu de présentation déplié pousse les autres cases vers le bas. 2. Le fond de couleur du texte dépend de la couleur associée au SDG. Il y a 7 couleurs différentes. 3. Le texte est ferré à gauche mais la zone de texte est fixée en largeur. Une flèche sur la case sélectionnée/cliquée indique que le contenu est affichée. Cette flèche est centrée horizontalement sur la zone.

26

Description // zone de contenus – Matrice simple // version mobile Description // zone de contenus – Matrice simple // version desktop 1

2

3

Cette page est la page ouverte par défaut lors de l’ouverture de la rubrique « Our Performance ». Elle est composée : 1. d’un titre 2. d’un texte courant 3. d’une mosaïque d’éléments cliquables renvoyant vers sous-niveaux 1. Titre Il peut être affiché sur 4 lignes maximum (45 signes max) et prend maximum 50 % de la largeur de la zone de contenu. 2. Texte courant Les 6 premières lignes sont affichées. Un bouton « read more » permet de dévoiler (expand vers le bas) le reste du texte. L’expand vers le bas entraine le décalage de la mosaïque vers le bas. 3. La mosaïque est composée de 4 items (4 éléments des sous-niveaux). Chaque item contient :  une image/icône (alignée en bas à droite)  un titre (du sous-niveau) de 35 signes maximum  un lien (vers le sous-niveau associé) Toute la zone de l’item (rectangle bleu) est cliquable.

27

Description // zone de contenus – portrait // version mobile Description // zone de contenus – portrait // version desktop

28