{"id":46482,"date":"2021-02-02T11:01:15","date_gmt":"2021-02-02T11:01:15","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=46482"},"modified":"2025-12-29T02:31:34","modified_gmt":"2025-12-29T00:31:34","slug":"what-is-material-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/what-is-material-design\/","title":{"rendered":"What Is Material Design and How Should It Be Used?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"46482\" class=\"elementor elementor-46482\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9fc2cfa elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9fc2cfa\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7919e6e\" data-id=\"7919e6e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a56c848 elementor-widget elementor-widget-text-editor\" data-id=\"a56c848\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Since its creation, the face of the web has undergone many changes. What essentially started as a Wild West of design in the 1990s and early 2000s eventually made way for simpler, cleaner, and more predictable websites.<\/p><p>Then, smartphones entered the fray and huge changes were needed. Consequently, there\u2019s been a seismic shift that apps, and eventually websites underwent thanks to Google\u2019s design system and language \u2014 Material Design.\u00a0<\/p><p>Originally introduced in 2014, this <a href=\"https:\/\/elementor.com\/blog\/grid-design\/\" target=\"_blank\" rel=\"noopener\">grid-based design<\/a> system got adopted, spread like wildfire, and then took on a new life.\u00a0<\/p><p>But what is it, really?<\/p><p>In this article, we are going to discuss Material Design, show you some examples of websites that use Material Design today, and provide you with resources to help you use Material Design in your own design and development of websites. So, let\u2019s get started.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ea243c elementor-align-center elementor-widget elementor-widget-button\" data-id=\"3ea243c\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/flat-design\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Get Acquainted With Another Design Style \u2014 Flat Design <\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d528307 blog-toc elementor-widget elementor-widget-heading\" data-id=\"d528307\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e757ff5 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"e757ff5\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-is\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Is Material Design?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#core-principles\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Are the Core Principles of Material Design?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-do-use\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How Do Web Designers Use Material Design Today?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#examples\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Examples of Material Design<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#pros-cons\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">The Pros and Cons of Material Design<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#resources\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Resources for Learning How To Implement Material Design<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#material-design-ui-kit\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Material Design UI Kit<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4793a14 elementor-widget elementor-widget-menu-anchor\" data-id=\"4793a14\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-is\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5350d4 elementor-widget elementor-widget-heading\" data-id=\"e5350d4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is Material Design?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7221a7 elementor-widget elementor-widget-text-editor\" data-id=\"e7221a7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Material Design is a design system that was developed by Google in 2014. The entire design system, its design language, and all its documentation now live at <a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noopener\">material.io<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22b7785 elementor-widget elementor-widget-image\" data-id=\"22b7785\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/1-material-design-website-r4q77ltbtpf9kni4sovn0u88own8tpillp91nxg9zq.png\" title=\"material-design-website\" alt=\"material-design-website\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-456fa5e elementor-widget elementor-widget-text-editor\" data-id=\"456fa5e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Like other <a href=\"https:\/\/elementor.com\/blog\/design-system\/\" target=\"_blank\" rel=\"noopener\">design systems<\/a>, Material Design includes the following:\u00a0<\/p><p><strong>An explanation of the driving principles behind the design system:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e4d9fd elementor-widget elementor-widget-image\" data-id=\"7e4d9fd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/2-material-design-introduction-page-r4q78q8dzkylfvvf8ocli2128h410oz239axatsck6.png\" title=\"material-design-introduction-page\" alt=\"material-design-introduction-page\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b154ca elementor-widget elementor-widget-text-editor\" data-id=\"9b154ca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Guidelines for using the new design language and creating products with it:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5680443 elementor-widget elementor-widget-image\" data-id=\"5680443\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/3-material-design-guidelines-for-navigation-transitions-r4q77y18ajvzrl0dtc5sf958ewz0lrv3zdqcwiy5qu.png\" title=\"material-design-guidelines-for-navigation-transitions\" alt=\"material-design-guidelines-for-navigation-transitions\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2854036 elementor-widget elementor-widget-text-editor\" data-id=\"2854036\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Reusable components that enable designers to easily create Material UIs:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e888a08 elementor-widget elementor-widget-image\" data-id=\"e888a08\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/4-material-design-components-r4q715n6xmlfwyvdgeiseytdyqfl0gwwds444l0iom.png\" title=\"material-design-components\" alt=\"material-design-components\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a5a723 elementor-widget elementor-widget-text-editor\" data-id=\"3a5a723\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>But Material Design is much more comprehensive than most design systems. That&#8217;s because it wasn&#8217;t built for just one brand or project.<\/p><p>Code-named \u201cQuantum Paper\u201d, Material Design was released as a design language that Android designers could use to create better apps through good design. Google also used Material Design to overhaul the design of its apps.<\/p><p>The overall goal of Material Design was to enable designers to quickly build apps that were <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7326\">responsive<\/a>, usable, and scalable.\u00a0<\/p><p>In 2014, the release of Material Design made huge waves across the design community \u2014 not just for Android development, but for iOS apps and websites as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6cf1a9 elementor-widget elementor-widget-heading\" data-id=\"e6cf1a9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Why Was Material Design Created?\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4fb45de elementor-widget elementor-widget-text-editor\" data-id=\"4fb45de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To understand how Material Design came to be, we have to look at what came before it.\u00a0<\/p><p><strong>Skeuomorphism<\/strong><\/p><p>It was around 2010 when <a href=\"https:\/\/elementor.com\/blog\/skeuomorphism-ux-design\/\">skeuomorphism<\/a> rose to prominence. This was a style of design that made UI elements look like the actual objects they were based on. We saw this a lot when it came to website backgrounds and icons.<\/p><p>This is a screenshot from the <a href=\"https:\/\/www.apple.com\/\" target=\"_blank\" rel=\"noopener\">Apple<\/a> homepage in 2012:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08d51e4 elementor-widget elementor-widget-image\" data-id=\"08d51e4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/5-apple-website-2012-r4q77mr60jgjw9grn7a9lbzpaaim1embxtwj57evlg.png\" title=\"apple-website-2012\" alt=\"apple-website-2012\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29459ec elementor-widget elementor-widget-text-editor\" data-id=\"29459ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Many of the app icons you see on the iPad are skeuomorphic. For example, look at the ones highlighted in yellow:&nbsp;<\/p>\n<ul>\n<li>The Camera app\u2019s icon resembles the lens of a camera.&nbsp;<\/li>\n<li>The Clock app\u2019s icon looks like an old analog wall clock.&nbsp;<\/li>\n<li>The Calendar app\u2019s icon looks like a flippable calendar card.<\/li>\n<\/ul>\n<p>Skeuomorph UIs ended up proving to be too distracting because of their lifelike qualities. What\u2019s more, the realistic attributes of the design weren\u2019t used for any reason other than to be trendy.&nbsp;<\/p>\n<p><strong>Flat Design<\/strong><\/p>\n<p>The subsequent <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\">design trend<\/a>, <a href=\"https:\/\/elementor.com\/blog\/flat-design\/\">flat design<\/a>, aimed to strip away the excess and superficialism of its predecessor.&nbsp;<\/p>\n<p>Here\u2019s how those previously skeuomorphic icons look on an iOS device in 2020:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6dcc1c8 elementor-widget elementor-widget-image\" data-id=\"6dcc1c8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"720\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=720\/blog\/wp-content\/uploads\/2021\/01\/6-iphone12-screen-with-logos-2020.png\" class=\"attachment-large size-large wp-image-46490\" alt=\"iphone12-screen-with-logos-2020\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/6-iphone12-screen-with-logos-2020.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/6-iphone12-screen-with-logos-2020-300x300.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=150\/blog\/wp-content\/uploads\/2021\/01\/6-iphone12-screen-with-logos-2020-150x150.png 150w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6a3298 elementor-widget elementor-widget-text-editor\" data-id=\"f6a3298\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These icons (as well as the icons for many long-standing apps) have become flat and had most of the realistic qualities taken out of them.\u00a0<\/p><p>While flat design continues to persist to this day \u2014 since <a href=\"https:\/\/elementor.com\/blog\/minimalist-design\/\" target=\"_blank\" rel=\"noopener\">minimalism<\/a> and good, clean design will never go out of fashion \u2014 there was a major flaw that needed fixing.\u00a0<\/p><p><a href=\"https:\/\/www.nngroup.com\/articles\/flat-design-best-practices\/\" target=\"_blank\" rel=\"noopener\">As Nielsen Norman Group explains<\/a>:\u00a0<\/p><p>\u201c[Flat design] often leads to click uncertainty and decreased user efficiency. When designers flatten the UI, they tend to remove many signifiers that normally tell users where to click.\u201d<\/p><p><strong>Material Design<\/strong><\/p><p>Material Design was inspired by the physical world. But this wasn\u2019t an attempt to bring design back to the skeuomorphic days. It\u2019s a metaphor (which we\u2019ll look shortly at when we explore its principles).\u00a0<\/p><p>Really, what Material Design did was move away from designing completely flat UIs to designing surfaces that were inspired by paper and ink. Think of it like this:<\/p><p>When looked at head-on, a sheet of paper appears flat and two-dimensional. However, in the real world, that\u2019s not actually how it behaves.\u00a0<\/p><p>Paper exists in three dimensions. Sheets of paper create shadows, seams, and folds and can be cut and resized for our needs \u2014 something that Google aimed to recreate in the digital space with Material Design.\u00a0<\/p><p>This <a href=\"https:\/\/material.io\/develop\/web\/components\/app-bars-top\" target=\"_blank\" rel=\"noopener\">example from the Material Design website<\/a> is one of Material\u2019s trademark styles:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a7dd3e elementor-widget elementor-widget-image\" data-id=\"2a7dd3e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"242\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=242\/blog\/wp-content\/uploads\/2021\/01\/7-material-design-top-app-bar-example.png\" class=\"attachment-large size-large wp-image-46491\" alt=\"material-design-top-app-bar-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/7-material-design-top-app-bar-example.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/7-material-design-top-app-bar-example-300x101.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcab729 elementor-widget elementor-widget-text-editor\" data-id=\"dcab729\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Notice the shadow that sits <strong>under<\/strong> the otherwise flat top app bar.\u00a0<\/p><p>So, Material Design still uses flat elements. However, those elements sit on various planes and can behave like paper and other objects in the real world, giving digital experiences a more lifelike \u201cfeel\u201d.\u00a0<\/p><p>This enables an app\u2019s or website\u2019s users to more naturally respond to the UI as they understand how to touch and move around objects just as they would in the physical environment.<\/p><p>Matias Duarte, the Vice President of Design at Google, explained why this was an important change to bring to the web:\u00a0<\/p><p>\u201cUnlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.\u201d<\/p><p>Going back to that point from the NNG, Material Design fixes the issue stemming from a lack of depth and other key signifiers in flat design.\u00a0<\/p><p>It brought other more meaningful changes to design, too.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7f4af1 elementor-widget elementor-widget-heading\" data-id=\"b7f4af1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/web-design-statistics\/\">30 Valuable Web Design Statistics for 2021<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2ca59d elementor-widget elementor-widget-menu-anchor\" data-id=\"d2ca59d\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"core-principles\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95f3844 elementor-widget elementor-widget-heading\" data-id=\"95f3844\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Are the Core Principles of Material Design?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23057c8 elementor-widget elementor-widget-text-editor\" data-id=\"23057c8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Material Design is about more than just adding layers or shadows to design. It\u2019s a super-comprehensive resource that sets the rules for a new design language.\u00a0<\/p><p>Similar to how we have <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">basic principles we need to follow in web design<\/a>, Material Design has three principles of its own:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85eeaea elementor-widget elementor-widget-heading\" data-id=\"85eeaea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Principle #1: Material Is a Metaphor\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4c7e3a elementor-widget elementor-widget-text-editor\" data-id=\"e4c7e3a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Think of Material Design as the digitization of the physical world.\u00a0<\/p><p>So, rather than ask visitors and users to enter a digital experience that feels unnatural to them, Material Design applies the basic principles of our physical environment to apps and websites.<\/p><p>Take, for instance, the idea of cause-and-effect. When someone does a certain action, they expect a predictable outcome.<\/p><p>Take a look at this side-by-side comparison in Material Design\u2019s Interaction explainer:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9e3054 elementor-widget elementor-widget-image\" data-id=\"d9e3054\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/8-material-design-motion.gif\" class=\"attachment-full size-full wp-image-46492\" alt=\"material-design-motion\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09529a1 elementor-widget elementor-widget-text-editor\" data-id=\"09529a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Both interfaces have a horizontal scroller.\u00a0<\/p><p>The one on the left only moves as the user clicks and drags the content. This is how it works in the real world.\u00a0<\/p><p>The one on the right, however, has a click-activated scrolling animation. Our real-world objects don\u2019t move this way.\u00a0<\/p><p>By imbuing UIs with these kinds of physical properties, users can rely on their intuition and natural actions to engage with websites and apps.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fdfebc elementor-widget elementor-widget-heading\" data-id=\"0fdfebc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Principle #2: Bold, Graphic, Intentional\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5eb6794 elementor-widget elementor-widget-text-editor\" data-id=\"5eb6794\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Look at this example from the Material Foundation section on <a href=\"https:\/\/elementor.com\/blog\/podcast-37-oded-ezer\/\" target=\"_blank\" rel=\"noopener\">Web Typography<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c589829 elementor-widget elementor-widget-image\" data-id=\"c589829\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/9-material-design-foundation-rules-for-typography.png\" class=\"attachment-large size-large wp-image-46494\" alt=\"material-design-foundation-rules-for-typography\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/9-material-design-foundation-rules-for-typography.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/9-material-design-foundation-rules-for-typography-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e71eb4 elementor-widget elementor-widget-text-editor\" data-id=\"1e71eb4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>All of Material Foundation is this comprehensive. Each section breaks down how the component works and why it needs to work that way. Essentially, there&#8217;s meaning and logic behind every design choice.\u00a0<\/p><p>This was a significant change in design at the time. No longer was it about designing something because someone liked how it looked or because it followed a certain trend.\u00a0<\/p><p>This system clearly broke down which UI elements were vital and had to be accounted for:\u00a0<\/p><ul><li><a href=\"https:\/\/elementor.com\/blog\/website-layout-design\/\" target=\"_blank\" rel=\"noopener\">Layout<\/a> (with an emphasis on responsive grids and hierarchy)<\/li><li>Navigation<\/li><li><a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\" target=\"_blank\" rel=\"noopener\">Color<\/a><\/li><li>Typography &amp; <a href=\"https:\/\/elementor.com\/blog\/web-fonts\/\" target=\"_blank\" rel=\"noopener\">Web Fonts<\/a><\/li><li>Sound (this mainly pertains to apps)<\/li><li>Iconography<\/li><li>Shape<\/li><li><a href=\"https:\/\/elementor.com\/blog\/introducing-motion-effects\/\" target=\"_blank\" rel=\"noopener\">Motion<\/a><\/li><li>Interaction<\/li><li>Communication (including images, writing, and data visualization)<\/li><\/ul><p>Material Design also explained how exactly (and why) to design them a certain way to create a user-first experience.<\/p><p>Now, it&#8217;s clear why \u201cintentional\u201d was part of this principle. But what about \u201cbold\u201d and \u201cgraphic\u201d?\u00a0<\/p><p>In the beginning, Material Design heavily focused on grid-based design, clear typographic hierarchy, <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6889\">bold<\/a> color palettes, and meaningful animation (among other things).\u00a0<\/p><p>To give you an idea of what this looked like, this is a tool called <a href=\"https:\/\/www.materialpalette.com\/\" target=\"_blank\" rel=\"noopener\">Material Design Color Palette Generator<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cadfc2 elementor-widget elementor-widget-image\" data-id=\"3cadfc2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/10-material-design-color-palette-generator.png\" class=\"attachment-large size-large wp-image-46495\" alt=\"material-design-color-palette-generator\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/10-material-design-color-palette-generator.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/10-material-design-color-palette-generator-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfeb91d elementor-widget elementor-widget-text-editor\" data-id=\"dfeb91d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Notice how bright these colors are? Material Design pushed for stronger, bolder color palettes in order to create more contrast and depth in the UI.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a853888 elementor-widget elementor-widget-heading\" data-id=\"a853888\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Principle #3: Motion Provides Meaning\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1c2c22 elementor-widget elementor-widget-text-editor\" data-id=\"f1c2c22\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Motion design doesn\u2019t have anything to do with animation for the sake of animation. Like with everything else with Material Design, it\u2019s meant to make the design more intentional and the user experience more intuitive.\u00a0<\/p><p>There are three reasons when Material Design called for (subtle) motion in design:\u00a0<\/p><ul><li><strong>To be informative<\/strong> and let users know where and when the action was available.<\/li><li><strong>To help focus<\/strong> and guide users to the most important parts of the page.\u00a0<\/li><li><strong>To be expressive<\/strong> and add a little personality and joy to the interface.<\/li><\/ul><p>Elements as small as icons can be animated:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d941dd elementor-widget elementor-widget-image\" data-id=\"9d941dd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/11-material-design-motion-design-1024x576.gif\" class=\"attachment-large size-large wp-image-46496\" alt=\"material-design-motion-design\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/01\/11-material-design-motion-design-1024x576.gif 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/11-material-design-motion-design-300x169.gif 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/01\/11-material-design-motion-design-768x432.gif 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb76bf1 elementor-widget elementor-widget-text-editor\" data-id=\"eb76bf1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Entire interstitials can be animated, too. For instance, while users wait for a new screen to open.\u00a0<\/p><p>It really all depends on if motion is needed to inform, focus, or express at that point along the user journey.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8730fa elementor-widget elementor-widget-menu-anchor\" data-id=\"d8730fa\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-do-use\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29d7438 elementor-widget elementor-widget-heading\" data-id=\"29d7438\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How Do Web Designers Use Material Design Today?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-950a974 elementor-widget elementor-widget-text-editor\" data-id=\"950a974\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Like its predecessors, Material Design ended up having a pretty big flaw that needed fixing.\u00a0<\/p><p>It was too black-and-white. Literally, everything had been spelled out for designers, so it was like \u201cThis is how you do good design. Follow my lead.\u201d\u00a0<\/p><p>To be clear, there\u2019s nothing wrong with working from a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25424\">template<\/a> or components. The problem with Material Design, though, was that everyone was working from the same design system and rules.\u00a0<\/p><p>A <a href=\"https:\/\/elementor.com\/blog\/design-system\/\" target=\"_blank\" rel=\"noopener\">design system<\/a> is meant to be built for a brand so that its unique visual style can be developed, consistently applied, and maintained. But when a design system becomes available to the public at large \u2014 with the intention of making it fast and pain-free to build an app or website \u2014 everyone\u2019s going to jump on board.\u00a0<\/p><p>And, so, websites and apps all began to look the same way as a result.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-850e381 elementor-widget elementor-widget-heading\" data-id=\"850e381\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Material Design 2.0 To the Rescue\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a305d56 elementor-widget elementor-widget-text-editor\" data-id=\"a305d56\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In response to backlash from the design community (and indirectly from users who couldn\u2019t tell apps and websites apart any longer), Google <a href=\"https:\/\/9to5google.com\/2018\/04\/26\/what-is-material-design-2-examples-launch-io\/\" target=\"_blank\" rel=\"noopener\">unofficially released Material Design 2.0<\/a> in 2018.\u00a0<\/p><p>As for what Material Design looks like today, much of the original system is intact. There have been some updates to Material Design for modernity\u2019s sake.\u00a0<\/p><p>For example, there\u2019s now a greater emphasis on <a href=\"https:\/\/elementor.com\/blog\/white-space-web-design\/\">white space<\/a>, the usage of bottom navigation bars, and the inclusion of colorful icon sets. Oh, and dark mode is now available.\u00a0<\/p><p>In addition, there\u2019s a big emphasis on <a href=\"https:\/\/elementor.com\/blog\/web-accessibility-design-guide\/\" target=\"_blank\" rel=\"noopener\">web accessibility<\/a> and internationalization.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13df4e1 elementor-widget elementor-widget-image\" data-id=\"13df4e1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/12-material-design-accessibility.png\" class=\"attachment-large size-large wp-image-46498\" alt=\"material-design-accessibility\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/12-material-design-accessibility.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/12-material-design-accessibility-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-548dea8 elementor-widget elementor-widget-text-editor\" data-id=\"548dea8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>So, Material Design is definitely changing its guidelines along with the times.\u00a0<\/p><p>These days, Material Design 2.0 is best used as a toolkit.\u00a0<\/p><p>Sure, the design system and guidelines are still there, but there are now tons of resources that enable designers to take whatever piece of the system they find useful and then adapt it for their own purposes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6784cb elementor-widget elementor-widget-heading\" data-id=\"b6784cb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The Material Toolkit\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2251897 elementor-widget elementor-widget-text-editor\" data-id=\"2251897\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Thanks to the Material Design revamp, the design system is no longer responsible for restricting creativity and individualism on the web.<\/p><p>The Resources section is a big part of the reason why:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc1a90e elementor-widget elementor-widget-image\" data-id=\"fc1a90e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/13-material-design-resources.png\" class=\"attachment-large size-large wp-image-46499\" alt=\"material-design-resources\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/13-material-design-resources.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/13-material-design-resources-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8303b9 elementor-widget elementor-widget-text-editor\" data-id=\"e8303b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Designers have access to starters kits and tools like:\u00a0<\/p><ul><li>Icon sets<\/li><li>Google Fonts<\/li><li>Design kits for Adobe, Sketch, and Figma<\/li><li>Material Design <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/\"   title=\"templates\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"2018\">templates<\/a><\/li><\/ul><p>They&#8217;ll also find design customizer tools here that allow them to adhere to design best practices while putting their own creative branded spin on the UI:\u00a0<\/p><ul><li>Color<\/li><li>Shape<\/li><li>Typography<\/li><\/ul><p>Designers also have access to a new tool that empowers them to <a href=\"https:\/\/material-theme-builder.glitch.me\/\" target=\"_blank\" rel=\"noopener\">build their own Material theme<\/a>:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad73cdc elementor-widget elementor-widget-image\" data-id=\"ad73cdc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/14-build-a-material-theme.png\" class=\"attachment-large size-large wp-image-46500\" alt=\"build-a-material-theme\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/14-build-a-material-theme.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/14-build-a-material-theme-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a714756 elementor-widget elementor-widget-text-editor\" data-id=\"a714756\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see, there\u2019s a far greater emphasis on designers developing custom UIs as opposed to just sticking to the colors, fonts, layouts, and so on that Google originally designed for Android apps.\u00a0<\/p><p>This is what allows Material Design to persist today.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be8d530 elementor-widget elementor-widget-menu-anchor\" data-id=\"be8d530\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"examples\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24092f6 elementor-widget elementor-widget-heading\" data-id=\"24092f6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Examples of Material Design\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cc2ff4 elementor-widget elementor-widget-text-editor\" data-id=\"3cc2ff4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Truth be told, Material Design isn\u2019t as easy to recognize in web design these days for a number of reasons.\u00a0<\/p><p>For one, it was always a more obvious approach when it\u2019s done in mobile or web apps. This is <a href=\"https:\/\/material.io\/design\/material-studies\/reply.html\" target=\"_blank\" rel=\"noopener\">Reply<\/a>, a Material Study (basically, a fake case study), provided on the material.io website:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1927e3d elementor-widget elementor-widget-image\" data-id=\"1927e3d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"531\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=531\/blog\/wp-content\/uploads\/2021\/01\/15-material-studies-reply-example.png\" class=\"attachment-large size-large wp-image-46501\" alt=\"material-studies-reply-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/15-material-studies-reply-example.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/15-material-studies-reply-example-300x221.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-053f62c elementor-widget elementor-widget-text-editor\" data-id=\"053f62c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can tell in a split-second that this is Material Design.\u00a0<\/p><p>Then, there\u2019s the fact that Material Design 2.0 has allowed web designers to do more customizing, so the adherence to Material Design best practices is something you have to really be looking for to notice it.\u00a0<\/p><p>So, let\u2019s have a look at some websites that, today, make use of the good parts of Material Design:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a3aba4 elementor-widget elementor-widget-heading\" data-id=\"7a3aba4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Elementor\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ef57dd elementor-widget elementor-widget-image\" data-id=\"8ef57dd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/20-elementor-design-material-design-example-1024x576.gif\" class=\"attachment-large size-large wp-image-46508\" alt=\"elementor-design-material-design-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/01\/20-elementor-design-material-design-example-1024x576.gif 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/20-elementor-design-material-design-example-300x169.gif 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/01\/20-elementor-design-material-design-example-768x432.gif 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-589139b elementor-widget elementor-widget-text-editor\" data-id=\"589139b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you hadn\u2019t noticed, the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\"   title=\"Elementor\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"1060\">Elementor<\/a> website is based on many of those good design principles that Material Design gave us:\u00a0<\/p><ul><li>The most important buttons on the page are designed to look like clickable elements and transform to provide confirmation to visitors that \u201cYes, you should click here.\u201d<\/li><li>Other notable components (like the Layout, Typography, and Colors boxes) are placed on a higher layer so that visitors take notice of them before moving on.\u00a0<\/li><li>The animation is realistic, so visitors only see graphics that move in an expected way. They&#8217;re still eye-catching, but they won&#8217;t distract from the rest of the content.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2a89f7 elementor-widget elementor-widget-heading\" data-id=\"e2a89f7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Think With Google\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e25ef0 elementor-widget elementor-widget-image\" data-id=\"3e25ef0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/16-thinkwithgoogle-material-design-example-1024x576.gif\" class=\"attachment-large size-large wp-image-46502\" alt=\"thinkwithgoogle-material-design-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/01\/16-thinkwithgoogle-material-design-example-1024x576.gif 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/16-thinkwithgoogle-material-design-example-300x169.gif 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/01\/16-thinkwithgoogle-material-design-example-768x432.gif 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3662b7c elementor-widget elementor-widget-text-editor\" data-id=\"3662b7c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It\u2019s no surprise that a Google-run website is among the examples here. There are a number of elements that <a href=\"https:\/\/www.thinkwithgoogle.com\/\" target=\"_blank\" rel=\"noopener\">Think with Google<\/a> makes use of from its design system:\u00a0<\/p><ul><li>Grid-based design for an even, predictable flow of content.<\/li><li>Shadows that create contrast between layers and help visitors identify different parts of the page to engage with.\u00a0<\/li><li>Minimal design with bright color contrasts to draw attention to calls-to-action.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-838df9e elementor-widget elementor-widget-heading\" data-id=\"838df9e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Glue Lock\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c733edb elementor-widget elementor-widget-image\" data-id=\"c733edb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/17-glue-lock-material-design-example-1024x576.gif\" class=\"attachment-large size-large wp-image-46504\" alt=\"glue-lock-material-design-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/01\/17-glue-lock-material-design-example-1024x576.gif 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/17-glue-lock-material-design-example-300x169.gif 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/01\/17-glue-lock-material-design-example-768x432.gif 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3571bc0 elementor-widget elementor-widget-text-editor\" data-id=\"3571bc0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/en.gluehome.com\/\" target=\"_blank\" rel=\"noopener\">Glue Lock<\/a> is a great example of how to apply a super modern and personal touch to Material Design:\u00a0<\/p><ul><li>The buttons are boldly colored as well as hover-animated, ensuring that visitors know where to click.\u00a0<\/li><li>The dark theme still adheres to the principles of minimalism, using a bright white font and red button styling to offset the dark background.\u00a0<\/li><li>There\u2019s a clear hierarchy and organization of text on this page, with headers in much larger type than the body text.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d3044f9 elementor-widget elementor-widget-heading\" data-id=\"d3044f9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Mockplus\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bbc4437 elementor-widget elementor-widget-image\" data-id=\"bbc4437\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/ezgif.com-gif-maker-1-1024x576.gif\" class=\"attachment-large size-large wp-image-46521\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/01\/ezgif.com-gif-maker-1-1024x576.gif 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/ezgif.com-gif-maker-1-300x169.gif 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/01\/ezgif.com-gif-maker-1-768x432.gif 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2836909 elementor-widget elementor-widget-text-editor\" data-id=\"2836909\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.mockplus.com\/\" target=\"_blank\" rel=\"noopener\">Mockplus<\/a> is another website that takes the basic principles of usability from Material Design and gives them a custom touch:\u00a0<\/p><ul><li>The use of the bright brand pink amongst the otherwise subdued color palette helps quickly guide visitors to points of interest on the page.\u00a0<\/li><li>Shading behind important elements (like the mockup examples and testimonials) pulls important layers to the front of the visitors\u2019 visual field.<\/li><li>There is no animation on this page that takes place without the visitors\u2019 direct engagement with certain components, allowing them to control where their focus goes.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ea621e elementor-widget elementor-widget-heading\" data-id=\"5ea621e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Hotels.com\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56ed9a5 elementor-widget elementor-widget-image\" data-id=\"56ed9a5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"1024\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=474,h=1024\/blog\/wp-content\/uploads\/2021\/01\/hotelsdotcom-material-design-example-474x1024.png\" class=\"attachment-large size-large wp-image-46524\" alt=\"hotelsdotcom-material-design-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=474\/blog\/wp-content\/uploads\/2021\/01\/hotelsdotcom-material-design-example-474x1024.png 474w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=139\/blog\/wp-content\/uploads\/2021\/01\/hotelsdotcom-material-design-example-139x300.png 139w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/01\/hotelsdotcom-material-design-example-768x1661.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=710\/blog\/wp-content\/uploads\/2021\/01\/hotelsdotcom-material-design-example-710x1536.png 710w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=888\/blog\/wp-content\/uploads\/2021\/01\/hotelsdotcom-material-design-example.png 888w\" sizes=\"(max-width: 474px) 100vw, 474px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce29f36 elementor-widget elementor-widget-text-editor\" data-id=\"ce29f36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Although the desktop website for <a href=\"https:\/\/www.hotels.com\/\" target=\"_blank\" rel=\"noopener\">Hotels.com<\/a> doesn\u2019t adhere exactly to Material Design principles, its mobile site does:\u00a0<\/p><ul><li>There are clear dividing lines between each component on the search results page, making it easy for visitors to view hotel matches one at a time.\u00a0<\/li><li>The transition from List view to Map view shows off how Material Design helps web designers create more mobile-friendly experiences for visitors.\u00a0<\/li><li>The buttons in Map view for \u201cSee More Properties\u201d, \u201cList\u201d and the zoom buttons are easy to distinguish because they\u2019re placed on a layer above the map.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92ac65d elementor-widget elementor-widget-menu-anchor\" data-id=\"92ac65d\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"pros-cons\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cde0a55 elementor-widget elementor-widget-heading\" data-id=\"cde0a55\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Pros and Cons of Material Design\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33f623b elementor-widget elementor-widget-text-editor\" data-id=\"33f623b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Okay, so we\u2019ve already touched a lot on the pros and cons of Material Design. But let\u2019s sum up the good and the bad and then fill in some of the missing pieces, so we have it all in one place:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ad06e1 elementor-widget elementor-widget-heading\" data-id=\"1ad06e1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The Pros of Material Design:\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56da408 elementor-widget elementor-widget-text-editor\" data-id=\"56da408\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Web designers at all stages benefit from Material Design<\/strong>, whether it\u2019s the foundation they base all their work around or a trustworthy resource they turn to from time to time.<\/li><li>It provides <strong>a comprehensive overview<\/strong> of each of the key components and behaviors of a UI, what their value is in design, and how to use them.<\/li><li>Because of its start as a design system for Android apps, it\u2019s <strong>a <\/strong><a href=\"https:\/\/elementor.com\/blog\/introducing-mobile-editing\/\" target=\"_blank\" rel=\"noopener\"><strong>mobile-responsive<\/strong><\/a><strong> approach<\/strong> to design and is responsible for further pushing websites in that direction.<\/li><li>It\u2019s <strong>a user-first approach to design<\/strong> that\u2019s solved many of the flaws of its design predecessors where usability, legibility, and accessibility were an issue.<\/li><li>It forces designers to look beyond aesthetics and to design as something more intentional. As a result, <strong>interfaces become more intuitive<\/strong> and the user experience improves.<\/li><li>Google provides <a href=\"https:\/\/design.google\/resources\/\" target=\"_blank\" rel=\"noopener\"><strong>extensive documentation and support<\/strong><\/a> for developers and designers wanting to get more out of Material Design.<\/li><li>The design system is much more <strong>flexible and empowering<\/strong> these days so that designers can take what\u2019s good from Material Design and really make it their own.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e092b5 elementor-widget elementor-widget-heading\" data-id=\"0e092b5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The Cons of Material Design: \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-160b8b5 elementor-widget elementor-widget-text-editor\" data-id=\"160b8b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>When adhered to too strictly, websites (and apps) are at risk of <strong>looking like one another<\/strong>.<\/li><li>Some designers may feel like Material Design <strong>greatly discourages any freedom or creativity in design<\/strong> because it spells everything out for them.\u00a0<\/li><li>There are some who may be too intimidated to even try using Material Design (or even any of its premade components) because of the <strong>emphasis on coding<\/strong>.\u00a0<\/li><li>The design system was originally aimed at app designers, so there are some parts of it that <strong>aren\u2019t really relevant to web design<\/strong>. And if a designer can\u2019t make use of an entire system, the resulting interface may feel as though it\u2019s missing something.<\/li><li>Some of the design guidelines (like colorful interfaces, extensive use of icons, and animations) can <strong>create issues for <\/strong><a href=\"https:\/\/elementor.com\/blog\/speed-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener\"><strong>website speed<\/strong><\/a>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf9a5ab elementor-widget elementor-widget-menu-anchor\" data-id=\"cf9a5ab\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"resources\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a675120 elementor-widget elementor-widget-heading\" data-id=\"a675120\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Resources for Learning How To Implement Material Design\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64eb991 elementor-widget elementor-widget-text-editor\" data-id=\"64eb991\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you\u2019re excited about using Material Design in your design work, your next step is to bookmark the following resources:\u00a0<\/p><ul><li><a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noopener\"><strong>Material.io<\/strong><\/a><strong>:<\/strong> This is the official guide to Material Design and has everything you need to get started, including pre-designed components, brand imagery generators, and more.<\/li><li><strong>Material Design <\/strong><a href=\"https:\/\/material.io\/develop\" target=\"_blank\" rel=\"noopener\"><strong>documentation<\/strong><\/a><strong>, <\/strong><a href=\"https:\/\/www.youtube.com\/materialdesign\" target=\"_blank\" rel=\"noopener\"><strong>video tutorials<\/strong><\/a><strong>, and <\/strong><a href=\"https:\/\/material.io\/blog\" target=\"_blank\" rel=\"noopener\"><strong>blog content<\/strong><\/a><strong>:<\/strong> When you\u2019re ready for some hands-on practice, turn to Google\u2019s educational materials on Material Design.<\/li><li><strong><a href=\"https:\/\/elementor.com\/features\/global-settings\/\" target=\"_blank\" rel=\"noopener\">Global Systems How-to<\/a>: <\/strong>Once you get the hang of Material Design, you\u2019ll want an easy way to apply your universal styles to your Elementor website. This page will show you how.<\/li><\/ul><p>If you\u2019re a developer wanting to learn more about the coding side of Material Design, you\u2019ll want to hold onto these resources:\u00a0<\/p><ul><li><a href=\"https:\/\/material.io\/develop\/web\" target=\"_blank\" rel=\"noopener\"><strong>Material Design for the Web<\/strong><\/a><strong>:<\/strong> If you\u2019re a developer wanting to learn how to use Material Design for websites, this resource will teach you how to build Material components and develop your own theme.<\/li><li><a href=\"https:\/\/www.polymer-project.org\/\" target=\"_blank\" rel=\"noopener\"><strong>The Polymer Project<\/strong><\/a><strong>:<\/strong> Use and repurpose these Chrome-developed Material Design components in your website projects.\u00a0<\/li><li><a href=\"https:\/\/material-ui.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Material-UI<\/strong><\/a><strong>:<\/strong> Create your own Material-inspired design system or website with these Material Design React libraries.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-560f6f1 elementor-widget elementor-widget-menu-anchor\" data-id=\"560f6f1\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"material-design-ui-kit\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c07f0ea elementor-widget elementor-widget-heading\" data-id=\"c07f0ea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Material Design UI Kit<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f9a6e27 elementor-widget elementor-widget-text-editor\" data-id=\"f9a6e27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UI Kits can be a valuable design tool when working with flat design and <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/envato-elements\/\"   title=\"Envato\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"3613\">Envato<\/a> has some great examples for inspiration, like this one from DigitalHeaps:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db5a6b3 elementor-widget elementor-widget-image\" data-id=\"db5a6b3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"533\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=533\/blog\/wp-content\/uploads\/2021\/02\/material_design_ui_kit-1024x682.jpg\" class=\"attachment-large size-large wp-image-55199\" alt=\"Material Design UI Kit\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/02\/material_design_ui_kit-1024x682.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/02\/material_design_ui_kit-300x200.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/02\/material_design_ui_kit-768x512.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1370\/blog\/wp-content\/uploads\/2021\/02\/material_design_ui_kit.jpg 1370w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Material Design UI Kit by DigitalHeaps<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c619dff elementor-align-center elementor-widget elementor-widget-button\" data-id=\"c619dff\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Button\" data-gal=\"Position_Download_Template\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elements.envato.com\/material-design-web-ui-kit-F768U2S\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-far-arrow-alt-circle-down\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Get Material Design UI Kit\u200b<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79a9668 elementor-widget elementor-widget-heading\" data-id=\"79a9668\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Use Material Design To Make Your Website More User Friendly and Accessible \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba99d16 elementor-widget elementor-widget-text-editor\" data-id=\"ba99d16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>While Material Design isn\u2019t a flawless design system by any means, history has shown us that it successfully served its original purpose. It brought better design practices to the web and started moving everyone in the direction of highly usable, responsive design.\u00a0<\/p><p>Now that we\u2019ve had time to get to know it, web designers can use it to suit their own purposes:\u00a0<\/p><ul><li>To inspire design systems of their own.\u00a0<\/li><li>To borrow premade components or themes that can later be customized for the job.\u00a0<\/li><li>To adhere to a modern set of design principles that ensure that the user\u2019s experience always comes first.\u00a0<\/li><\/ul><p>Just keep in mind that the goal in Material Design is not to paint-by-numbers. That\u2019s what designers and developers did in the early days of Material Design and it backfired.\u00a0<\/p><p>Instead, use Material Design\u2019s example to create a more intuitive experience for your visitors \u2014 one where they can predict what each element on the page does and how it\u2019ll react when they engage with it. The less uncertainty there is, the more confidently they\u2019ll be able to convert.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Material Design is the standard for designing and creating websites and apps. It\u2019s been a response to old, user-unfriendly, and chaotic design styles and its aim is to bring order and unity to web design. Learn how to use it.<\/p>\n","protected":false},"author":188873,"featured_media":46484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-46482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What Is Material Design? Definition, Uses, and Examples | Elementor<\/title>\n<meta name=\"description\" content=\"Material Design is the standard for designing and creating websites and apps. Discover why and learn how to use it to make a user-friendly website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/what-is-material-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Is Material Design? Definition, Uses, and Examples | Elementor\" \/>\n<meta property=\"og:description\" content=\"Material Design is the standard for designing and creating websites and apps. Discover why and learn how to use it to make a user-friendly website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/what-is-material-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-02T11:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-29T00:31:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-03.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2501\" \/>\n\t<meta property=\"og:image:height\" content=\"1314\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sergei Davidov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergei Davidov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/\"},\"author\":{\"name\":\"Sergei Davidov\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9\"},\"headline\":\"What Is Material Design and How Should It Be Used?\",\"datePublished\":\"2021-02-02T11:01:15+00:00\",\"dateModified\":\"2025-12-29T00:31:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/\"},\"wordCount\":3410,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/what-is-material-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/\",\"name\":\"What Is Material Design? Definition, Uses, and Examples | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png\",\"datePublished\":\"2021-02-02T11:01:15+00:00\",\"dateModified\":\"2025-12-29T00:31:34+00:00\",\"description\":\"Material Design is the standard for designing and creating websites and apps. Discover why and learn how to use it to make a user-friendly website.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/what-is-material-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png\",\"width\":2501,\"height\":1314},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/what-is-material-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What Is Material Design and How Should It Be Used?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9\",\"name\":\"Sergei Davidov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g\",\"caption\":\"Sergei Davidov\"},\"description\":\"Sergei Davidov is a content creator at Elementor. His favorite topics are gadgets, advances in science, new apps and software solutions. He enjoys spicy food, reading books and listening to elevator music.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/sdavidov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What Is Material Design? Definition, Uses, and Examples | Elementor","description":"Material Design is the standard for designing and creating websites and apps. Discover why and learn how to use it to make a user-friendly website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/what-is-material-design\/","og_locale":"en_US","og_type":"article","og_title":"What Is Material Design? Definition, Uses, and Examples | Elementor","og_description":"Material Design is the standard for designing and creating websites and apps. Discover why and learn how to use it to make a user-friendly website.","og_url":"https:\/\/elementor.com\/blog\/what-is-material-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-02-02T11:01:15+00:00","article_modified_time":"2025-12-29T00:31:34+00:00","og_image":[{"width":2501,"height":1314,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-03.png","type":"image\/png"}],"author":"Sergei Davidov","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Sergei Davidov","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/"},"author":{"name":"Sergei Davidov","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9"},"headline":"What Is Material Design and How Should It Be Used?","datePublished":"2021-02-02T11:01:15+00:00","dateModified":"2025-12-29T00:31:34+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/"},"wordCount":3410,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/what-is-material-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/","url":"https:\/\/elementor.com\/blog\/what-is-material-design\/","name":"What Is Material Design? Definition, Uses, and Examples | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png","datePublished":"2021-02-02T11:01:15+00:00","dateModified":"2025-12-29T00:31:34+00:00","description":"Material Design is the standard for designing and creating websites and apps. Discover why and learn how to use it to make a user-friendly website.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/what-is-material-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/21.12.2020_MATERIAL-DESIGN_BLOG-01.png","width":2501,"height":1314},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/what-is-material-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"What Is Material Design and How Should It Be Used?"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9","name":"Sergei Davidov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g","caption":"Sergei Davidov"},"description":"Sergei Davidov is a content creator at Elementor. His favorite topics are gadgets, advances in science, new apps and software solutions. He enjoys spicy food, reading books and listening to elevator music.","url":"https:\/\/elementor.com\/blog\/author\/sdavidov\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/46482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/188873"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=46482"}],"version-history":[{"count":8,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/46482\/revisions"}],"predecessor-version":[{"id":149068,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/46482\/revisions\/149068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/46484"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=46482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=46482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=46482"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=46482"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=46482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}