300+ Material Design Resources For Designers And Developers

Material Design

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

DO UI Kit for Photoshop & Sketch

Download

Material UI Kit: Cooking

Material UI Kit: Cooking

Download

Free Mail App Ui Kit (Sketch)

Free Mail App Ui Kit (Sketch)

Download

Material Design UI Kit

Material Design UI Kit

Download

Material Design Dark UI Kit

Material Design Dark UI Kit

Download

BankTag – Free Material UI Kit

BankTag – Free Material UI Kit

Download

Material Design Widgets Ui Kit PSD

Material Design Widgets Ui Kit PSD

Download

DiscoMusica – Free Web UI Kit

DiscoMusica - Free Web UI Kit

Download

Reader UI kit (Android)

Reader UI kit

Download

Sketch freebie for material theme paper

Sketch freebie for material theme paper

Download

Material Design Wireframe Kit

Material Design Wireframe Kit

Download

Material Design UI Kit

Material Design UI Kit

Download

Crystallize Free Material Ui Kit

Crystallize Free Material Ui Kit

Download

UI Kit Movie App Material Design

UI Kit Movie App Material Design

Download

Material Design mobile UI kit

Material Design mobile UI kit

Download

Android L Mobile & Tablet UI Template

Android L Mobile & Tablet UI Template

Download

Android Material Design UI Kit For Real Estate App

Android Material Design UI Kit For Real Estate App

Download

Free Summeric Material Ui Kit

Free Summeric Material Ui Kit

Download

A free UI kit with a bright and clean aesthetic

A free UI kit with a bright and clean aesthetic

Download

Material Design UI Kit

Material Design UI Kit

Download

Free Material Design Ui Kit

Free Material Design Ui Kit

Download

Android Material Design UI Kit

Android Material Design UI Kit

Download

Free Material UI Kit

Free Material UI Kit

Download

Material Design UI Kit

Material Design UI Kit

Download

Free UI Kit Ramotion PSD

Free UI Kit Ramotion PSD

Download

Material UI Kit: Cooking

Material UI Kit: Cooking

Download

Android L GUI Kit

Android L GUI Kit

Download

Facebook Material Design GUI Kit PSD

Facebook Material Design GUI Kit PSD

Download

Free Material UI Kit PSD

Free Material UI Kit PSD

Download

FREE Quadruple Ferial UI PSD

FREE Quadruple Ferial UI PSD

Download

Mobile & UI: Android L 5.0 UI Kit PSD

Android L 5.0 UI Kit PSD

Download

Android Lollipop UI Design Kit for Free

Android Lollipop UI Design Kit for Free

Download

Material Design Inspired Bootstrap UI Kit

Material Design Inspired Bootstrap UI Kit

Download

Android L Mobile UI Template (.sketch)

Android L Mobile UI Template (.sketch)

Download

DiscoMusica – Free Sketch UI Kit

DiscoMusica - Free Sketch UI Kit

Download

Zalando Material Design UI – Sketch Freebie

Zalando Material Design UI - Sketch Freebie

Download

Dribbble App Material Design

Dribbble App Material Design

Download

Lollipop Gui Kit

Lollipop Gui Kit

Download

Android Material Design UI Kit Sketch

Android Material Design UI Kit Sketch

Download

MaterialUI

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.

Download

Material Design Mobile App UI Templates

E-shop UI

E-shop UI

Download

Calendar App

Calendar App

Download

Mobile Material Screens

Mobile Material Screens

Download

Karaoke App Concept Design

Karaoke App Concept Design

Download

Poleads Chat 2x

Poleads Chat 2x

Download

Redesign Concept Nepali Patro

Redesign Concept Nepali Patro

Download

Nest Material Design [Sketch File]

Nest Material Design

Download

Android L Contact Page (Sketch)

Android L Contact Page (Sketch)

Download

Sleepbot Android [Sketch File]

Sleepbot Android

Download

Movies material design

Movies material design

Download

Social Feed

Social Feed

Download

Movie Detail View: Material Design Freebie

Movie Detail View

Download

Single Screen Movie App

Single Screen Movie App

Download

Material Design Music Feed

Material Design Music Feed

Download

Material Design Music Player

Material Design Music Player

Download

Dribbble Client Concept App

Dribbble Client Concept App

Download

Material Design – Settings with Tabs PSD

