Advertisement
  1. Web Design
  2. Material Design Lite

Un aperçu de Material Design Lite

by
Read Time:5 minsLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

J'ai le sentiment que CodePen va être absolument rempli de Material Design dans les prochains mois. Pourquoi ? Parce que Google vient de dévoiler leur très attendu Material Design Lite (MDL). Cette bibliothèque de composants front-end permet aux gars du web d'implémenter la spécification Material Design de Google à l'aide de Vanilla HTML, CSS et JavaScript. C'est une implémentation légère de la spécification Material Design (peu de dépendances, faible charge, très ciblé) d'où l'appellation « Lite ».

En lançant MDL, Google à répondu à une demande très évidente. Ils ont pris note du fait qu'il y a eu des efforts de la communauté pour construire des frameworks inspirés du Material Desing, comme Bootstrap Material Design, Materialize et Material UI pour n'en citer que quelques uns. Avec MDL, construit en étroite collaboration avec l'équipe UX de Chrome, Google a fixé une norme sur la manière dont le Material Design devrait être implémenté sur les sites Web.

Regardons ce que MDL a mis sur la table avec sa première version !

Les composants Material Design

Contrairement aux Material Design Elements de Polymer (également connus sous le nom de Paper Elements) qui sont développées pour des sites web et des applications hautement interactifs, piloté par les données, MDL se concentre principalement sur les sites Web avec un contenu plus simple comme les blogs, le marketing et les pages de garde (landing pages).

Dans cette version initiale, le MDL est livré avec une poignée de composants, incluant :

Mise en pages

Le composant de mise en pages propose un certain nombre de blocs de construction pour construire des pages. Par exemple, la grille : une fonctionnalité fondamentale de tout framework front-end. La grille de MDL est construite avec Flexbox et un peu de calc() CSS. Il a douze colonnes prévues pour les grandes viewports (surface de l'écran visible par l'utilisateur), huit colonnes pour ce que vous pourriez appeler viewports taille-tablette et quatre colonnes pour les plus petites viewports.

Le composant de mise en pages de MDL comprend également la navigation, les onglets et les pieds de page – chacun d'entre eux a été optimisé pour différentes tailles de viewport.

Boutons

Selon les principes de Material Design, il y a plusieurs types de visuels différents de bouton, dont certains sont :

  • Bouton normal : un bouton rectangulaire avec un fond distinct de la couleur du texte.
  • Bouton plat : un bouton sans le fond.
  • Bouton personnalisé Material Design d'Action Float (ou FAB) : un bouton circulaire qui flotte sur l'interface, généralement porteur d'action principale de l'écran actuel ou, dans ce cas, de la page.

Chaque bouton peut être amélioré avec l'effet d'ondulation familier.

Cartes

Une carte est un conteneur pour afficher du contenu, comme du texte et des images, ce qui encourage habituellement une sorte d'action. Par exemple, une image avec un bouton « j'aime » ou « partager », une liste de musique avec le bouton « Jouer », ou peut-être une note avec un bouton « Enregistrer ».

Badges

Un badge est un petit cercle, placé près d'un élément d'interface utilisateur, contenant généralement un nombre (peut-être pour indiquer les nouveaux messages non lus ou les chats entrants) ou un icone. De nos jours, où les informations circulent sans cesse dans l'ensemble de nos appareils, un « badge » peut être considéré comme un élément d'interface utilisateur très important dans n'importe quel design.

Et il y en a plus

D'autres essentiels, que vous trouverez dans le MDL incluent les champs de saisie, les curseurs, les commutateurs, les menus, les info-bulles et les icones du Material Design.

Meet the componentsMeet the componentsMeet the components
A la rencontre des composants

En outre, Google fournit également quelques gabarits pour vous aider à devenir rapidement opérationnel, avec la structure de mise en page appropriée. Il existe cinq types de gabarits dans cette version initiale :

  1. Un blog
  2. Un article
  3. Une page de garde d'app ou marketing
  4. Un tableau de bord
  5. Une page web de contenu texte
The MDL blog layout templateThe MDL blog layout templateThe MDL blog layout template
Le plutôt savoureux gabarit de mise en pages de blog MDL

Personnalisation

Les styles MDL sont structurés avec Sass et la méthodologie BEM. Les styles peuvent être personnalisés à bien des égards, même avant de télécharger votre package du framework. Un de ces moyens est la roue chromatique sur la page Personnaliser. La roue chromatique permet de sélectionner des accents de couleur basés sur la sélection de couleur primaire. Le customizer génère alors la feuille de style, que vous pouvez télécharger, ou lier directement à partir du Google CDN (Content Delivery Network, ndlt).

Theme builderTheme builderTheme builder
Aperçu du générateur de thème MDL

Le fichier material.min.css qui en résulte est assez petit (17,6 Ko gzippé), mais pour ceux qui ont besoin d'un contrôle complet afin d'en réduire la taille au max, le code source est disponible dans le dépôt Github.

Support de navigateur

Étant donné que la plupart des composants dans MDL est construite avec les techniques de pointe web, tels que calc(), Flexbox, querySelector et classList, MDL ne fonctionnera parfaitement que dans les navigateurs modernes qui reviennent toujours : Chrome, Firefox, Opera, Microsoft Edge. MDL va se dégrader avec élégance dans les navigateurs plus anciens, tels que IE9, en ne servant que la version CSS. Les éléments interactifs (comme l'effet d'ondulation dans le bouton, par exemple) ne seront pas présents.

Ceci dit, l'interface utilisateur est toujours remarquablement présentable dans IE8. Par exemple, jetez un oeil sur les boutons et l'élément tableaux :

Réflexions finales

Vous seriez pardonné de penser que nous avons maintenant un framework front-end supplémentaire à mettre dans notre boîte à outils aux côtés de Bootstrap et Foundation. Cependant, MDL n'entend pas remplacer, ou devenir un successeur de Bootstrap. Material Design fait partie de la mission de Google pour s'assurer que les interfaces utilisateur, ainsi que les expériences dans leurs organisations produit sont cohérentes, uniformes et réfléchies.

Nous allons nous rappeler l'idée de base pour un moment :

« Nous nous sommes défiés nous-mêmes pour créer un langage visuel pour nos utilisateurs qui synthétise les principes classiques du bon design avec l'innovation et le potentiel de la science et de la technologie. » – Introduction au Material Design de Google

Donc n'oubliez pas, tandis que le MDL correspond bien aux produits Google, il peut être hors contexte lorsqu'il est implémenté dans un site Web qui n'a rien à voir avec Google. Toutefois, comme nous venons de découvrir, Google fournit un contrôle total sur le code source, ce qui nous permet de le personnaliser jusqu'au moindre détail. Et c'est ce dont nous allons parler dans le prochain article. Alors, restez connectés !

Ressources supplémentaires

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.