Qu'est-ce que le Material Design ?
Crée et conçu par Google afin d'unifier l’expérience utilisateur sur toutes les plateformes, le Material Design s'inspire du minimalisme du flat design, et y ajoute le principe du papier et de l'encre.
Material est une métaphore
La metophore du Materail design est celle d'un espace rationalisé et d'un système de mouvement unifié. Le material design est fondé sur la réalité tactile, inspiré par l'étude du papier et de l'encre, mais technologiquement avancé et ouvert à l'imagination et à la magie.
Les surfaces et les bords de material fournissent des repères visuels fondés sur la réalité. L'utilisation d'attributs tactiles familiers aide les utilisateurs à comprendre rapidement les avantages. Pourtant, la flexibilité de material crée de nouvelles possibilités qui remplacent celles du monde physique, sans violer les règles de la physique.
Les fondamentaux de la lumière, de la surface et du mouvement sont essentiels pour transmettre comment les objets se déplacent, interagissent et existent dans l'espace les uns par rapport aux autres. L'éclairage réaliste montre les coutures, divise l'espace et indique les pièces mobiles.
Gras, graphique, intentionnel
Les éléments fondamentaux de la conception imprimée - typographie, grilles, espace, échelle, couleur et utilisation de l'imagerie - guident les traitements visuels. Ces éléments font beaucoup plus que de faire plaisir aux yeux. Ils créent la hiérarchie, la signification et la mise au point. Les choix de couleurs délibérés, les images de bord à bord, la typographie à grande échelle et l'espace blanc intentionnel créent une interface graphique et audacieuse qui plonge l'utilisateur dans l'expérience.
L'accent mis sur les actions utilisateurs rend les fonctionnalités essentielles immédiatement apparentes et fournit des points de passages pour l'utilisateur.
Le mouvement fourni un sens
Le mouvement respecte et renforce l'utilisateur comme moteur principal. Les actions des utilisateurs primaires sont des points d'inflexion qui initient le mouvement, transformant l'ensemble du design.
Toutes les actions se déroulent dans un environnement unique. Les objets sont présentés à l'utilisateur sans compromettre la continuité de l'expérience, même s'ils se transforment et se réorganisent.
Le mouvement est significatif et approprié, servant à attirer l'attention et à maintenir la continuité. Les feedbacks sont subtils mais clairs. Les transitions sont efficaces mais cohérentes.
L'environnement Material Design
Material est un environnement en 3 dimenssions
Tout objet Material dispose de dimensions X, Y et Z.
Tout objet Material n'as qu'une seule position Z.
Les key light créent des ombres directionnelles et les ambient lights créent des ombres douces.
3D world
Material est un environnement 3D, ce qui signifie que tout objet dispose de trois dimenssions, X, Y et Z, l'axe Z est perpendiculaire au plan de l'affichage, l'axe Z+ allant vers l'utilisateur.
Chaque feuille de material n'occupe qu'un seul plan sur l'axe Z et à une épaisseur standard de 1dp, équivalent à 1px d'épaisseur sur un écran d'une densité de 160dpi
Ombres et lumières
Dans l'environnement material, les lumière virtuelles illumines la scène, les key light créent les ombres directionnelles, pendant que les ambient lights créent les ombres douces sur tous les angles.
Les ombres sont projetées par ces deux sources de lumières. En développement android, les ombres apparaissent quand une source de lumière est bloquée par une feuille de materiel à différentes position sur l'axe Z. En dévelloppement web, les ombres sont représentées en manipulant l'axe Y seulement.
Les exemples suivant montrent une card avec une hauteur de 6dp.
Ombre projetée par key light
Ombre projetée par ambient light
Ombres projetée par key light et ambient light combinées
Materialize-sass
Les différences avec bootstrap :
Bootstrap : .col-sm12
Materialize : .col .s12
Bootstrap : .col-sm6 .offset-sm-3
Materialize : .col .s6 .offset-s3
Il est impératif de préciser la taile .s des .col,
une .s12 restera toujours .s12,
une .l6, prendra la taille max de son contenu si l'affichage passe sur du .m ou plus petit.
Les tailles d'écrans :
| extra small | small | medium | large | extra large | |
|---|---|---|---|---|---|
| Bootstrap | .col-xs <576px |
.col-sm ≥576px |
.col-md ≥768px |
.col-lg ≥992px |
.col-xl ≥1200px |
| Materialize | - | .s <=600px |
.m >600px |
.l >992px |
.xl >1200px |
Les media queries
| CSS | SASS |
|---|---|
| .hide-on-small-only | @media #{$small-and-down} {...} |
| .hide-on-small-and-down | @media #{$medium-and-up} {...} |
| .hide-on-med-and-down | @media #{$medium-and-down} {...} |
| .hide-on-med-and-up | @media #{$large-and-up} {...} |
| .hide-on-med-only | @media #{$extra-large-and-up} {...} | .hide-on-large-only |
| .show-on-large | |
| .show-on-medium | |
| .show-on-small | .show-on-medium-and-up |
| .show-on-medium-and-down |
Material.io est la documentation officielle du material design, elle regroupe tout ce qu'il faut savoir sur ce concept ainsi que quelques outils tel qu'une palette de couleur ou une liste de résolutions communes.
Materializecss est la documentation de la gem ruby, tout ce qu'il y as à savoir sur la gem ce trouve ici.