{"id":1192,"date":"2022-05-20T20:29:47","date_gmt":"2022-05-20T18:29:47","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=1192"},"modified":"2022-09-23T08:06:09","modified_gmt":"2022-09-23T06:06:09","slug":"le-material-design-pour-de-meilleures-experiences-web","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/le-material-design-pour-de-meilleures-experiences-web\/","title":{"rendered":"Le Material Design pour de meilleures exp\u00e9riences Web"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Un syst\u00e8me de guidelines UI et UX \u00e9labor\u00e9 par Google<\/h2>\n\n\n\n<p>Pr\u00e9sent\u00e9 pour la premi\u00e8re fois lors de la conf\u00e9rence Google I\/O en juin 2014, <a href=\"https:\/\/m3.material.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">le Material Design<\/a> <strong>s&rsquo;est rapidement impos\u00e9<\/strong> dans toutes les interfaces des applications Google. Inspir\u00e9 par les tendances graphiques de l&rsquo;\u00e9poque comme le Flat Design ou le <a href=\"https:\/\/jagullo.fr\/blog\/le-concept-de-responsive-web-design\/\">Responsive Design<\/a>, ce nouveau syst\u00e8me de guidelines a su reprendre certains aspects comme le minimaliste ou les aplats de couleurs en y int\u00e9grant des effets plus modernes comme la profondeur, les transformations, les ombres ou la r\u00e9activit\u00e9 des composants.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/05\/illustration_material-design.png\" alt=\"Des guidelines pour les interfaces web et mobiles d\u00e9velopp\u00e9es par Google\" class=\"wp-image-1301\" width=\"720\" height=\"480\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/05\/illustration_material-design.png 960w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/05\/illustration_material-design-300x200.png 300w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/05\/illustration_material-design-768x512.png 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption>Des guidelines pour les interfaces web et mobiles <\/figcaption><\/figure><\/div>\n\n\n\n<p>Libre \u00e0 chaque d\u00e9veloppeur <strong>de reprendre plus ou moins ces directives<\/strong> dans les projets web, desktop ou mobile, mais elles sont le m\u00e9ritent d&rsquo;\u00eatre claires. On pourrait penser \u00e0 un coup marketing de Google, mais il y a une v\u00e9ritable symbiose entre leurs guidelines et leurs applications. Ils se sont servis de leurs retours d&rsquo;exp\u00e9riences pour am\u00e9liorer les directives et en d\u00e9velopper de nouvelles. En 2022 on en est \u00e0 la troisi\u00e8me it\u00e9ration du Material Design pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et les interfaces.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quelques exemples des composants du Material Design<\/h2>\n\n\n\n<p>Les exemples ci-dessous pr\u00e9sentent <strong>quelques composants du Material Design<\/strong> issus de la librairie <a href=\"https:\/\/github.com\/material-components\/material-components-web\" target=\"_blank\" rel=\"noreferrer noopener\">Material Components<\/a> qui est d\u00e9velopp\u00e9e par une \u00e9quipe de d\u00e9veloppeurs et de graphistes chez Google et disponible en open source pour du le Web, Android et iOS.<\/p>\n\n\n\n<link href=\"https:\/\/jagullo.fr\/blog\/wp-content\/themes\/Extra-child\/assets\/css\/material-components-web.min.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/jagullo.fr\/blog\/wp-content\/themes\/Extra-child\/assets\/js\/material-components-web.min.js\"><\/script>\n<style>\n:root{--mdc-theme-primary:#3e5062;}\n.demo{text-align:center;}\n<\/style>\n\n\n\n<h3 class=\"wp-block-heading\">Text button<\/h3>\n\n\n\n<p>Il existe plusieurs types de boutons dans les guidelines et celui ci-dessous est le simple <strong>text button<\/strong> permettant les actions des utilisateurs dans une interface. Au clic un effet d&rsquo;ondulation est propag\u00e9 sur le bouton \u00e0 partir de l&rsquo;endroit o\u00f9 l&rsquo;utilisateur \u00e0 appuy\u00e9. Le bouton reste actif apr\u00e8s le clic pour montrer que c&rsquo;est le dernier \u00e9l\u00e9ment \u00e0 avoir eu une interaction. <\/p>\n\n\n\n<p class=\"demo\">\n<button class=\"mdc-button mdc-button--outlined\">\n    <span class=\"mdc-button__ripple\"><\/span>\n    <span class=\"mdc-button__focus-ring\"><\/span>\n    <span class=\"mdc-button__label\">Text Button<\/span>\n  <\/button>\n<\/p>\n<style>\n.mdc-button{width:150px;height:40px;}\n<\/style>\n<script>\nmdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Text field<\/h3>\n\n\n\n<p>Le composant <strong>text field<\/strong> est tr\u00e8s utilis\u00e9 dans les applications Google. Le placeholder qui repr\u00e9sente le texte par d\u00e9faut du champ va se d\u00e9placer en haut au moment ou l&rsquo;utilisateur va cliquer dessus. Cela permet de simplifier les informations et de toujours garder visible le nom du champ quand l&rsquo;utilisateur va l&rsquo;\u00e9diter.<\/p>\n\n\n\n<p class=\"demo\">\n<label class=\"mdc-text-field mdc-text-field--outlined\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"><\/span>\n    <span class=\"mdc-notched-outline__notch\">\n      <span class=\"mdc-floating-label\" id=\"my-label-id\">Your Name<\/span>\n    <\/span>\n    <span class=\"mdc-notched-outline__trailing\"><\/span>\n  <\/span>\n  <input type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label-id\">\n<\/label>\n<\/p>\n<style>\n.mdc-text-field{width:200px;}\n.demo .mdc-text-field__input:focus{background:#fff;}\n.demo .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:#3e5062;}\n<\/style>\n<script>\nmdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Switch<\/h3>\n\n\n\n<p>Le composant <strong>switch<\/strong> est en fait une case \u00e0 cocher un peu plus moderne. On retrouve ce composant dans de nombreuses interfaces comme les param\u00e8tres du syst\u00e8me iOS ou Android afin d&rsquo;activer ou non certaines options. Ce composant montre bien l&rsquo;effet de r\u00e9activit\u00e9 du Material Design afin de signaler tout changement d&rsquo;\u00e9tat \u00e0 l&rsquo;utilisateur.<\/p>\n\n\n\n<p class=\"demo\">\n<button id=\"basic-switch\" class=\"mdc-switch mdc-switch--unselected\" type=\"button\" role=\"switch\" aria-checked=\"false\">\n  <div class=\"mdc-switch__track\"><\/div>\n  <div class=\"mdc-switch__handle-track\">\n    <div class=\"mdc-switch__handle\">\n      <div class=\"mdc-switch__shadow\">\n        <div class=\"mdc-elevation-overlay\"><\/div>\n      <\/div>\n      <div class=\"mdc-switch__ripple\"><\/div>\n      <div class=\"mdc-switch__icons\">\n        <svg class=\"mdc-switch__icon mdc-switch__icon--on\" viewBox=\"0 0 24 24\">\n          <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"><\/path>\n        <\/svg>\n        <svg class=\"mdc-switch__icon mdc-switch__icon--off\" viewBox=\"0 0 24 24\">\n          <path d=\"M20 13H4v-2h16v2z\"><\/path>\n        <\/svg>\n      <\/div>\n    <\/div>\n  <\/div>\n  <span class=\"mdc-switch__focus-ring-wrapper\">\n    <div class=\"mdc-switch__focus-ring\"><\/div>\n  <\/span>\n<\/button>\n<label for=\"basic-switch\">off\/on<\/label>\n<\/p>\n<style>\n.demo .mdc-switch{padding:0;}\n.demo .mdc-switch label:hover{cursor:pointer;}\n.demo .mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after,\n.demo .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after,\n.demo .mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after,\n.demo .mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after,\n.demo .mdc-switch:enabled .mdc-switch__track::after{background:#3e5062;}\n<\/style>\n<script>\nmdc.switchControl.MDCSwitch.attachTo(document.querySelector('.mdc-switch'));\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Select<\/h3>\n\n\n\n<p>Le composant <strong>select<\/strong> permet de choisir un \u00e9l\u00e9ment dans une liste. Un peu comme le textfield, le placeholder du composant reste visible quand l&rsquo;utilisateur clique dessus et se positionne en haut du composant. Un effet de transformation ou bien de disparition est appliqu\u00e9 sur la liste au moment de l&rsquo;ouverture et de la fermeture du composant. <\/p>\n\n\n\n<div class=\"demo demo-select\">\n<div class=\"mdc-select mdc-select--filled demo-width-class\">\n  <div class=\"mdc-select__anchor\" role=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-labelledby=\"demo-label demo-selected-text\">\n    <span class=\"mdc-select__ripple\"><\/span>\n    <span id=\"demo-label\" class=\"mdc-floating-label\">Pick a Food Group<\/span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span id=\"demo-selected-text\" class=\"mdc-select__selected-text\"><\/span>\n    <\/span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg class=\"mdc-select__dropdown-icon-graphic\" viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon class=\"mdc-select__dropdown-icon-inactive\" stroke=\"none\" fill-rule=\"evenodd\" points=\"7 10 12 15 17 10\">\n        <\/polygon>\n        <polygon class=\"mdc-select__dropdown-icon-active\" stroke=\"none\" fill-rule=\"evenodd\" points=\"7 15 12 10 17 15\">\n        <\/polygon>\n      <\/svg>\n    <\/span>\n    <span class=\"mdc-line-ripple\"><\/span>\n  <\/div>\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\">\n    <ul class=\"mdc-deprecated-list\" role=\"listbox\" aria-label=\"Food picker listbox\">\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" aria-selected=\"true\" data-value=\"\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"><\/span>\n      <\/li>\n      <li class=\"mdc-deprecated-list-item\" aria-selected=\"false\" data-value=\"grains\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"><\/span>\n        <span class=\"mdc-deprecated-list-item__text\">\n          Bread, Cereal\n        <\/span>\n      <\/li>\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--disabled\" aria-selected=\"false\" data-value=\"vegetables\" aria-disabled=\"true\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"><\/span>\n        <span class=\"mdc-deprecated-list-item__text\">\n          Vegetables\n        <\/span>\n      <\/li>\n      <li class=\"mdc-deprecated-list-item\" aria-selected=\"false\" data-value=\"fruit\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"><\/span>\n        <span class=\"mdc-deprecated-list-item__text\">\n          Fruit\n        <\/span>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n<\/div>\n<style>\n.demo-select{margin-bottom:1.6em;}\n.demo .mdc-select{width:200px;}\n.demo .mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:#3e5062;}\n<\/style>\n<script>\nmdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Quelques librairies bas\u00e9es sur le materiel design<\/h2>\n\n\n\n<p>De nombreuses librairies ont \u00e9t\u00e9 cr\u00e9\u00e9es par des d\u00e9veloppeurs web et <strong>qui int\u00e8grent les guidelines<\/strong> du Material Design. On peut citer par exemple <strong>Vuetify<\/strong> pour le framework Vue.js ou encore <strong>Angular Material<\/strong> d\u00e9velopp\u00e9 par Google pour Angular. En fonction du framework que l&rsquo;on utilise, on peut trouver diff\u00e9rentes librairies proposant des composants adapt\u00e9s. Certaines sont gratuites et d&rsquo;autres payantes afin de b\u00e9n\u00e9ficier des mises \u00e0 jour de la librairie.<\/p>\n\n\n\n<p>Google met \u00e0 jour r\u00e9guli\u00e8rement les guidelines du Material Design dont les nouveaut\u00e9s sont d\u00e9voil\u00e9es lors de la conf\u00e9rence annuelle Google I\/O. Utiliser ces directives est un bon moyen de proposer des interfaces intuitives, \u00e9volutives et test\u00e9es pour ses projets afin de renforcer l&rsquo;exp\u00e9rience utilisateur.<\/p>\n<div class=\"list-tags\"><a href=\"https:\/\/jagullo.fr\/blog\/tag\/css-sass-less\/\" class=\"link-tag\" title=\"CSS \/ SASS \/ LESS\">CSS \/ SASS \/ LESS<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/html\/\" class=\"link-tag\" title=\"HTML\">HTML<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/javascript\/\" class=\"link-tag\" title=\"JavaScript\">JavaScript<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Un syst\u00e8me de guidelines UI et UX \u00e9labor\u00e9 par Google Pr\u00e9sent\u00e9 pour la premi\u00e8re fois lors de la conf\u00e9rence Google I\/O en juin 2014, le Material Design s&rsquo;est rapidement impos\u00e9 dans toutes les interfaces des applications Google. Inspir\u00e9 par les tendances graphiques de l&rsquo;\u00e9poque comme le Flat Design ou le Responsive Design, ce nouveau syst\u00e8me [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1301,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[28,30,33],"class_list":["post-1192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphisme","tag-css-sass-less","tag-html","tag-javascript","et-has-post-format-content","et_post_format-et-post-format-standard"],"_links":{"self":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/comments?post=1192"}],"version-history":[{"count":3,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1192\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1192\/revisions\/1311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media\/1301"}],"wp:attachment":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media?parent=1192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/categories?post=1192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/tags?post=1192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}