Material Design - Settings with Tabs PSD

Download

Instagram Material Design PSD

Instagram Material Design PSD

Download

Android L PSD kit – Browse Screen

Android L PSD kit

Download

Material Design – Contact List with Search PSD

Material Design - Contact List with Search PSD

Download

Twitter Profile using Material Design PSD

Twitter Profile using Material Design PSD

Download

Dropbox App Material Concept PSD

Dropbox App Material Concept PSD

Download

Free Google Inbox PSD

Free Google Inbox PSD

Download

Android Material Design Free PSD

Android Material Design Free PSD

Download

Walkthrough Design for Android L

Walkthrough Design for Android L

Download

E-Commerce APP for Material Design PSD

E-Commerce APP for Material Design PSD

Download

Android L PSD Kit

Android L PSD Kit

Download

New Android L Interface

New Android L Interface

Download

Android L PSD kit

Android L PSD kit

Download

Android L keyboard

Android L keyboard

Download

Skype – Material UI Concept PSD

Skype Material UI Concept PSD

Download

Material Design Icon Templates

New Google icons

New Google icons

Download

Material Design Icon Templates

Material Design Icon Templates

Download

Free Set of Material Design Hand Gestures

Free Set of Material Design Hand Gestures

Download

New Set of Free Material design avatars

New Set of Free Material design avatars

Download

Free Set of Server – Hosting Material Design Icons

Free Set of Server – Hosting Material Design Icons

Download

Free New Set of Material Design Stationary Icons

Free New Set of Material Design Stationary Icons

Download

Set of Free Isometric Material Icons vol 3

Set of Free Isometric Material Icons vol 3

Download

Set of Free Isometric Material Icons vol 2

Set of Free Isometric Material Icons vol 2

Download

Free set of isometric material icons

Free set of isometric material icons

Download

Material web icons

Material web icons

Download

Flat Serivces Icons

Flat Serivces Icons

Download

Google Maps & Streetview icon (AE File)

Google Maps & Streetview icon

Download

Calculator icon (Ai)

Calculator icon

Download

Free Gmail App Icon (Ai)

Free Gmail App Icon (Ai)

Download

Angular Material Icons (eps)

Angular Material Icons (eps)

Download

Mac 128k – Sketch Freebie

Mac 128k – Sketch Freebie

Download

Material Design Icon Template

Material Design Icon Template

Download

Android Lollipop Icons

Android Lollipop Icons

Download

Google Inbox For OS X

Google Inbox For OS X

Download

Google Maps Sketch Icon

Google Maps Sketch Icon

Download

Material Design Flat Avatar Set

Material Design Flat Avatar Set

Download

Material Product Icon Template

Material Product Icon Template

Download

Material Design Powerpoint & Keynote icons

Material Design Powerpoint & Keynote icons

Download

Material Design Iconic Font

Material Design Iconic Font

The complete set of 744 icons in Material Design Iconic Font.

Download

Material Design Icons with Bounds .sketch resource

Material Design Icons with Bounds

Download

Material Design Icons

Material Design Icons

Download

Material Design +420 free icons (SVG, EPS, PSD, PNG files)

Material Design +420 free icons

Download

431 Material Design Icons in Photoshop Custom Shape format (.CSH)

431 Material Design Icons in Photoshop Custom Shape format

Download

Material Design Icons and Webfonts

Material Design Icons and Webfonts

Download

Google Material Design Icons

Google Material Design Icons

Material Design Icons are the official open-source icons featured in the Google Material Design specification.

Download

Google Design Icon Template

Google Design Icon Template

Download

Android L – Icon Grid System

Android L - Icon Grid System

Download

Material Design Icon Templates

Material Design Icon Templates

Download

System Icons – Material Design

System Icons - Material Design

Download

Material Icons Pack [SVG, Sketch]

Material Icons Pack

Download

Android Grid Psd (Template for Android L icon)

Android Grid Psd (Template for Android L icon)

Download

2600 icons for Android L and KitKat

2600 icons for Android L and KitKat

Download

Google JFK Icons – ICO and PNG

Google JFK Icons - ICO and PNG

Download

Material Color Icon Set

Material Color Icon Set

Download

Material Design Icon Template (.AI)

Material Design Icon Template (.AI)

Download

1000 Material Design Icons

1000 Material Design Icons

Download

Free Material Icon Set

