[TnT 2025] Dark Mode

👓 Pourquoi un thème sombre ?
Du Minitel à SNCF Connect: ses avantages, ses inconvénients et les études scientifiques associées.

🌜 Comment concevoir un thème sombre à partir d’un thème clair ?
Les astuces de design et les pièges à éviter.

🤝 Comment définir un langage commun entre designers et développeurs ?
Faciliter son implémentation et sa maintenabilité, introduction aux design tokens.

Transcript

1. Dark Mode Analyse et Conception
2. Simon MERCIER Designer & Mobile Dev @Worldline Antoine CANDY Designer & Web Dev @Worldline
3. Ordre du jour Pourquoi un mode sombre ? Comment concevoir un mode sombre à partir d’un mode clair Comment définir un langage commun entre designers et développeurs ?
4. Pourquoi un mode sombre ?
5. Depuis quand ça existe le mode sombre ?
6. Depuis quand ça existe le mode sombre ?
7. Depuis quand ça existe le mode sombre ? IBM Personal Computer
8. Depuis quand ça existe le mode clair ? Xerox Alto (1973) Apple Lisa (1983)
9. Skeuomorphisme
10. Skeuomorphisme
11. Skeuomorphisme
12. Skeuomorphisme
13. Mode sombre moderne
14. Light Dark Average dev Quel thème choisir ?
15. Lisibilité Positive display polarity is particularly advantageous for small character sizes: implications for display design Cosima Piepenbrock, Susanne Mayr, Axel Buchner 2013
16. Lisibilité 165 participants Light Dark Lecture dans une pièce sombre de de pendant 40 textes 250 mots 50 secondes. Taille des caractères variable : “ 8 pˆ “ 10 pˆ “ 12 pˆ “ 14 pt 14 erreurs à trouver par texte.
20. Lisibilité : Impact de l’âge Positive display polarity is advantageous for both younger and older adults Cosima Piepenbrock, Susanne Mayr, Iris Mund, Axel Buchner 2013
21. Lisibilité : Impact de l’âge 169 participants 18-33 ans 60-85 ans Anneaux de Landolt
24. Lisibilité : Impact de la luminosité ambiante Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading Jonathan Dobres, Nadine Chahine, Bryan Reimer 2016
25. Lisibilité : Impact de la luminosité ambiante 50 participants Jour 1 : light Jour 2 : dark Y 400 tests Y Objectif par participant : détecter rapidement si une suite de caractères forme un mot
26. https://www.nngroup.com/articles/dark-mode/
27. Effets à long terme ?
28. Effets à long terme ? Reading and Myopia: Contrast Polarity Matters (nature.com) Andrea C. Aleman, Min Wang, Frank Schaeffel 2018
29. Accessibilité Les personnes atteintes de cataractes lisent en 50% plus vite thème sombre Comprendre la cataracte (ameli.fr) 2023 Rétine Cristallin Sans cataracte AVEC cataracte Dark Mode vs. Light Mode: Which Is Better ? (nngroup.com) Raluca Budiu 2020
30. Économie de batterie 1,58 M d’abonnés PhoneBuff Dark Mode vs. Light Mode Battery Test
31. Économie de batterie 1,58 M d’abonnés PhoneBuff Dark Mode vs. Light Mode Battery Test
32. Économie de batterie 1,58 M d’abonnés PhoneBuff Dark Mode vs. Light Mode Battery Test
33. Économie de batterie Luminosité Max Adaptée (usage intérieur)
34. Petites touches de couleur
35. Petites touches de couleur
36. Petites touches de couleur
37. Quels critères pour choisir entre thème clair et sombre ? Environnement d’utilisation (intérieur, extérieur, jour, nuit, ...) Non prévisible Utilisateur final (âge, maladie, préférence personnelle, ...) Thème de l’app (Streaming vidéo, lecture de news, ...)
38. Cas pratique n°1
39. Cas pratique n°1 https://blocnotes.iergo.fr/articles/sncf-connect-petit- bilan-dune-catastrophe-industrielle/ Expectation... Reality...
40. Cas pratique n°2 Place des Terreaux - Fête des lumières (Lyon)
41. Cas pratique n°3
42. Cas pratique n°4 Interface de GitKraken
43. From light to dark Comment concevoir un mode sombre à partir d’un mode clair ?
44. Quelles couleurs choisir ? Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace
45. Inverser les couleurs ? Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace
46. Profondeur m2.material.io
47. Profondeur m2.material.io
48. Profondeur Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace
49. Couleurs vives
50. Couleurs vives
51. H(ue) S(aturation) L(ightness)
52. Couleurs vives 35 Lightness 32 49
53. Couleurs vives 35 Lightness 32 49 55 Lightness 55 55
54. Couleurs vives Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace Avant
55. Couleurs vives Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace APRèS
56. Couleurs vives Norme WCAG AA : ratio supérieur à 4.5 : 1 (webaim.org) (coolors.co)
57. Couleurs vives Test 5.59 : 1 Test 7.85 : 1 Test 4.72 : 1 Norme WCAG AA : ratio supérieur à 4.5 : 1
58. Couleurs vives Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace AVANT
59. Couleurs vives ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Actions municipales Santé Mobilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace APRèS
60. Teinter ses gris
61. Teinter ses gris APRèS AVANT Hue Saturation Lightness 0 194 20 0 15 15
62. Teinter ses gris AVANT APRèS
63. Teinter ses gris ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Actions municipales Santé Mobilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace AVANT
64. Teinter ses gris ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Actions municipales Santé Mobilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace APRèS
65. Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher
66. Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher
67. Mise en oeuvre technique Un langage commun entre designers et développeurs ?
68. Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher ??? ??? ??? ???
69. Correspondance Light/Dark Name Color 1 Color 2 Color 3 Light ??? ??? ??? Dark ??? ??? ???
70. Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher White Azur White Azur Cherry Cherry
71. Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher White Azur White Azur White White Cherry Cherry
72. Correspondance Light/Dark Name Azur White Cherry Light #2F7084 #FFFFFF #EE2D62 Dark #1F2A2E #243B42 #ED2B60
73. Mise en oeuvre technique Handoff design development
74. Mise en oeuvre technique Méthodologie de handoff design DESIGN TOKEN development
75. Multi theme support Handoff errors reduction Consistency Responsiveness Scalability Single source of truth Time saving, technical debt reduction (dark/light mode) (between design files & codebases) (between apps, platforms) (1 language between dev & design) Mise en oeuvre technique Bénéfices des design tokens design DESIGN TOKEN development
76. Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
77. Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost “The smallest functional unit” Home Label Input COMPONENTS ATOMS
78. Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost MOLECULES Cancel Save COMPONENTS GROUP “Groups of two or more atoms [...], more tangible and operational”
79. Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost ORGANISMS COMPONENTS GROUPS GROUP A profile form title Yorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero. Name Rick Lastname Sanchez Cancel Save “Assemblies of molecules functioning together as a unit”
80. Mise en oeuvre technique Atomic design ATOMS MOLECULES ORGANISMS PAGES TEMPLATES
81. IONS Mise en oeuvre technique Atomic design ATOMS MOLECULES ORGANISMS PAGES TEMPLATES
82. Mise en oeuvre technique Atomic design ATOMS MOLECULES ORGANISMS PAGES TEMPLATES DESIGN TOKENS
83. Mise en oeuvre technique Design tokens DESIGN TOKENS Wikipedia A named variable that stores a specific design attribute, such as a color, typography setting, spacing value, or other design decision. SAP Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system’s visual identity ChatGPT Ce sont les briques de base d’un système de design. Ils agissent comme une source unique de vérité, reliant le travail des designers et des développeurs tout en garantissant une cohérence visuelle
84. Mise en oeuvre technique Design tokens DESIGN TOKENS Wikipedia A named that stores a specific , such as a color, typography setting, spacing value, or other design decision. variable design attribute SAP Design tokens are information such as color, spacing, sizing, and typography that collectively make up our design system’s stored pieces of UI visual identity ChatGPT Ce sont les d’un système de design. Ils agissent comme une , reliant le travail des designers et des développeurs tout en garantissant une briques de base source unique de vérité cohérence visuelle
85. Mise en oeuvre technique Design tokens Value Token background: ( ); var --pink-400 #DD7CB0 100% pink/400 Home Home Home
86. Mise en oeuvre technique Design tokens Value Token background: ( ); var --pink-400 border-radius: ( ); var --radius-md font-weight: ( ); var --font-weight-md font-family: ( ); var --font-family-main gap: ( ); var --gap-small border: ( ) ( ) ( ); var var var --border-width-normal --border-style --pink-50 #DD7CB0 100% 10px 500 Inter 0.5rem 1px pink/400 radius/medium font/weight/medium font/family/main gap/small border/width/normal Ho me Ho me Ho me
87. Mise en oeuvre technique Primitive token #FFFFFF 100% White Sortir et découvrir Les vacances de Noël côté culture
88. Mise en oeuvre technique Primitive token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background Header Text On The Home Page White
89. Mise en oeuvre technique Primitive token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background Header Text On The Home Page White Primitive token Component-specific Component-specific
90. Color tokens Primitives Name Azur-500 Azur-700 Azur-800 White Value #2F7084 #1F2A2E #243B42 #FFFFFF
91. Color tokens Primitives Name Azur-500 Azur-700 Azur-800 White Value #2F7084 #1F2A2E #243B42 #FFFFFF Component specific Name Tab Background Header Text On The Home Page Section background Light White White Azure-500 Dark Azur-700 White Azur-800 Sortir et découvrir Les vacances de Noël côté culture Sortir et découvrir Les vacances de Noël côté culture
92. Color tokens Header Text On The Home Page ?
93. Mise en oeuvre technique Material 3 naming
94. Mise en oeuvre technique Material 3 naming
95. Mise en oeuvre technique Material 3 naming
96. Mise en oeuvre technique Material 3 naming
97. Mise en oeuvre technique Material 3 naming
98. Mise en oeuvre technique Material 3 naming
99. Mise en oeuvre technique Semantic token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background On Primary Surface White Primitive token What? Component-specific Where? Semantic token Why? Header Text On The Home Page
100. Mise en oeuvre technique Primitive token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background White Primitive token What? Component-specific Where? Header Text On The Home Page
101. Mise en oeuvre technique Semantic token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background On Primary Surface White Primitive token What? Component-specific Where? Semantic token Why?
102. Mise en oeuvre technique Semantic token #FFFFFF 100% Sortir et découvrir Démarches Les vacances de Noël côté culture Tab Background On Primary Surface White Primitive token What? Component-specific Where? Semantic token Why?
103. Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher Tab Background P rim ary P rim ary Tab Background O n P rim ary O n P rim ary Se condary Se condary
104. Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher Tab Background P rim ary P rim ary Tab Background O n P rim ary O n P rim ary Se condary Se condary
105. Color tokens Primitives Name Azur-400 Azur-500 Azur-700 Azur-800 Azur-900 Coconut Cherry-500 Cherry-400 Value #5892A7 #2F7084 #243B42 #1F2A2E #040A0B #FFFFFF #E6134D #ED2B60
106. Color tokens Primitives Name Azur-400 Azur-500 Azur-700 Azur-800 Azur-900 Coconut Cherry-500 Cherry-400 Value #5892A7 #2F7084 #243B42 #1F2A2E #040A0B #FFFFFF #E6134D #ED2B60 Semantic Name Primary On Primary Background Surface Low Surface High Secondary Light Azur-500 Coconut Coconut Azur-500 Coconut Cherry-500 Dark Azur-400 Coconut Azur-900 Azur-800 Azur-700 Cherry-400
107. Color tokens Primitives Name Azur-400 Azur-500 Azur-700 Azur-800 Azur-900 Coconut Cherry-500 Cherry-400 Value #5892A7 #2F7084 #243B42 #1F2A2E #040A0B #FFFFFF #E6134D #ED2B60 Semantic Name Primary On Primary Background Surface Low Surface High Secondary Light Azur-500 Coconut Coconut Azur-500 Coconut Cherry-500 Dark Azur-400 Coconut Azur-900 Azur-800 Azur-700 Cherry-400 Component specific Name Page background Page section Page section title Tab background Button background Value Background Surface Low On Surface Low Surface High Secondary
116. Merci pour votre attention ! in/merciersimon/ in/antoinecandy/