Material design is a design system where you can create a coherent app for different devices with the same design. Material design is introduced by google on august 2014 and is getting popular. Many android applications already started using materials design principles. Material design is a matter of simplicity and reality. It uses surfaces, shadows, transitions etc… All the terms in material design are familiar to you as well so it is easy to understand.
People are already started using material design we have seen many UI design kits based on material design. Some of the designs we found were excellent and worth inspecting. So we decided to collect material design resorts for our readers.
Resources Provided by Google
See also : Material Design Principles
In this post, you can see a lot of free design things based on material design system like UI kits, icons, transitions etc…. You can find both design and development Material Design Resources in this post.
Material Design UI Kits
DO UI Kit for Photoshop & Sketch
Material UI Kit: Cooking
Free Mail App Ui Kit (Sketch)
Material Design UI Kit
Material Design Dark UI Kit
BankTag – Free Material UI Kit
Material Design Widgets Ui Kit PSD
DiscoMusica – Free Web UI Kit
Reader UI kit (Android)
Android Lollipop GUI Kit V-5.1.1 (Vol-2)
Sketch freebie for material theme paper
Material Design Wireframe Kit
Material Design UI Kit
Crystallize Free Material Ui Kit
UI Kit Movie App Material Design
Material Design mobile UI kit
Android L Mobile & Tablet UI Template
Android Material Design UI Kit For Real Estate App
Free Summeric Material Ui Kit
A free UI kit with a bright and clean aesthetic
Material Design UI Kit
Free Material Design Ui Kit
Android Material Design UI Kit
Free Material UI Kit
Material Design UI Kit
Free UI Kit Ramotion PSD
Material UI Kit: Cooking
Android L GUI Kit
Facebook Material Design GUI Kit PSD
Free Material UI Kit PSD
FREE Quadruple Ferial UI PSD
Android L Tablet UI Template (.sketch)
Mobile & UI: Android L 5.0 UI Kit PSD
Android Lollipop UI Design Kit for Free
Material Design Inspired Bootstrap UI Kit
Android L Mobile UI Template (.sketch)
DiscoMusica – Free Sketch UI Kit
Zalando Material Design UI – Sketch Freebie
Dribbble App Material Design
Lollipop Gui Kit
Android Lollipop 5.0 GUI Free Download
Android Material Design UI Kit Sketch
MaterialUI
MaterialUI is a UI kit for Unity that follows Google’s official material design guidelines. It is heavily in development and may change drastically in the near future.
Material Design Mobile App UI Templates
E-shop UI
Calendar App
Mobile Material Screens
Karaoke App Concept Design
Poleads Chat 2x
Redesign Concept Nepali Patro
Nest Material Design [Sketch File]
![Nest Material Design [Sketch File]](http://www.cssauthor.com/wp-content/uploads/2015/10/Nest-Material-Design.jpg)
virtuDOC
Android L Contact Page (Sketch)
Sleepbot Android [Sketch File]
![Sleepbot Android [Sketch File]](http://www.cssauthor.com/wp-content/uploads/2015/10/Sleepbot-Android.jpg)
Movies material design
Feed
Movie Detail View: Material Design Freebie
Single Screen Movie App
Material Design Music Feed
Material Design Music Player
Dribbble Client Concept App
Material Design – Settings with Tabs PSD
Instagram Material Design PSD
Android L PSD kit – Browse Screen
Material Design – Contact List with Search PSD
Minimal Battery Monitoring App PSD
Twitter Profile using Material Design PSD
Dropbox App Material Concept PSD
Free Google Inbox PSD
Android Material Design Free PSD
Walkthrough Design for Android L
E-Commerce APP for Material Design PSD
Android L PSD Kit
New Android L Interface
Android L PSD kit
Android L keyboard
Skype – Material UI Concept PSD
Material Design Icon Templates
New Google icons
Material Design Icon Templates
Free Set of Material Design Hand Gestures
New Set of Free Material design avatars
Free Set of Server – Hosting Material Design Icons
Free New Set of Material Design Stationary Icons
Set of Free Isometric Material Icons vol 3
Set of Free Isometric Material Icons vol 2
Free set of isometric material icons
Dog-ear material icon template
Facebook Liked page manager
Material web icons
Flat Serivces Icons
Google Maps & Streetview icon (AE File)
Calculator icon (Ai)
Free Gmail App Icon (Ai)
Angular Material Icons (eps)
Mac 128k – Sketch Freebie
Material Design Icon Template
Android Lollipop Icons
Google Inbox For OS X
Google Maps Sketch Icon
Material Design Flat Avatar Set
Material Product Icon Template
Google Inc Icons
Material Design Powerpoint & Keynote icons
Material Design Iconic Font
The complete set of 744 icons in Material Design Iconic Font.
Material Design Icons with Bounds .sketch resource
Material Design Icons
Material Design +420 free icons (SVG, EPS, PSD, PNG files)
431 Material Design Icons in Photoshop Custom Shape format (.CSH)
Material Design Icons and Webfonts
Google Material Design Icons
Material Design Icons are the official open-source icons featured in the Google Material Design specification.
Google Design Icon Template
Android L – Icon Grid System
Material Design Icon Templates
System Icons – Material Design
Material Icons Pack [SVG, Sketch]
Android Grid Psd (Template for Android L icon)
2600 icons for Android L and KitKat
Google JFK Icons – ICO and PNG
Material Color Icon Set
Material Design Icon Template (.AI)
1000 Material Design Icons
Free Material Icon Set
Material Design Powerpoint & Keynote icons
Google Material Design – Free Icon Set
Android Lollipop Icon Set
Material icons for PC 1.01
Material Design Icon Set PSD
Material App Icon Keylines & Grid PSD
Google Material Design Icons Font for iOS
Material Design [Free .Sketch Template & Icons]
![Material Design [Free .Sketch Template & Icons]](http://www.cssauthor.com/wp-content/uploads/2015/04/Material-Design-Free-.Sketch-Template-Icons.jpg){kind=icon}
Material Design Mockup Templates
Presentation Mockup Package
Sign Up
Nexus 6P (.AI Freebie)
Nexus 5X (.AI Freebie)
Perspective Screens Mockup
Online Store material design (Sketch)
Recipes Material Design Free App Mockup
Android L / iPhone 6+ Perspective App Mockup for Free
Free Nexus 9 PSD
Material Design Website Templates
Bino Landing Page PSD Template
Landing Page Bundle
Capital Float: Material Design Concept
Material Design Sketch Template v2
Be Material – One Page Material Design Psd Template
Be Material, is a clean and modern PSD Template inspired by Google Material Design which is perfect for any creative agencies, freelancers, corporates and the ones who need to showcase their work.
Sports News Website Material Design Free Psd
Barter.li – Android L Web and Mobile Interface
Material Design Resume Templates
Material Design Resume
Free Resume Template – Material Design
Material Design Resume Style sketch
Material Design Admin Templates
Google Material Design Admin Theme
Samdash smart admin dashboard
Material Login, Dashboard Pages
Material Design Themes
1. Material Design HTML Themes
Pluto – Material Design Free Bootstrap Template
One Column Listing Template
Two Column Listing Template
Three Column Listing Template
Corporate Style Template
Half Carousel Template
Jumbotron with Features Template
Blog Post Template
Ecommerce Homepage Template
Team Presentation Template
Full Background Carousel Template
Full Page Video Carousel
MaterialStrap – One Page Resume theme
MaterialStrap – One Page Resume theme to personal and professional use. User can show their resume (education, work experience, skill set etc.) It is fully responsive and looks great with all types of screens and devices. The theme is very clean and fast, easy to customize and use. This theme is built with latest Bootstrap framework and Material design colors and icons.
Materialize Responsive Resume
Materialize – Responsive CV. It is fully responsive and looks awesome on all types of screens and devices. This theme is design with latest materialize front-end framework. The theme is very clean and fast, easy to customize and use.
MD One page HTML Template
MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Framework based on Material Design.
AppSite
Material Design Website Template for an app’s landing page, built with Project Polymer.
Material
An HTML5 responsive template incorporating Google’s Material Design Standards along with Jekyll.
Starter Template
Parallax Template
2. Material Design WordPress Themes
MaterialWP
This is a starter Material Design WordPress Theme based off the Bootstrap framework.
Materialist
Materialist is WordPress theme which is (obviously) inspired by Material Design.
MaterialPress
MaterialPress is a WordPress theme, influenced heavily by Google’s Material Design philosophy. Several front end styles have been adapted from the Materialize front-end framework.
Portage Bay WordPress theme
A responsive theme for WordPress influenced by Material Design.
Jade for WordPress
A WordPress theme based on a small hint of material design.
3. Material Design Bootstrap Themes
Google Material Design for Bootstrap
This Bootstrap theme is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application.
materialBootstrap
Twitter Bootstrap theme for Google material design. Material Bootstrap is created to use the Material Design for your website. Material Bootstrap support Safari, Chrome, Firefox and IE9+.
4. Material Design Bootstrap UI Kits
Material Kit
Material Kit is a Free Bootstrap UI Kit with a fresh, new design inspired by Google’s material design.
5. Material Design Ghost Themes
Jade
A Ghost theme which is based on Material Design principles.
Materialized Ghost
Ghost A Ghost Theme based on Materialize Framework Materialize Css Framework.
6. Material Design Blogger Themes
The Linck – Free Material Design Blogger template
The Linck is a great Blogger theme based on Google’s Material Design. It supports dynamic views, has several color options and all forms are designed in accordance to material design specifications. Official AngularJS blog is powered by pretty much the same Blogger theme.
Material Design Wallpapers
Material Design Wallpaper
Android L Wallpaper
Download the New Chrome OS ‘Material Design’ Default Wallpaper
Material Design Wallpaper [Free .Sketch Template]
![Material Design Wallpaper [Free .Sketch Template]](http://www.cssauthor.com/wp-content/uploads/2015/04/Material-Design-Wallpaper.jpg)
Ultimate Material Lollipop Wallpaper Collection
Material Design Backgrounds
Material banners
New free set of 30 material design backgrounds
Free new set of material design backgrounds
Free set of material design backgrounds
Free set of material design backgrounds
Free Material Design Promotional Backgrounds
10 Material Design Backgrounds
Material Design Widgets
Order Tracking Widget
Twitter Profile
CrowdPlayer Sketch Freebie
Calendar widget Freebie
YouTube Video Player UI – Material Design
tv app psd set
Music player PSD
Android Material Design Movie Template
Material Card
Material portfolio widget
Material Calendar UI PSD
Android L Toolbox PSD
Android Lollipop Date & Time Pickers PSD
Material Design Audio Player PSD
Android Material Design Keyboard for Nexus4
Android Lollipop Switches PSD
Material Design Grid Templates
Nexus 5 Grid PSD
Android Material Design Basic Elements Layout
Material Product Icon Grid
Material Design Other Templates
Google Material Shadows Sketch File
Material Design Calendar Illustrations
Material Calendar PSD
Ultimate Material Design Free Bundle
Google inbox logo (Free Sketch File)
Free New Set of Material Design Patterns
Material Design Image Font
Design In Sketch Then Animate In Keynote
Station Interactive
Android Material Design Number Pad
Dribbble Login Animation (HTML/Polymer)
Google with Material Design free PSD
Material Design Psd Alphabet
Material Design Psd Numbers
Material Design Applications / Frameworks
Materialize
A modern responsive front-end framework based on Material Design.
Material Framework
Material Framework is a simple responsive CSS framework made by Tim Nguyen that allows you to integrate Material Design in any web page or web app.
Paperkit Framework
Paperkit is an opensource Material Design web framework that works on HTML, CSS and JavaScript Vanilla.
Material UI
A CSS Framework and a Set of React Components that Implement Google’s Material Design.
Papyros
Papyros is a modern operating system which adheres to Google’s Material Design guidelines and is based on Arch Linux.
Leaf
A CSS framework based on Google’s material design.
OpenLocalization
OpenLocalization is a localization management web-app to help you translate any of your projects. Its goal is to provide a simple and flexible tool to easily edit and deploy your application translations.
MaterialDrawer
A simple take on creating an easy to use and fast material navigation drawer implementation.
LumX
The first responsive front-end framework based on AngularJS & Google Material Design specifications.
MUI
MUI is a lightweight HTML, CSS and JS framework for sites that follow Google’s Material Design guidelines.
Polymer
Polymer brings an implementation of material design to the web. The paper elements range from controls to effects and user interaction.
Angular Material
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.
Ionic Material
Ionic material is currently an experimental extension library for the Ionic Framework, meaning you won’t change the way you develop your Ionic hybrid apps to have them materialized. Ionic Material aims to integrate the best representations of Material Design into a single add-on library for Ionic Developers.
Paper
Paper is a bootswatch theme for the Bootstrap framework.
Material.CSS
CSS Framework for building Google’s Material UI. Includes: Cards, Floating Buttons, Left Nav, Right Nav, App Bar, Bottom ToolBar.
MaterialList
MaterialList is an Android library created to help all Android developers get the beautiful CardViews that Google shows at its official design specifications.
Material
HTML5 UI design based on Google Material.
Material Design CSS Snippets (Demos / Examples)
1. Material Design Button
MAWButton.js
A ripple button inspired by Google material design.
Material design buttons
Material design buttons (CSS-only)
Material design buttons with a ripple effect. This is CSS-only so there is no mouse detection, the ripple effect always starts from the same point.
Material Design Button
Bootstrap Material Design Buttons
Google Material Design Button
Simple Material design button
Google Button Ripple
A couple of buttons to demonstrate Google’s Material Design button ripple effect when being clicked.
PURE CSS MATERIAL DESIGN BUTTON
Material Design Buttons
Material Design Hamburger
2. Material Design Cards
Material Design Cards
Material Design Cards
Material design card effect
Material Design Card For Blog Post Article
A card style blog post build with HTML5 , CSS3 and a little bit of jQuery.
Material Design Cards
MATERIAL DESIGN CARD ANIMATION
Google Material Design Cards
Material card opening effect
3. Material Design Menus
Configurable animated Material Design Menu Button
Quickly created a configurable Material Design menu button via SCSS.
Material Design Menu
Material Design Menu Toggle
Material Design Menu
Material Design Menu Dropdown
Google Material Design Icon Menu Dropdown with Point of Origin as mentioned in the Google Design Spec Guidelines ussing CSS3 and a bit of jQuery.
Material Design Navigation Menu
Material design menu with css transitions.
4. Material Design Icons
SVG Morpheus
JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions.
Material design morphing icons
Material design morphing icons
5. Other
Waves
Click effect inspired by Google’s Material Design.
Paper Collapse
Simple CSS3 paper cards accordion. Inspired by Google Material Design.
Mprogress.js
Mprogress.js creates progress linear bar from Google Material Design. By using CSS3 and pure js which don’t depend on any other libraries.
Polymer Material Design Playground
CSS Animation Material Design
Material Design Preloader
Material Design Hamburger
Android’s Material Design hamburger animation built in CSS.
Material Design Responsive Table
Material Design Responsive Table CSS-style will override basic bootstrap style.
Material Design Sidebar (Profile menu)
Google Material Design Input Boxes
A CSS experiment to recreate the Google Material Design Polymer input boxes in CSS.
Material Design App – Animated Tabs
Material Design Input Text
Material Design Example
Here are some colours and transitions, and their fancy click animation.
Material Design Articles
Exploring Google’s Material Design with Polymer
9 principles Google created for its colorful ‘Material Design’ UI refresh
Make Material Design Websites with the Materialize CSS Framework
Top designers react to Google’s new ‘Material’ design language
What Material Design Means For the Future of Android
What You Can Learn From Google’s Material Design
User Interface Designs Inspiration of Material Design
Linkedin Material Design
Behance App Material Design
Twitter Material Design
Instagram Material Design
Google Drive Material Design Concept
Whatsapp Material Design
Soundcloud Material Design
Dribbble App Material Design
Google Workspace – Rethinking Gmail
Telegram Material design for Android
Material Design Color Palette
Material Design Color Tool
Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.
Material Color Palette for Sketch
Material Palette
Material Design Color Palette Generator.
Material Design Colors
Material Colors
Material Design Colors
Material Design Color Palette
Material Design Color Palette is a LESS/CSS toolkit for easily usage material colors by Google in websites.
Material Design Color Palette Sketch Plugin
Sketch app plugin for displaying Google Material Design color palette.
Material Design Palette
The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. The primary colors are the 500 range.
Material Design Other Resources
1. Adobe After Effet File (AE File)
Google Fit Animation AE Project
After Effects – Player freebie
Google Material Design | Free AE Project File
Google Material Design – Free AE Project File
Open And Close | Free AE File
2. Keynote Animation
Keynote Animation Material Design
Material Design: Keynote Animation
Keynote Animation Recreation
- 316shares
- Share on Facebook
- Share on Twitter
- Buffer
You’re awesome. Thanks for taking the time to put this all together!