Free Material Icon Set

Download

Google Material Design – Free Icon Set

Google Material Design – Free Icon Set

Download

Android Lollipop Icon Set

Android Lollipop Icon Set

Download

Material icons for PC 1.01

Material icons for PC 1.01

Download

Material Design Icon Set PSD

Material Design Icon Set PSD

Download

Material App Icon Keylines & Grid PSD

Material App Icon Keylines & Grid PSD

Download

Google Material Design Icons Font for iOS

Google Material Design Icons Font for iOS

Download

Material Design [Free .Sketch Template & Icons]

Material Design [Free .Sketch Template & Icons]

Download

Material Design Mockup Templates

Sign Up

Sign Up

Download

Nexus 6P (.AI Freebie)

Nexus 6P

Download

Nexus 5X (.AI Freebie)

Nexus 5X

Download

Perspective Screens Mockup

Perspective Screens Mockup

Download

Online Store material design (Sketch)

Online Store material design

Download

Recipes Material Design Free App Mockup

Recipes Material Design Free App Mockup

Download

Android L / iPhone 6+ Perspective App Mockup for Free

Android L / iPhone 6+ Perspective App Mockup for Free

Download

Free Nexus 9 PSD

Free Nexus 9 PSD

Download

Material Design Website Templates

Bino Landing Page PSD Template

Bino Landing Page PSD Template

Download

Landing Page Bundle

Landing Page Bundle

Download

Capital Float: Material Design Concept

Capital Float: Material Design Concept

Download

Material Design Sketch Template v2

Material Design Sketch Template v2

Download

Be Material – One Page Material Design Psd Template

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.

Download

Sports News Website Material Design Free Psd

Sports News Website Material Design Free Psd

Download

Barter.li – Android L Web and Mobile Interface

Barter.li - Android L Web and Mobile Interface

Download

Material Design Resume Templates

Material Design Resume

Material Design Resume

Download

Free Resume Template – Material Design

Free Resume Template - Material Design

Download

Material Design Resume Style sketch

Material Design Resume Style sketch

Download

Material Design Themes

1. Material Design HTML Themes

Pluto – Material Design Free Bootstrap Template

Pluto

Download

MD One page HTML Template

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.

Live Demo Download

AppSite

AppSite

Material Design Website Template for an app’s landing page, built with Project Polymer.

Download

Material

Material

An HTML5 responsive template incorporating Google’s Material Design Standards along with Jekyll.

Live Demo Download

Starter Template

Starter Template

Live Demo Download

Parallax Template

Parallax Template

Live Demo Download

2. Material Design Bootstrap Themes

Google Material Design for Bootstrap

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.

Live Demo Download

materialBootstrap

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+.

Source

3. Material Design Bootstrap UI Kits

Material Kit

Material Kit

Material Kit is a Free Bootstrap UI Kit with a fresh, new design inspired by Google’s material design.

Live Demo Download

4. Material Design Ghost Themes

Jade

Jade

A Ghost theme which is based on Material Design principles.

Download

Materialized Ghost

Materialized Ghost

Ghost A Ghost Theme based on Materialize Framework Materialize Css Framework.

Download

5. Material Design Blogger Themes

The Linck – Free Material Design Blogger template

The Linck

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.

Live Demo Download

Material Design Wallpapers

Material Design Wallpaper

Material Design Wallpaper

Download

Android L Wallpaper

Android L Wallpaper

Download

Download the New Chrome OS ‘Material Design’ Default Wallpaper

Download the New Chrome OS ‘Material Design’ Default Wallpaper

Download

Material Design Wallpaper [Free .Sketch Template]

Material Design Wallpaper [Free .Sketch Template]

Download

Ultimate Material Lollipop Wallpaper Collection

Ultimate Material Lollipop Wallpaper Collection

Download

Material Design Backgrounds

Material banners

Material banners

Download

New free set of 30 material design backgrounds

New free set of 30 material design backgrounds

Download

Free new set of material design backgrounds

Free new set of material design backgrounds

Download

Free set of material design backgrounds

Free set of material design backgrounds

Download

Free Material Design Promotional Backgrounds

Free Material Design Promotional Backgrounds

Download

10 Material Design Backgrounds

10 Material Design Backgrounds

Download

Material Design Widgets

Order Tracking Widget

Order Tracking Widget

Download

