Material Design : concepts clés, Material You et Material 3

Qu'est-ce que Material Design ?

Material Design (nom de code Project Quantum) est le système de conception de Google, annoncé pour la première fois à la Google I/O 2014 et implémenté initialement dans Android 5.0 Lollipop. L'objectif de Material Design est de créer un langage visuel unifié pour tous les produits Google et applications Android, basé sur les propriétés physiques du papier et de l'encre — le « matériau ». Contrairement au Flat Design, Material Design ajoute de la profondeur physique, des ombres, des couches et une animation réaliste.

Depuis 2014, Material Design a connu trois versions majeures : Material 1 (2014) — directives originales avec des cartes et le Floating Action Button ; Material 2 (2018) — langage visuel simplifié, espacement accru, accent sur la typographie ; Material 3 / Material You (2021) — schéma de couleurs dynamique généré à partir du fond d'écran de l'appareil, personnalisation. Selon Google Play Console (2024), 78% des 1000 principales applications Google Play utilisent Material Components pour Android.

Material Design n'est pas simplement un kit UI, mais un système de conception complet : directives d'accessibilité (a11y), d'animation (Motion), de mise en page adaptative, de composants (TopAppBar, BottomNavigation, Navigation Drawer), de typographie (Material Type Scale) et d'iconographie (Material Symbols). Chez IT Sectr, nous utilisons Material Design comme système de conception de base pour les projets Android depuis 2014, en le personnalisant pour la marque de chaque client via Material Theme Builder.

Principes fondamentaux de Material Design : matérialité, profondeur, mouvement

Matérialité (le matériau comme métaphore) — le principe clé de Material Design, qui emprunte les propriétés physiques du papier : le matériau a une surface, une épaisseur (1dp), projette une ombre (Elevation) et occupe un espace (Bounds). Les éléments d'interface — cartes, boutons, panneaux — se comportent comme des objets physiques : ils s'élèvent lorsqu'on les presse (effet ripple), se chevauchent (axe Z) et s'animent lors de l'apparition (motion).

Profondeur (Depth) est créée via Elevation — une propriété du matériau qui détermine sa position sur l'axe Z. Plus l'Elevation est élevée (8dp, 16dp), plus l'ombre projetée par l'élément est grande. Une carte a une Elevation de 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. La profondeur est utilisée pour transmettre la hiérarchie : les fenêtres modales et les dialogues sont toujours au-dessus du contenu, Navigation Drawer est au-dessus de la Action Bar. La profondeur remplace la perspective 3D par une couche Z plate, préservant les performances de rendu.

Mouvement (Motion) — l'animation dans Material Design n'est pas décorative mais fonctionnelle. L'animation doit : 1) diriger l'attention de l'utilisateur (carte se développant avec des détails), 2) expliquer les relations spatiales (AppBar se transforme en TopAppBar lors du défilement), 3) assurer des transitions fluides (transition d'élément partagé entre les écrans). Selon Google Material Guidelines (2024), l'animation ne doit pas dépasser 300ms pour les micro-interactions et 500ms pour les transitions d'écran — les animations plus longues sont perçues comme des ralentissements.

Material You (Material Design 3) : couleurs dynamiques et personnalisation

Material You (Material Design 3) est la plus grande mise à jour du système de conception, présentée en 2021 avec Android 12. L'innovation principale — les couleurs dynamiques (Monet) : le système extrait automatiquement 5 couleurs clés du fond d'écran de l'appareil et génère une palette complète de 15 tons (primary, secondary, tertiary, error avec leurs variantes light/dark) avec des ratios de contraste WCAG AA calculés.

Le modèle de couleurs de Material You est basé sur HCT (Hue, Chroma, Tone) — un espace colorimétrique développé par Google qui combine la perception humaine (Hue) avec la saturation (Chroma) et la luminosité (Tone). Contrairement à HSL/HSV, HCT garantit que tous les tons générés ont le contraste requis sur les fonds blancs et noirs. Google Material Guidelines (2024) recommande d'utiliser uniquement les variantes tonales de la palette principale pour le texte, les tons surface pour les fonds et primary-container pour les surfaces d'accentuation.

