Page Projet

Ce concept de gabarit a pour vocation de pouvoir rendre digeste, compréhensible et claire une page avec beaucoup de contenus.
C’est une page qui doit raconter une histoire autour d'un projet.
Un projet est composé de n étapes, n thématiques.

Les 4 types d'axes suivants peuvent être abordés dans cette page :
• produit,
• services,
• outils,
• edito.

Il est possible d'avoir les 4 axes abordés à la fois dans une même page, ou de n'avoir qu'un ou deux axes abordés selon le projet.
Chaque projet est différent et surtout les éléments constituants un projet sont divers.
Ainsi selon le contexte, il faudra choisir les axes qui seront traités dans votre page projet, et l'ordre d'importance des axes.
Sur un sujet donné, il sera peut être utile d'aborder un thème grave avec de l'édito en premier, tout comme il peut être intéressant de positionner un partenaire de services ou un produit en tête de page pour augmenter la conversion. Chaque projet est différent, et chaque équipe devra réfléchir à la meilleure organisation de contenus.

Afin de rendre encore plus claire la lecture de la page, nous avons décidé d’apporter de la couleur.
Une teinte de couleur par étape, cette couleur sera déclinée tout au long de la page de façon à permettre à l’utilisateur de savoir dans quelle étape il se trouve au scroll.
Ces teintes seront exploitées aussi au sein du module de navigation pour souligner le libellé des étapes.
Chaque saynète doit porter la teinte de couleur liée à l’étape.

6 nuances déterminées avec une équivalence CSS
• ROSE #E04E71 : c-1
• ORANGE #CE7D65 : c-2
• VERT Prasin #829E92 : c-3
• BLEU Paon #4391A9 : c-4
• JAUNE #EDC378 : c-5
• MAUVE Orchidée #C089A9 : c-6

Ces teintes sont répertoriées dans la librairie sketch "library-maif-color" sous le style "MAIF/ill-frise/..."

En complément, un module de navigation est disponible pour permettre à l’utilisateur de mieux naviguer dans la page.
Ce module lui permet d’accéder rapidement à la section dédiée à une étape, une thématique.

Le module de navigation a un comportement spécifique. Une ancre est spécifiée pour chaque étape/thématique, ce qui permet à l’utilisateur d’être positionné en début de section lorsqu’il clique sur une étape/thématique du module de navigation. Au scroll dans la page, le module de navigation reste sticky en haut de l'écran.
Lorsque l'utilisateur se trouve sur une des sections, alors son élément de navigation associé prend un état "actif", le différenciant graphiquement des autres sections de navigation.

Les couleurs des onglets sont reprisent dans chaque section. Si le triangle MAIF est intégré aux petites illustrations de la section il prend la couleur de l’onglet sélectionné avec une opacité de 20%.

Le nom de l'onglet décrit une notion. Il est préférable qu'il tienne sur une ligne ce qui le limite en nombre de caractères (espaces compris) :
• pour 2 onglets : entre 30 et 35 caractères
• pour 3 onglets : entre 20 et 25 caractères
• pour 4 onglets : entre 15 et 20 caractères

Chaque section doit porter le contexte de l’étape.

Elle doit commencer par un titre qui porte la balise H2 (module titre).
Le titre peut être complété par un sous-titre descriptif et une petite illustration qui reprend la teinte associée à la section.
Ensuite peuvent être ajoutés les modules communs suivants : bouton, texte illustration, rassurance, vente croisée, boite à outils, texte accordéon, conseils, passerelle, contact …. Et aussi le module landing produit.

Pour encore mieux identifier les sections elles s'étendent sur un fond dégradé de la couleur de l'onglet qui lui est associé. Ce dégradé lumineux se construit avec une opacité à 10% de cette nuance jusqu’au blanc.

La structure de l’info dans la section est importante. La hiérarchie du contenu se fait de sorte que l'élément le plus important se situe en début de section, l'élément le moins important en fin ; le tout en respectant un ordre chronologique, lorsque cette logique s'applique.
Il est possible de mixer des contenus de type Edito, produit ou services dans une même section. Une section n'est pas forcément dédiée à une typologie de contenus.
Une fois une étape terminée, on passe à l’ étape suivante, on itère comme pour la première étape.

À noter :
Pour plus d’homogénéité, si l'association "titre + illustration" est utilisée au début d'une section alors elle sera appliquée sur l'ensemble des sections.

Ces pages projets doivent raconter une histoire et cette histoire doit contenir entre 2 et 4 étapes ou thématiques.
Ces étapes peuvent être indépendantes les unes des autres ou se suivrent dans un ordre chronologique.
Nous avons fait le pari de proposer un gabarit d’une seule page avec un module de navigation qui reprend les différentes étapes, et permettre à l’utilisateur d’accéder en 1 clic à une des étapes.
Ce système a pour but de guider l'utilisateur et de lui permettre une expérience simple et facilement compréhensible malgré la densité de contenu.

Concrètement, nous proposons :
• 1 zone haute composée d'un titre de page avec une illustration de type narrative
• 1 template Parcours de vie - Navigation onglet : de 2 à 4 sections
• 1 section pour l’édito avec l'utilisation du module Conseils
• 1 section pour la FAQ avec l'utilisation du module texte accordeon

Chaque squad devra donc être en mesure de lister tout le contenu, puis de le classer et structurer en étapes. Des ateliers de co-conception avec toutes les parties prenantes permettent de réaliser cet exercice rapidement et efficacement. Il est judicieux d'y associer l'équipe marketing, ComDev, l'équipe SEO et la digital analyse en plus des membres de la squad (UX designer, PO, UI designer).

Elle est constituée obligatoirement de l'une ou l'autre des "section en-tete" ou "section en-tete HTML", auquel peut s'ajouter le composant "Ancre".

En règle générale, il faut privilégier "section en-tete" pour la conception d'une page projet.

La "section en-tete" contient :
• Obligatoirement :
  • 1 titre de page H1 avec la class CSS "heading type2"
  • 1 illustration "frise"
• Facultatif :
  • "commun composants"
  • "landing page composant"

L'utilisation de la "section en-tete HTML" est à prévoir lors d'une mise en page spécifique à laquelle ne peut pas répondre la structure prévue dans la "section en-tete". Dans ce cas cette section HTML porte obligatoirement le titre de page H1 avec la class CSS "heading type2"

La partie basse d'une page projet contient obligatoirement un "Template Parcaours de vie - Navigation onglet". Celui-ci comprend au minimum 2 sections - "Navigation onglet bloc" et 4 au maximum.

Chaque section "Navigation onglet bloc" renferme :

• obligatoirement : 1 titre d'onglet, 2 couleurs (titre et fond dégradé de section) et 1 picto pour la version mobile
• aléatoirement mais de manière homogène des composants de type commun

Enfin il est conseillé de finir sur une touche d’edito plus générale et d’appeler une section avec le module conseils et une section avec le module texte-accordéon pour une FAQ.