Material Design Resources For Web Designer And Web Developer

In this post, we have collected a huge of Google Material Design resources including framework, icons, GUI kits, fonts … for your next design project or for inspiration. We hope this will helpful for you to design a great Android App or website using Google’s new design principles.

Framework

1 – Materialize – Material Design Framework

materialize-css-framework

Materialize is a modern responsive front-end framework based on Material Design. Materialize comes in two different forms. You can select which version you want depending on your preference and expertise.

Demo Download

 

2 – Material UI – Material Design Framework

material-ui-css-framework

Material-UI is a CSS framework and a set of React components that implement Google’s Material Design specification.

Demo Download

 

3 – Material Design For Bootstrap

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. Just include the theme, after the Bootstrap CSS and include the JavaScript at the end of your document (just before the </body> tag), and everything will be converted to Material Design (Paper) style.

Demo Download

 

4 – Lumx – Front-end Framework Based On AngularJS & Google Material Design

lumx-material-framework-angularJS

The first responsive front-end framework based on AngularJS & Google Material Design specifications. lumX will help you to design your applications faster and easier. We followed Google Material Design recommendations to bring the best experience to your users.

Demo Download

 

5 – Material Design Angularjs

material-design-angular-js

Demo Download

 

6 – Polymer

Polymer

Demo Download

 

7 – Leaf – A CSS framework based on Google’s material design

Leaf-CSS-framework-based-on-Google-material-design

Demo Download

 

 

Icons

1 – Material Design Iconic Font

Material-Design-Iconic-Font

Material Design Iconic Font is a full suite of material design icons (created and maintained by Google) for easy scalable vector graphics on websites.

Download

 

2 – Material Design Icons with Bounds .sketch

Material-Design-icon-set-for-Sketch

Material Design icons with bounding rectangles (can be easily hidden via style) at MDPI size.

Download

 

3 – Material Design Icons

material-design-icon

Download

 

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

material-design-icon-flaticon

Download

 

5 – The world’s largest icon pack for android L

icon-pack-for-android-L

Download

 

6 – 431 Material Design Icons in Photoshop Custom Shape format

431-material-design-icons

Download

 

7 – Mirchu – Material Design Icons

Mirchu-Material-Design-Icons

Download

 

 

UI Kit

1 – Free Material UI Kit

Free-Material-UI-Kit

A free limited version of our consistent, organized and retina-ready set of premium components and templates across 7 content categories to bring your next big ideas to life.

Download

 

2 – Android L GUI KIT By Ruban Khalid

Android-L-GUI-KIT-Ruban-Khalid

Download

 

3 – Material Design UI

Material-Design-UI-freebies

Download

 

4 – Android Lollipop UI Kit .sketch resource

uxpin-lollipop-ui-kit

Download

 

5 – Android Lollipop Material Design UI kit for Sketch

Material_Design_UI_Kit

Download

 

6 – Material Design [Free .Sketch Template & Icons]

material-design-sketch-template

Download

 

7 – Material Design by Google .sketch resource

material-design-ui-kit-resource

Download

 

8 – Android Lollipop 5.0 GUI

Android-Lollipop-5.0-GUI

Download

 

 

Other Resources

1 – Action Button

action-button-material-design

Source

 

2 – Material Design Preloader

material-design-pre-load

A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox)

Download

 

3 – Material Design Playground

Material-Design-Playground

Source

 

4 – Google Material Design – Free AE Project File

Google-Material-Design-Free-AE-Project-File

Exited to see the look of Android L. Here is a freebie for you based on the Google’s new Material Design.

Download

 

5 – Material Sidebar (Profile menu)

Material-Desig-Sidebar-Profile-menu

Source

 

6 – Material Design (CSS-based) – Tiles

Material-Design-CSS-based-Tiles

Source

 

7 – Rippler – Effect that spreads like a wave in touch or click.

Rippler

Demo Download

 

8 – Material design morphing icons

Material-design-morphing-icons

Source

 

9 – RippleCator – Google Material Inspired

RippleCator-material-design

Source

 

10 – Material Design Instruction

material-design-introduction

Source

 

11 – Material Interaction

Material-Interaction

Demo

You may also like...

Leave a Reply

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