ETQ UX IF, je souhaite que les codes couleurs restent cohérents avec toute la communication d'IF.

[LesPetitsSuisses]

ETQ UX IF, je veux que les codes couleurs restent cohérents avec toute la communication d'IF.

UI évolution - Mise à jour des couleurs IF dans le hero-header de la page d'accueil

UI évolution - Accès par cible et boutons CTA plus explicites : Ajout d'un CTA "Candidat", "Entreprise" et "Prescripteur" à la place des surtitres peu lisibles actuels pour favoriser les entrées par cibles. Suppression de la barre animée actuelle. On conserve l'effet au rollover.

Correction et adaptation des nouvelles couleurs en light et dark mode.

Figma Page d’accueil light mode

Figma Page d’accueil dark mode

Plus d'infos sur le Notion : https://www.notion.so/gip-inclusion/Immersion-Facilit-e-ab43b8f2d46a4cfea5bc32e2753ed8f7?pvs=4#d036fc09dcc140309ca0fadd1c368d57

Objectifs : améliorer la qualité perçue de l’interface (notoriété, réassurance), hiérarchiser l’information (compréhension = transformation), enrichir l’expérience (présenter, informer, recruter des beta-testeurs, élargir l’audience)

Rappel des codes couleurs IF (Générique et pour chaque cible) : _2304-Charte-IF-UI-design-logo-et-codes-couleurs https://www.figma.com/file/bYjpgeGkOTRRVKPcEkHHZi/GIP-Immersion-facilit%C3%A9e-design-S%C3%A9bastien-Hoffmann-LPS?type=design&node-id=3%3A8206&mode=design&t=1KQ44F8FHC3HFtSS-1

Hero header - Colorisation aux couleurs IF

---

Light mode

---

Color background vertical gradiant

00455D > #005F73 (à la place du bleu France actuel)

Image à utiliser LM : https://drive.google.com/file/d/16uhwVsr90jhh5VLUfY3jewxSczzIWiGJ/view?usp=drive_link

Maquette Figma LM : https://www.figma.com/file/bYjpgeGkOTRRVKPcEkHHZi/GIP-Immersion-facilit%C3%A9e-design-S%C3%A9bastien-Hoffmann-LPS?type=design&node-id=7%3A7164&mode=design&t=t4uLu0e9aNEACbSU-1

---

Dark mode

---

Color background vertical gradiant

96DCED > #85D9EA

Image à utiliser DM : https://drive.google.com/file/d/1kf4uo6v3B8sMhx3889xvZ7_x6gtI3g71/view?usp=drive_link

Maquette Figma DM : https://www.figma.com/file/bYjpgeGkOTRRVKPcEkHHZi/GIP-Immersion-facilit%C3%A9e-design-S%C3%A9bastien-Hoffmann-LPS?type=design&node-id=376%3A156663&mode=design&t=t4uLu0e9aNEACbSU-1

---

Plus d'info sur les évolutions prévues : https://www.notion.so/gip-inclusion/Immersion-Facilit-e-ab43b8f2d46a4cfea5bc32e2753ed8f7?pvs=4#d036fc09dcc140309ca0fadd1c368d57

Objectifs : améliorer la qualité perçue de l’interface (notoriété, réassurance), hiérarchiser l’information (compréhension = transformation), enrichir l’expérience (présenter, informer, recruter, élargir l’audience)

[LesPetitsSuisses]

[LesPetitsSuisses]

[3lodi3]

Ce n'est plus accessible avec cette couleur, donc non. D'ailleurs je te conseille de checker toutes les couleurs car en faisant un contrôle les pages d'accueil candidat et entreprises failent aussi au niveau des contrastes de couleur, ainsi que les 3 entrées par persona sur la page d'accueil. Aussi le bouton nous contacter sur l'aide.

Il faut vraiment qu'on soit irréprochables sur ça !

[LesPetitsSuisses]

Pour répondre à @3lodi3 concernant les alertes d'accessibilité couleurs liées à la nouvelle charte graphique, deux choses importantes sont à savoir :

01) Dans Figma, si la DIV est complexe (éléments graphiques ou images intercalées entre le fond et le texte, présence de dégradé), le plugin de vérification des contrastes ("Color contraste", "A11y" ou autres) n'interprétera que la couleur de fond associé à la DIV. Si aucune couleur n'est associée à la DIV, le plugin validera le score maximal (AAA pass). A contrario, si la couleur de fond ne convient pas au texte alors que des éléments graphiques permettent quand même un contraste correct, le score sera mauvais (AA & AAA Fail). La capacité à valider l'accessibilité de ces plugin est souvent limitée. La vérification de ces paramètres devra donc se faire au moment de l'intégration en CSS pour limiter les risques d'erreur (et cela m'intéresse de savoir comment vous structurez votre feuille de style @enguerranws @bbohec ? Merci !).

02) Le DSFR propose un large nuancier de couleurs mais elles ne sont malheureusement pas équivalentes en terme de contraste et de saturation entre elles (elles sont paraît-il issues du print à l'origine). Ce qui fonctionnera en "glycine" par exemple, ne fonctionnera pas en "cumulus". Pour répondre aux exigences d'accessibilité, j'ai remis à plat toutes les nuances que nous utilisons. Les nouvelles maquettes visibles ici, répondent correctement à ces critères.

J'ai complété la charte graphique :

• sur le Drive : https://drive.google.com/file/d/18aV_Kj9-6C_Eyuco3qKAxheadVbST9Xu/view?usp=drive_link

• sur Figma : https://www.figma.com/file/bYjpgeGkOTRRVKPcEkHHZi/GIP-Immersion-facilit%C3%A9e-design-S%C3%A9bastien-Hoffmann-LPS?type=design&node-id=863%3A28637&mode=design&t=mjUhDBomjnXDYpaJ-1

Voici les maquettes de la pages d'accueil qu'il faudrait harmoniser en light mode et dark mode :

• Figma : https://www.figma.com/file/bYjpgeGkOTRRVKPcEkHHZi/GIP-Immersion-facilit%C3%A9e-design-S%C3%A9bastien-Hoffmann-LPS?type=design&node-id=837%3A43972&mode=design&t=mjUhDBomjnXDYpaJ-1

Merci à vous !

[LesPetitsSuisses]

[LesPetitsSuisses]

[LesPetitsSuisses]

[LesPetitsSuisses]

Petite chose qui pourrait être faite rapidement, comme l'indiquait très justement @3lodi3 , le bouton du helpdesk Crisp "Contactez-nous" n'est pas de la bonne couleur pour être accessible. Il faudrait utiliser la couleur de fond #005F73 et le texte de couleur blanche #ffffff. Merci pour votre aide @enguerranws @bbohec .

https://www.figma.com/file/bYjpgeGkOTRRVKPcEkHHZi/GIP-Immersion-facilit%C3%A9e-design-S%C3%A9bastien-Hoffmann-LPS?type=design&node-id=192%3A144827&mode=design&t=mSkctHFfjawbpRus-1

[LesPetitsSuisses]

[LesPetitsSuisses]

Certainement pas la priorité j'imagine avec le Fast en cours, mais ces propositions d'interface permettent d'être irréprochable en terme d'accessibilité comme tu le soulignais très justement @3lodi3 (et d'être raccord avec notre charte surtout). Je suis dispo pour faire avancer ce sujet @enguerranws @nathalie-reyre. Merci.