L'utilisateur peut choisir parmi 4 schémas de personnalisation : TonalSpot (couleur principale du fond d'écran), Vibrant (couleur la plus saturée), Expressive (couleurs vives supplémentaires), Neutral (gamme monochrome). Material Theme Builder (material-foundation.github.io) permet d'exporter un thème Material 3 en XML, Compose Theme, CSS et même un plugin Figma.

Material Components pour Android : implémentation avec XML et Compose

Material Components pour Android (MDC-Android) est la bibliothèque officielle de Google fournissant des composants View prêts à l'emploi qui suivent les directives de Material Design. Pour les mises en page XML, la bibliothèque est disponible via la dépendance com.google.android.material:material, version actuelle en juin 2026 — 1.12.0.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

L'exemple montre un écran Material avec MaterialToolbar (TopAppBar), MaterialCardView avec un remplissage et un contour personnalisés, TextInputLayout avec une liste déroulante et MaterialButton dans le style Material3. Le FAB est ancré à la Toolbar — un motif standard pour les interfaces maître-détail.

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("Ville") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Soumettre")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

Le code démontre un thème Material You dans Compose : dynamicLightColorScheme() génère automatiquement un schéma de couleurs basé sur le fond d'écran de l'appareil. Scaffold fournit une structure standard avec TopAppBar et FAB. OutlinedTextField et Button sont des composants Material 3 dont les couleurs proviennent du colorScheme dynamique. Lorsque le fond d'écran change, toutes les couleurs de l'application se mettent à jour automatiquement — une personnalisation sans modification de code.

Material Design sur iOS : Material Components pour iOS

Material Components pour iOS (MDC-iOS) est une bibliothèque qui fournit des composants UIKit natifs implémentant Material Design sur iOS. iOS ayant son propre système de conception (Human Interface Guidelines), les composants Material sur iOS sont moins fréquemment utilisés mais sont demandés dans les applications multiplateformes nécessitant un style visuel unifié entre Android et iOS.

MDC-iOS inclut AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs et TextFields, stylisés pour Material Design. La bibliothèque est disponible via CocoaPods (pod 'MaterialComponents') et Swift Package Manager. Les Apple Human Interface Guidelines (2024) ne recommandent pas de remplacer complètement les composants UIKit natifs par des équivalents Material, mais autorisent l'utilisation de composants Material pour les interfaces personnalisées à condition de préserver la navigation native (NavigationStack, UITabBarController).

Chez IT Sectr, nous utilisons Material Components sur iOS uniquement pour les applications portées depuis Android (projets multiplateformes avec Flutter ou Kotlin Multiplatform). Pour les applications iOS natives, nous suivons HIG et utilisons UIKit/SwiftUI avec un branding personnalisé. Selon une enquête de Swift Community (2024), Material Components pour iOS sont utilisés par 8% des développeurs, principalement dans des projets hybrides.

Material Design face à d'autres systèmes de conception

Material Design n'est pas le seul système de conception sur le marché. Principaux concurrents : Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Chaque système est optimisé pour sa plateforme : Material Design pour Android, HIG pour iOS, Fluent pour Windows. Le choix du système de conception est déterminé par la plateforme cible et l'écosystème.

Le principal avantage de Material Design est son ouverture et sa nature multiplateforme. Les directives, composants et outils (Material Theme Builder) sont disponibles gratuitement, ce qui rend le système populaire auprès des startups et des développeurs indépendants. Apple HIG est étroitement lié à l'écosystème Apple mais garantit la meilleure conformité aux attentes de la plateforme. Pour les projets multiplateformes, Material Design est le choix optimal grâce à Flutter et Jetpack Compose Multiplatform.