Le flat design, c’est … plat. Ce courant artistique apporte du sens à ceux qui en comprennent les codes. Tout le monde n’a pas une sensibilité suffisante pour apprécier le concept. Il faut quelque chose d’intermédiaire entre le skeuomorphisme et le dessin plat. Un design simple à comprendre et parlant pour la plupart des gens.
Reprenons le design plat et ajoutons une légère profondeur. Imaginons que les éléments de notre site sont regroupés par thème et chaque thème est une carte à jouer posée sur une table blanche. Il faut donc limer les bords de la carte et ajouter une légère en dessous (border-radius: 5px; box-shadow: 5px 5px 5px black;).
Ainsi est né le material design. Mes simplifications risquent de me faire détester par les puristes tant le cahier des charges (guidelines) de ce concept promu en 2014 par la société Google est détaillé et précis. Alors enchaînons sur les clichés. La material n’est qu’un dérivé du flat design.
Il utilise des concepts simples. Les icônes se veulent minimalistes. A part une ombre et des coins arrondis, on ne distingue pas trop l’avancé. Redevenons sérieux. Le concept ne se limite pas à l’aspect esthétique. Le material design définit d’autres concepts à appliquer sur les applications ou les sites.
Ainsi, tout est calculé pour être optimisé. Une application ‘material’ se doit d’être ‘responsive’. Quel que soit le support, son affichage sera clair pour l’utilisateur. Cela va dans la répartition et le recadrage des différentes cartes. Mais d’autres éléments sont pris en compte.
Le contraste
Les éléments actifs (un lien, un bouton) doivent se détacher du fond. Il doit y avoir un rapport d’au moins 3 pour 1 entre la couleur de l’élément et celle du fond. Cela se joue au choix des couleurs mais n’étant pas graphiste je ne saurais bien l’expliquer ces concepts. Voici donc le lien.
Les zones actives
Imaginons une icône pour lancer la lecture d’une vidéo, le classique triangle orienté à droite. Celui-ci est dans un carré en relief. La zone active pour accéder à l’option est plus grande que le carré. De plus, la distance entre les différentes options est précise. Même les boutons et la taille du texte sont réglementés.
L’accessibilité
Material est inclusif. Un malvoyant doit se repérer facilement en modifiant une option de contraste. Un aveugle écoutera le site grâce à un logiciel de lecture. Il faut donc identifier les éléments pertinents et les mettre en avant. Chaque image doit avoir un texte descriptif. Material répond au WCAG.
Il y a bien d’autres concepts détaillés dans le cahier des charges. Suffisamment pour exiger le travail d’un expert en interface utilisateur, le fameux UI Designer. Une application validée ‘material design’ apportera joie et bonheur à ses utilisateurs et richesse à ses créateurs.
Pour réussir cela, le material design se base sur les standards modernes d’Internet. HTML et CSS 3 sont exploités dans un cadre sécurisé. Si en début d’article je prenais des libertés sur le concept, il n’y a pas de place ici pour l’improvisation.
Cette absence de créativité me chagrine. Si tout est défini, comment peut-on s’améliorer ? Et leur bouton radio de Schrodinger m’effraie. Comme de tout concept. Il faut s’inspirer des bonnes idées et laisser la perfection aux experts.