Material You, ou Material Design 3, est le système de design de Google centré sur la personnalisation : couleur dynamique tirée du fond d'écran, formes arrondies, mouvement et accessibilité. Son fonctionnement, son évolution Material 3 Expressive et ses implications pour une marque.
Material You est la troisième génération du système de design de Google, aussi appelée Material Design 3 (M3). Annoncée le 18 mai 2021 à la conférence Google I/O et arrivée avec Android 12, elle met la personnalisation au centre : l’interface peut adopter automatiquement les couleurs du fond d’écran de l’utilisateur (la « couleur dynamique »), avec des formes plus arrondies, des composants plus grands et plus d’animations. Depuis mai 2025, Google la prolonge avec Material 3 Expressive, une évolution plus colorée et plus animée.
On revient sur d’où vient Material You, ce qui change par rapport au Material Design de 2014, le fonctionnement de la couleur dynamique, les formes, le mouvement, l’accessibilité, ce qu’apporte Material 3 Expressive, puis ce que tout cela implique concrètement pour une marque ou un projet d’application et de site.
- Qu’est-ce que Material You ?
- D’où vient Material You ?
- Comment fonctionne la couleur dynamique ?
- Quelle place pour les formes et le mouvement ?
- Comment Material You s’adapte-t-il aux écrans ?
- Qu’apporte Material You à l’accessibilité ?
- Qu’est-ce que Material 3 Expressive ?
- Qu’est-ce que Material You change pour une marque ou un projet ?
- Questions fréquentes
- Sources
Qu’est-ce que Material You ?
Material You désigne à la fois une philosophie de design et une version du système Material Design, le langage visuel que Google applique à Android, à ses applications et qu’il met à disposition des développeurs. Le nom commercial « Material You » a été utilisé au lancement ; dans la documentation technique, on parle de Material 3 (ou M3), documenté sur le site m3.material.io.
À l’annonce d’Android 12, Google l’a présenté comme le fruit d’une collaboration étroite entre ses équipes logiciel, matériel et Material Design. Son ambition affichée : des interfaces personnelles, accessibles à tous, et capables de s’adapter à chaque écran.
En résumé : Material Design (2014) donnait à toutes les applications une apparence cohérente. Material You (2021) garde cette cohérence mais laisse l’utilisateur colorer son interface. Material 3 Expressive (2025) ajoute plus d’émotion : couleurs plus vives, formes variées, animations à ressort.
D’où vient Material You ?
Material Design a été annoncé le 25 juin 2014 à Google I/O, sous la direction de Matías Duarte, responsable du design chez Google. Il a imposé une interface épurée, faite de surfaces, d’ombres et de mouvements inspirés du papier, qui a unifié l’écosystème Android. Son défaut, souvent relevé : une grande rigidité, qui faisait se ressembler toutes les applications.
En 2018, une première révision (Material Theming, parfois appelée Material Design 2) a mis l’accent sur la personnalisation des composants aux couleurs, typographies et formes de chaque marque. Material You, annoncé en mai 2021, va plus loin : la personnalisation n’est plus seulement entre les mains de la marque, mais aussi de l’utilisateur. Il a d’abord été déployé sur les téléphones Pixel avec Android 12 et dans les applications Google, avant de s’étendre aux autres constructeurs et à Wear OS.
Comment fonctionne la couleur dynamique ?
C’est la fonctionnalité emblématique de Material You. Quand l’utilisateur choisit un fond d’écran, le système détermine automatiquement les couleurs dominantes et complémentaires, puis les applique à toute l’interface : notifications, réglages rapides, widgets, et les applications qui le prennent en charge. Google distingue deux usages :
- la couleur issue de l’utilisateur : extraite du fond d’écran (ou choisie parmi des propositions dans le sélecteur de fond d’écran) ;
- la couleur issue du contenu : l’application tire ses couleurs d’une image qu’elle affiche, par exemple une pochette d’album ou une photo d’article.
Techniquement, le système part d’une ou plusieurs couleurs clés et en déduit des palettes tonales : pour chaque couleur, une gamme de tons du plus sombre au plus clair. Ces tons sont ensuite attribués à des rôles (primaire, secondaire, surface, texte sur primaire, etc.) qui garantissent des contrastes lisibles en thème clair comme en thème sombre. La bibliothèque open source de Google (material-color-utilities, disponible notamment en Kotlin, Swift, Dart et TypeScript) s’appuie pour cela sur un espace colorimétrique appelé HCT (teinte, chroma, tonalité), conçu pour tenir compte de la perception humaine.
Point important, souvent mal compris au lancement : la couleur dynamique n’est pas imposée aux applications tierces. Sur Android, elle est disponible depuis Android 12, et chaque application choisit de l’activer (par exemple avec l’appel DynamicColors.applyToActivitiesIfAvailable() de la bibliothèque Material Components). Une marque peut donc garder ses propres couleurs, ou les harmoniser avec celles de l’utilisateur.
Pour construire une palette Material 3 à partir d’une couleur de marque, Google propose le Material Theme Builder, en version web et en plugin Figma : il génère les palettes tonales, les rôles de couleur et les exporte pour le code. Le choix des couleurs de marque reste un travail de fond, abordé dans notre article sur la psychologie des couleurs.
Quelle place pour les formes et le mouvement ?
Material You a généralisé les coins très arrondis : boutons, cartes, champs de saisie et fenêtres quittent les angles vifs pour des formes plus douces, qui s’accordent avec les écrans aux bords arrondis des téléphones actuels. Le système définit une échelle d’arrondis (de « aucun » à « complet ») que l’on applique de façon cohérente selon la taille des composants.
Le mouvement joue un rôle fonctionnel : les éléments s’agrandissent, se transforment et changent de forme pour accompagner une action (ouvrir une application, déplier un menu, passer d’une liste à un détail). Bien dosées, ces transitions aident l’utilisateur à comprendre d’où vient et où va un élément. C’est la logique des micro-interactions, détaillée dans notre article sur la micro-interaction.
Comment Material You s’adapte-t-il aux écrans ?
Les applications doivent aujourd’hui fonctionner sur des téléphones, des tablettes, des écrans pliables, des montres et des téléviseurs. Material 3 répond avec des mises en page adaptatives : plutôt qu’un seul gabarit étiré, l’interface change de structure selon la largeur disponible (par exemple une barre de navigation en bas sur téléphone, un rail latéral sur tablette, deux volets côte à côte sur grand écran).
L’objectif est que les composants (cartes, menus, curseurs, boutons) gardent la même apparence et le même comportement d’un appareil à l’autre, simplement mis à l’échelle. L’utilisateur reconnaît l’application partout et n’a pas à réapprendre son fonctionnement. C’est le même principe que le design responsive sur le web.
Qu’apporte Material You à l’accessibilité ?
L’accessibilité est un des piliers annoncés. Les rôles de couleur sont calculés pour garantir un contraste suffisant entre texte et fond, quelle que soit la couleur de départ. Les composants sont plus grands et plus espacés : Google recommande sur Android des zones tactiles d’au moins 48 × 48 dp (environ 9 mm), ce qui aide les personnes ayant une motricité fine réduite. Sur le web, le critère 2.5.8 des WCAG 2.2 (niveau AA) fixe de son côté un minimum de 24 × 24 pixels CSS pour les cibles cliquables, avec quelques exceptions.
Ces boutons plus « rembourrés » ont reçu un accueil esthétique mitigé à leur sortie, mais ils rendent les interfaces plus faciles à utiliser pour tous. Pour appliquer ces principes à un site, voyez notre guide pratique de l’accessibilité web.
Qu’est-ce que Material 3 Expressive ?
Présenté le 13 mai 2025, Material 3 Expressive est la mise à jour majeure de Material You. Il accompagne Android 16 et Wear OS 6, avec un déploiement d’abord sur les Pixel dans la seconde moitié de 2025. Au programme : des palettes de couleurs plus vives, une plus grande variété de formes (y compris des formes qui se transforment), des animations « à ressort » basées sur une physique de mouvement, des retours haptiques et des composants retravaillés.
Google appuie cette évolution sur un travail de recherche publié sur son site de design : 46 études menées sur trois ans auprès de plus de 18 000 participants. Selon ces travaux, les utilisateurs repèrent les éléments clés jusqu’à quatre fois plus vite dans une interface expressive, et l’écart de performance entre utilisateurs âgés et jeunes se réduit nettement. La même recherche met en garde : casser les codes établis (retirer les libellés des boutons, bouleverser des mises en page familières) fait baisser l’utilisabilité, même si le résultat plaît visuellement. L’expressivité doit rester au service de la fonction.
Qu’est-ce que Material You change pour une marque ou un projet ?
Pour une application Android, Material 3 est la base par défaut des composants proposés par Google (Jetpack Compose et Material Components). Les décisions à prendre concernent surtout la couleur : activer la couleur dynamique, ou conserver une palette de marque fixe, ou harmoniser les couleurs de marque avec celles de l’utilisateur (Google fournit un outil d’harmonisation pour décaler légèrement les teintes). Une marque dont la couleur est un signe de reconnaissance fort a souvent intérêt à la garder sur les éléments clés.
Pour un site web, la situation est différente. Il n’existe pas de couleur dynamique issue du fond d’écran dans le navigateur, et la bibliothèque officielle de composants web Material (Material Web) est indiquée comme en mode maintenance, en attente de nouveaux mainteneurs. On peut en revanche reprendre les principes de Material 3 : jetons de design (design tokens) pour les couleurs et les arrondis, rôles de couleur, contrastes calculés, mises en page adaptatives, cibles tactiles généreuses.
Les erreurs les plus fréquentes :
- Copier l’apparence Google au point de ressembler à une application Google plutôt qu’à votre marque.
- Multiplier les animations sans fonction claire, au détriment de la performance et du confort (pensez aux utilisateurs qui ont réduit les animations dans leurs réglages).
- Oublier le thème sombre, alors que les rôles de couleur Material 3 le prévoient d’emblée.
- Sacrifier les libellés au profit d’icônes seules, ce que la recherche de Google elle-même déconseille.
Ce travail de système (couleurs, typographies, formes déclinées en jetons réutilisables) est au cœur d’une création d’identité visuelle pensée pour les écrans. Pour en parler, écrivez-nous à contact@osmova.com ou via le formulaire de contact. Pour élargir, notre article sur l’UI design replace ces choix dans la conception d’interface.
Questions fréquentes
Quelle différence entre Material You et Material Design 3 ?
Il s’agit de la même génération. « Material You » est le nom utilisé au lancement en 2021 pour le grand public ; « Material 3 » est le nom du système dans la documentation destinée aux designers et développeurs.
Sur quelle version d’Android Material You est-il disponible ?
La couleur dynamique est disponible depuis Android 12. Son rendu exact dépend ensuite du fabricant du téléphone et de sa surcouche.
Les applications tierces changent-elles toutes de couleur ?
Non. Chaque application décide d’activer ou non la couleur dynamique. Beaucoup la proposent, d’autres gardent leurs couleurs de marque.
Peut-on utiliser Material You sur un site web ?
On peut en appliquer les principes (palettes tonales, rôles de couleur, arrondis, accessibilité) et générer une palette avec le Material Theme Builder. La bibliothèque officielle de composants web est toutefois en mode maintenance.
Material 3 Expressive remplace-t-il Material You ?
Il le prolonge plutôt qu’il ne le remplace : il reste dans la famille Material 3, avec des couleurs, formes et animations plus expressives.
Sources
- Google, annonce de la bêta d’Android 12 et de Material You (18 mai 2021)
- Material Design 3, documentation officielle
- Material Design 3 : couleur dynamique
- Android Developers : Dynamic Color
- Google : material-color-utilities (GitHub)
- Material Theme Builder
- Google : lancement de Material 3 Expressive (13 mai 2025)
- Google Design : la recherche derrière Material 3 Expressive
- Aide Accessibilité Android : taille des zones tactiles
- W3C : WCAG 2.2, critère 2.5.8 Target Size (Minimum)
- Material Web (GitHub)
- Wikipedia : Material Design (chronologie)
