OpenClassrooms becomes an accredited US university.
Discover what this means for youTable of contents
- Part 1
Plongez dans l'histoire de l'UI
- Part 2
Découvrez les principes du Material Design
- Part 3
Appliquez les principes du Material Design
Puisez vos inspirations sur le web
Téléchargez les ressources disponibles
Concevez une maquette graphique avec Adobe XD
Utilisez le framework "Materialize CSS"
Plongez dans le futur de l'UI
Entraînez-vous en matérialisant une interface utilisateur
Quiz: Testez votre capacité à appliquer les principes du Material Design
Appréhendez la philosophie du Material Design
#Le Material Design est une métaphore
Le Material Design est un langage visuel et interactif.
Et bien parce qu'il emploie une métaphore qui fait référence à ce qui est matériel, physique…
Inspiré du papier, le Material Design intègre des effets d'ombre et de superposition : cela rend l'espace compréhensible.
Les indications visuelles respectent les lois de la physique et se comportent, sur la base du tactile, d'une façon que nous trouvons naturelle. Les ombres changent en fonction de la hauteur des objets. Ces derniers peuvent se déplacer dans l'espace et interagir entre eux.
C'est pour ce la que l'on dit que le Material Design augmente l'affordance d'un produit web : l'usage de la lumière, des surfaces et des mouvements distille une compréhension et améliore l'expérience utilisateur.
#Une intention graphique assumée
Le Material Design utilise des aplats de couleurs vives et franches qui se détachent pour créer de la hiérarchie, portant une concentration sur un objet en particulier.
Cela permet de mettre l'emphase sur l'action de l'utilisateur : les fonctionnalités principales sont immédiatement apparentes et montrent le chemin à suivre.
La place est également donnée au blanc pour plus de clarté, permettant d'immerger l'utilisateur dans une expérience d'interaction, sans pour autant le noyer.
#Le mouvement transmet du sens
Le mouvement du Material Design intervient dans les moments d'interaction, lorsque l'on appuie sur un bouton par exemple : c'est ce qui permet de donner du sens.
Le mouvement n'est ni gaspillé, ni utilisé pour rien ; chaque fois, il se manifeste pour guider l'utilisateur et rendre l'interaction significative : le mouvement suit ce que l'utilisateur fait.

Les actions de l'utilisateur forment des points de modulation et déclenchent une réaction, un mouvement : le design se transforme littéralement sous ses doigts ; il se réorganise, sans pour autant perturber la cohérence, ni ralentir l'interaction.
C'est donc le mouvement qui donne du feedback (subtile, mais clair).
Je vous invite à regarder la vidéo suivante, qui montre des prototypes papier du Material Design et leur réaction face à la lumière.
- Up to 100% of your training program funded
- Flexible start date
- Career-focused projects
- Individual mentoring