Twitter Profile

Twitter Profile

Download

CrowdPlayer Sketch Freebie

CrowdPlayer Sketch Freebie

Download

Calendar widget Freebie

Calendar widget Freebie

Download

YouTube Video Player UI – Material Design

YouTube Video Player UI – Material Design

Download

tv app psd set

tv app psd set

Download

Music player PSD

Music player PSD

Download

Material Card

Material Card

Download

Material portfolio widget

Material portfolio widget

Download

Material Calendar UI PSD

Material Calendar UI PSD

Download

Android L Toolbox PSD

Android L Toolbox PSD

Download

Material Design Audio Player PSD

Material Design Audio Player PSD

Download

Android Material Design Keyboard for Nexus4

Android Material Design Keyboard for Nexus4

Download

Android Lollipop Switches PSD

Android Lollipop Switches PSD

Download

Material Design Grid Templates

Nexus 5 Grid PSD

Nexus 5 Grid PSD

Download

Android Material Design Basic Elements Layout

Android Material Design Basic Elements Layout

Download

Material Product Icon Grid

Material Product Icon Grid

Download

Material Design Other Templates

Google Material Shadows Sketch File

Google Material Shadows Sketch File

Download

Material Design Calendar Illustrations

Material Design Calendar Illustrations

Download

Material Calendar PSD

Material Calendar PSD

Download

Ultimate Material Design Free Bundle

Ultimate Material Design Free Bundle

Download

Google inbox logo (Free Sketch File)

Google inbox logo (Free Sketch File)

Download

Free New Set of Material Design Patterns

Free New Set of Material Design Patterns

Download

Material Design Image Font

Material Design Image Font

Download

Design In Sketch Then Animate In Keynote

Design In Sketch Then Animate In Keynote

Download

Station Interactive

Station Interactive

Download

Android Material Design Number Pad

Android Material Design Number Pad

Download

Dribbble Login Animation (HTML/Polymer)

Dribbble Login Animation

Download

Google with Material Design free PSD

Google with Material Design free PSD

Download

Material Design Psd Alphabet

Material Design Psd Alphabet

Download

Material Design Psd Numbers

Material Design Psd Numbers

Download

Material Design CSS Snippets (Demos / Examples)

1. Material Design Button

MAWButton.js

MAWButton.js

A ripple button inspired by Google material design.

Demo / Examples Source

Material design buttons

Material design buttons

Demo / Examples Source

Material design buttons (CSS-only)

Material design buttons

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.

Demo / Examples Source

Material Design Button

Material Design Button

Demo / Examples Source

Bootstrap Material Design Buttons

Bootstrap Material Design Buttons

Demo / Examples Source

Google Material Design Button

Google Material Design Button

Demo / Examples Source

Simple Material design button

Simple Material design button

Demo / Examples Source

Google Button Ripple

Google Button Ripple

A couple of buttons to demonstrate Google’s Material Design button ripple effect when being clicked.

Demo / Examples Source

PURE CSS MATERIAL DESIGN BUTTON

PURE CSS MATERIAL DESIGN BUTTON

Demo / Examples Source

Material Design Buttons

Material Design Buttons

Demo / Examples Source

Material Design Hamburger

Material Design Hamburger

Demo / Examples Source

Material design card effect

Material design card effect

Demo / Examples Source

Material Design Card For Blog Post Article

Material Design Card For Blog Post Article

A card style blog post build with HTML5 , CSS3 and a little bit of jQuery.

Demo / Examples Source

Material Design Cards

Material Design Cards

Demo / Examples Source

MATERIAL DESIGN CARD ANIMATION

MATERIAL DESIGN CARD ANIMATION

Demo / Examples Source

Google Material Design Cards

Google Material Design Cards

Demo / Examples Source

3. Material Design Menus

Configurable animated Material Design Menu Button

Configurable animated Material Design Menu Button

Quickly created a configurable Material Design menu button via SCSS.

Demo / Examples Source

Material Design Menu

Material Design Menu

Demo / Examples Source

Material Design Menu Toggle

Material Design Menu Toggle

Demo / Examples Source

Material Design Menu

Material Design Menu

Demo / Examples Source

Material Design Menu Dropdown

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.

Demo / Examples Source

Material Design Navigation Menu

Material Design Navigation Menu

Material design menu with css transitions.

Demo / Examples Source

