@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning : Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":56930,"date":"2018-07-09T12:17:20","date_gmt":"2018-07-09T16:17:20","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=56930"},"modified":"2020-01-07T07:14:28","modified_gmt":"2020-01-07T12:14:28","slug":"material-design-examples","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/material-design-examples\/","title":{"rendered":"25 Material Design Examples You’ll Love"},"content":{"rendered":"Material Design is a visual language that synthesizes the base principles of good design and combines them with the innovation of modern science and technology.<\/p>\n
Here are some Material design examples we loved. Each one of these follows the Material design trends and principles and has something unique to teach you.<\/p>\n
If you’re a fan of the cleanliness of Material design user interfaces, then you’ll love this list. We gathered here concepts for both apps and websites, with different color palettes, structures and layouts. Enjoy!<\/p>\n
Want more? Check out these Material design resources<\/a>, Material design color tools<\/a> and free Material design backgrounds<\/a>.<\/p>\n
Here is a great looking online editor design created with the help of the Material design principles. It includes dialogs that inform users about specific tasks. <\/a><\/p>\n
Sens Critique<\/a><\/h2>\nThis is the redesign concept for Sens Critique, a French cultural app you can use to discover, rate and comment movies, series, music, books, and more. It contains grid lists – an alternative to standard list views, which\u00a0improve the visual understanding of the content they offer.<\/span><\/p>\n
<\/a><\/h2>\nMobile SDK \u2013 Ticketing, Chat, Articles on Android<\/a><\/h2>\nHere are some screens examples for the Zendesk Mobile SDK on Android. It contains a floating action button that represents the primary action in the app. it is\u00a0circle-shaped, with an icon in the middle, floating above the UI on the bottom right corner of the screen.\u00a0<\/span><\/p>\n
<\/a><\/h2>\nTrending – Daily UI challenge 069<\/a><\/h2>\nHere is the design of a stock images app that shows the trending image on top. It offers a unified experience across all platforms and devices and includes some essential mobile precepts.<\/p>\n
<\/a><\/h2>\nBlog post UI design<\/a><\/h2>\nThere’s a great use of typography in this material design concept for a blog post, however the size of the font should be slightly increased.<\/p>\n
<\/a><\/h2>\nMaterial Design Wallpaper<\/a><\/h2>\nAre you a fan of Material Design? Download this free wallpaper and use it for your phone or desktop screen.<\/p>\n
<\/a><\/h2>\nE-learning app UI concept<\/a><\/h2>\nThis is a small UI concept for an e-learning courses app that uses Material Design 2.0 principles. Check out the carefully crafted icons!\u00a0<\/span><\/p>\n
<\/a><\/h2>\nCalendar<\/a><\/h2>\nThis is a calendar screen design for an application used for managing all your important stuff. The app includes this built-in calendar that allows you to see all your events.<\/span><\/p>\n
<\/a><\/h2>\nSmartEnergy Ios App<\/h2>\n Here is the design for the SmartEnergy IOS App which offers you the easy way to\u00a0 connect to your home energy mainboard from your smartphone. <\/span><\/p>\n
<\/h2>\nGoogle play music redesign concept<\/a><\/h2>\nThis is a Google play music redesign concept that follows all the<\/span>\u00a0Material design 2.0 principles. Check it out in detail.<\/p>\n
<\/a><\/h2>\nFirstdate app<\/a><\/h2>\nThese are some Material design visuals for the Firstdate iOS app onboarding. It includes lovely illustrations and a clean and user-friendly flow.\u00a0<\/span><\/p>\n
<\/a><\/h2>\nApplication Design<\/a><\/h2>\nColor in Material Design is inspired by bold colors placed on neutral environments. It also contains deep shadows and bright highlights, which are two other characteristics of the design below.<\/p>\n
<\/a><\/h2>\nField Inspector app<\/a><\/h2>\nHere is a Field Inspector mobile app concept used<\/span>\u00a0for monitoring and auditing objects. These are the screens that show the main menu, objects on the map and list of parameters that need to be checked.\u00a0<\/span><\/p>\n
<\/a><\/h2>\nLogin\/Register Animation<\/a><\/h2>\nThis color palette is made of primary and accent colors that have been designed to work harmoniously together. This design concept also has a smooth animation worth checking out.<\/p>\n
<\/a><\/h2>\nHotel Booking – Daily UI challenge 067<\/a><\/h2>\nMaterial design takes its inspiration from print-based design elements \u2013 such as typography, color, and imagery \u2013 and adapts it to the web to create hierarchy\u00a0and focus. This is exactly what the design below does, with its baseline grids and structural templates. It offers a consistent solution by repeating visual elements and structural grids.<\/p>\n
<\/a><\/h2>\nNatgeo Website Layout<\/a><\/h2>\nIn Material design, paper’s physical properties, such as flatness and opaqueness, are translated to the screen. Here’s an example of this principle below.<\/p>\n
<\/a><\/h2>\nGrandPad Android App – Redesign<\/a><\/h2>\nThis is the redesign of\u00a0GrandPad’s Android companion app. This iOS app redesign takes advantage of the flexibility of Material Design and the new Extended FAB material component.\u00a0<\/span><\/p>\n
<\/a><\/h2>\nService: Graphic<\/a><\/h2>\nMaterial design creates a visual language for the users that synthesizes the base principles of good design and modernizes them. Here is an example of an icon graphic that does just that.<\/p>\n
<\/a><\/h2>\nWallet Design<\/a><\/h2>\nIn Material design used on apps, menus usually appear upon the interaction with a button and then display a list of options. Here is a great example of that!<\/p>\n
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Material Design is a visual language that synthesizes the base principles of good design and combines them with the innovation of modern science and technology. Here are some … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":56933,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[46],"tags":[],"aioseo_notices":[],"yoast_head":"\n25 Material Design Examples You'll Love<\/title>\n<meta name=\"description\" content=\"Here are some Material design examples we loved. Each one of these follows the Material design trends and principles and has something unique to teach you.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/material-design-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"25 Material Design Examples You'll Love\" \/>\n<meta property=\"og:description\" content=\"Here are some Material design examples we loved. Each one of these follows the Material design trends and principles and has something unique to teach you.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/material-design-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-09T16:17:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-07T12:14:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"25 Material Design Examples You’ll Love\",\"datePublished\":\"2018-07-09T16:17:20+00:00\",\"dateModified\":\"2020-01-07T12:14:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/\"},\"wordCount\":997,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg\",\"articleSection\":[\"Design Inspiration\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/material-design-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/\",\"url\":\"https:\/\/webdesigndev.com\/material-design-examples\/\",\"name\":\"25 Material Design Examples You'll Love\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg\",\"datePublished\":\"2018-07-09T16:17:20+00:00\",\"dateModified\":\"2020-01-07T12:14:28+00:00\",\"description\":\"Here are some Material design examples we loved. Each one of these follows the Material design trends and principles and has something unique to teach you.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/material-design-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg\",\"width\":1100,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Inspiration\",\"item\":\"https:\/\/webdesigndev.com\/inspiration\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"25 Material Design Examples You’ll Love\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"25 Material Design Examples You'll Love","description":"Here are some Material design examples we loved. Each one of these follows the Material design trends and principles and has something unique to teach you.","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:\/\/webdesigndev.com\/material-design-examples\/","og_locale":"en_US","og_type":"article","og_title":"25 Material Design Examples You'll Love","og_description":"Here are some Material design examples we loved. Each one of these follows the Material design trends and principles and has something unique to teach you.","og_url":"https:\/\/webdesigndev.com\/material-design-examples\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2018-07-09T16:17:20+00:00","article_modified_time":"2020-01-07T12:14:28+00:00","og_image":[{"width":1100,"height":300,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg","type":"image\/jpeg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/material-design-examples\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/material-design-examples\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"25 Material Design Examples You’ll Love","datePublished":"2018-07-09T16:17:20+00:00","dateModified":"2020-01-07T12:14:28+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/material-design-examples\/"},"wordCount":997,"commentCount":1,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg","articleSection":["Design Inspiration"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/material-design-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/material-design-examples\/","url":"https:\/\/webdesigndev.com\/material-design-examples\/","name":"25 Material Design Examples You'll Love","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg","datePublished":"2018-07-09T16:17:20+00:00","dateModified":"2020-01-07T12:14:28+00:00","description":"Here are some Material design examples we loved. Each one of these follows the Material design trends and principles and has something unique to teach you.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/material-design-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/material-design-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/material-design-examples\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/07\/featured-2.jpg","width":1100,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/material-design-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Design Inspiration","item":"https:\/\/webdesigndev.com\/inspiration\/"},{"@type":"ListItem","position":3,"name":"25 Material Design Examples You’ll Love"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/56930"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=56930"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/56930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/56933"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=56930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=56930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=56930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}