Material design : quel framework ?

Après le flat design poussé par Apple, voilà le material design propulsé par Google. Il n’est évidemment pas seulement question de look and feel, mais aussi de choix d’ergonomie, de couleurs et d’animations. Google propose ainsi un document en ligne très complet sur le sujet, qui est sans nul doute une bible graphique prodigieuse pour définir rapidement le design d’un site web, d’une application, ou d’un document. Comment appliquer ces centaines de règles sans se perdre devant les centaines de recommandations qui en découlent ? En utilisant un framework qui a déjà implémenté la logique graphique et ergonomique du material design. Un moyen unique pour gagner du temps et appliquer parfaitement les guidelines de Google. Voici 5 frameworks à tester.

Angular Material

AngularMaterial

Fondé sur le framework AngularJS, Angular Material est une mise en œuvre complète des guidelines. Et pour cause : Google soutient activement le développement d’AngularJS et le succès important de ce framework Javascript, largement mérité, garantit à Angular Material une certaine pérennité.

Material UI

MaterialUI

Basé sur React, Material UI propose un framework CSS bien documenté. Il faut toutefois ne pas avoir peur de se lancer dans l’apprentissage de React, qui est le framework utilisé par l’équipe de développement de Facebook.

Polymer

Polymer

Le projet Polymer est développé par Google. Il propose plusieurs composants web qui permet de développer des applications en ligne. On s’éloigne donc un peu du design web traditionnel, mais n’est-ce pas l’avenir du web ?

MUI CSS Framework

MUI-CSS-Framework

Inspiré de Boostrap, MUI CSS se veut léger et donc performant. Les quelques exemples développés sur le site sont plutôt convaincants. Les auteurs ont eu en plus la bonne idée de proposer deux bibliothèques de composants graphiques pour le logiciel de design Sketch : les graphistes disposent donc d’une base fiable pour imaginer l’interface et l’ergonomie du projet, sans devoir plonger dans le code, ni travailler sous le contrôle constant d’un développeur.

MaterializeCSS

Materialize

MaterializeCSS est un challenger de poids pour Angular Design. Très complet : il propose CSS, SCSS, fonctions Javascript, icones, et les fonts Roboto (de Google). C’est donc un pack complet, fort bien documenté. Cerise sur le gâteau, une partie du site, mais pas de la documentation, a été traduite en Français. A voir absolument, ne serait-ce pour se donner de l’inspiration, la partie Showcase du site, qui présente une trentaine de sites et d’applications développées avec MaterializeCSS.

Les autres frameworks à examiner

Verdict : lequel choisir ?

Bien sûr, tout cela est fonction de vos connaissances et du projet à réaliser. Si vous êtes un spécialiste de React, alors Material UI s’impose… Toutefois, Angular Material et MaterializeCSS semblent clairement se détacher du lot pour leur approche globalisante du Material Design.

Quelle est votre opinion sur ces frameworks ? En connaissez-vous d’autres ?