4. Material Design Icons

SVG Morpheus

SVG Morpheus

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions.

Demo / Examples Source

Material design morphing icons

Material design morphing icons

Demo / Examples Source

Material design morphing icons

Material design morphing icons

Demo / Examples Source

5. Other

Waves

Waves

Click effect inspired by Google’s Material Design.

Demo / Examples Source

Paper Collapse

Paper Collapse

Simple CSS3 paper cards accordion. Inspired by Google Material Design.

Demo / Examples Source

Mprogress.js

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.

Demo / Examples Source

Polymer Material Design Playground

Polymer Material Design Playground

Demo / Examples Source

CSS Animation Material Design

CSS Animation Material Design

Demo / Examples Source

Material Design Preloader

Material Design Preloader

Demo / Examples Source

Material Design Responsive Table

Material Design Responsive Table

Material Design Responsive Table CSS-style will override basic bootstrap style.

Demo / Examples Source

Material Design Sidebar (Profile menu)

Material Design Sidebar (Profile menu)

Demo / Examples Source

Google Material Design Input Boxes

Google Material Design Input Boxes

A CSS experiment to recreate the Google Material Design Polymer input boxes in CSS.

Demo / Examples Source

Material Design App – Animated Tabs

Material Design App

Demo / Examples Source

Material Design Input Text

Material Design Input Text

Demo / Examples Source

Material Design Example

Material Design Example

Demo / Examples Source

Material Design Articles

Exploring Google’s Material Design with Polymer

Exploring Google’s Material Design with Polymer

Source

9 principles Google created for its colorful ‘Material Design’ UI refresh

9 principles Google created for its colorful ‘Material Design’ UI refresh

Source

Make Material Design Websites with the Materialize CSS Framework

Make Material Design Websites with the Materialize CSS Framework

Source

Top designers react to Google’s new ‘Material’ design language

Top designers react to Google’s new ‘Material’ design language

Source

What Material Design Means For the Future of Android

What Material Design Means For the Future of Android

Source

What You Can Learn From Google’s Material Design

What You Can Learn From Google’s Material Design

Source

User Interface Designs Inspiration of Material Design

Linkedin Material Design

Linkedin Material Design

Designer Info Source

Twitter Material Design

Twitter Material Design

Designer Info Source

Instagram Material Design

Instagram Material Design

Designer Info Source

Google Drive Material Design Concept

Google Drive Material Design Concept

Designer Info Source

Whatsapp Material Design

Whatsapp Material Design

Designer Info Source

Soundcloud Material Design

Soundcloud Material Design

Designer Info Source

Dribbble App Material Design

Dribbble App Material Design

Designer Info Source

Google Workspace – Rethinking Gmail

Google Workspace – rethinking Gmail

Designer Info Source

Telegram Material design for Android

Telegram Material design for Android

Designer Info Source

Material Design Color Palette

Material Design Color Tool

Material Design Color Tool

Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

Source

Material Color Palette for Sketch

Material Color Palette for Sketch

Download

Material Palette

Material Palette

Material Design Color Palette Generator.

Source

Material Design Colors

Material Design Colors

Source

Material Colors

Material Colors

Source

Material Design Colors

Material Design Colors

Source

Material Design Color Palette

Material Design Color Palette

Material Design Color Palette is a LESS/CSS toolkit for easily usage material colors by Google in websites.

Source

Material Design Color Palette Sketch Plugin

Material Design Color Palette Sketch Plugin

Sketch app plugin for displaying Google Material Design color palette.

Source

Material Design 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.

Source

Material Design Other Resources

1. Adobe After Effet File (AE File)

Google Fit Animation AE Project

Google Fit Animation AE Project

Download

After Effects – Player freebie

After Effects - Player freebie

Download

Google Material Design | Free AE Project File

Google Material Design

Download

Google Material Design – Free AE Project File

Google Material Design - Free AE Project File

Download

Open And Close | Free AE File

Open And Close | Free AE File

Download

2. Keynote Animation

Keynote Animation Material Design

Keynote Animation Material Design

Download

Material Design: Keynote Animation

Material Design: Keynote Animation

Download

Keynote Animation Recreation

Keynote Animation Recreation

Download

I am Prasad G (Prechu). I analyse, Optimise websites to improve their search results, a regular blogger of cssauthor.com

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to a friend