Home / Tools & Plugins / 50+ Google Material Design Resources for Developers

50+ Google Material Design Resources for Developers

Google introduced the new design language “Material design” at the Google I/O conference on 25th June 2014. It focuses on grid based layouts, padding, floating action buttons, responsive transitions, depth effects like lightning and shadows. Unlike real paper, material design can expand and reform intelligently. With the addition of tactile surfaces, fluid motion and bold graphic design, it allows designers and developers to build more colorful, flexible and compelling application for web, Android and Chrome OS.

If you are finding a way to explore Material design and its usage in your project, here are some helpful resources which will help you to make your application/web more attractive.

52. Animated Tabs

Animated Tabs

Polymer app without canvas and polymer. You can use only CSS3 and pure JavaScript.

51. Modern Loader

Modern Loader

A modern Google spinning loader in pure CSS, animating through four colors.

50. Material Design Preloader

Material Design Preloader

A jQuery plugin that recreates the material design preloader as shown above.

49. Material Design Navigation

Material Design Navigation

The pages slide to reveal a clean, simple and smooth navigation.

48. Switch Theme

Switch Theme

A simple and elegant switch theme from Google material design (by Zhoolego).

47. PC Icons

PC Icons

A few material design icons for PCs.

46. Material Shadows

Shadows

The authentic design shadows without web components, designed by Ben Strahan.

45. Menu CSS

Menu CSS

material design menu with amazing hover effect. Just copy the given CSS and HTML code to your project.

44. Radio Input

Radio Input

This is the custom radio input (CSS only), designed by Christian Hall.

43. The Morphing Icons

MORPHING ICONS

The morphing icons are designed by Alberto Bonvicin. Currently, it cycles through the radios randomly or you can change to cycle in order, starting with checked elements.

42. Material Design Form

Material Design Form

A simple and quick material design login form with ripple effect, designed by Josh Adamous.

41. Animation Timing

animation timing

A smart and beautiful animation timing based on material design, created by Sergey Kupletsky.

40. Material Design Buttons

Material Design Buttons

The script automatically (written by Michaela) adds the material design effect to elements with “material design” class. Just add the preferred color as “data-color” attribute. You can also use it on div with images.

39. Product Icon Anatomy

hello

This is animated version of the product icon anatomy guideline from Google material design, created by Jovie Brett.

38. Material Palette

Material Palette

Select your favorite color(s) and get your material design color palette (along with the preview).

37. Material Icons Deconstruction

Material Icons Deconstruction

This is finished clone of delightful details. You can build these kinds of deconstruction just by using HTML and CSS. Users need to click on each section to toggle between icons.

36. Material Interaction

Material Interaction

The page shows the interactive experiences of Material design principle.

35. Ripple Click Effect

Ripple Click Effect

This is kind of click effect which includes an ink-drop like element that moves out rapidly from the position where the user clicks/taps. The simple logic here is to create circles (with smooth transition) at click coordinates behind the links.

34. Hover and Click Effect

Hover and Click Effect

Yet another hover and click effect, in addition with a mixture of different colors which makes it more appealing.

33. The Tiles

The Tiles

The Material design CSS based tiles, created by Sergey Kupletsky.

32. Company Profile

A template that will make your work have a brave modern look. You can alter colors, fonts or use it as a starting point. It is fully editable and ready to print in Microsoft Word and InDesign.

31. Google Drive UI inspiration

A redesign concept of Google drive.

30. Material Design Flat Avatar Set

A brand new set of Material Design style flat avatars, available in both PNG and PSD format. The premium set has over 1,400 avatars in all possible colors and styles.

29. Rocket News

Rocket News is developed for news and magazine applications running on Android. All elements are editable, and everything is fullu layered and grouped.

28. App Material Design Proposal

This is a 14 page template that includes Invoice, automated table of contents, object styles, free fonts, master pages, and much more. Layers are completely customizable.

27. Android Ultimate

Android Ultimate consists of over 25 modules embedded in a single template. This includes toolbar, material tabs, search view, picker, bottom sheet, text view, UI elements, and more.

26. Cisco

Cisco is a Material app UI design packed with more than 30 high quality android screens required to design modern, clean and stylish social app projects.

25. Server Hosting Icons

A small collection of free server/hosting Material Design icons. It is available in PNG and PSD files.

24. BankTag

BankTag is a free UI material design kit to transfer money in your account. The concept is quite similar to CashTag of Square, but it uses your bank account details.

23. Multi Purpose Android Webview

It lets you easily convert your website to a complete Android app in just a few minutes. Also, there is a well documentation to help you develop your own app and you will be able to publish it on Google Play.

22. Material Web Icons

A nice little icon set of material web icons, available free of cost.

21. Material Design Icons

Material Design Icons

These are official open source icons featured in the Google material design specification. It includes SVG, PNG and hi-dpi versions of all icons in 24px & 48px.

20. Free Sketch, Templates and Icons

Free Sketch, Templates and Icons

This is a quick start sketch template that includes 424 Android L icons, mobile, tablet and desktop layouts and all the polymer project web component elements.

19. Material Design Icon Expanded

Material Design Icon Expanded

A huge collection that includes over 1400 icons in SVG & PNG format, available in several sizes.

18. Material Design for Bootstrap

Material Design for Bootstrap

It’s a theme for Bootstrap 3 that lets you use the Google material design in your favorite front-end framework. Just include the theme after CSS and include JavaScript at the end of your code (before </body> tag).

Recommended: 24 Useful Bootstrap UI Editors for Developers

17. Material Design for AngularJS

Material Design for AngularJS

It’s a specification for a unified system of motion, visual and interaction design for all devices. It consists of lightweight and clean AngularJS native user interface elements that can be used in single page applications.

16. Summeric Material Ui Kit

Summeric

A free PSD kit designed by Kein Tran.

15. Wireframe Kit

Wireframe kit

This is material design Wireframe kit for Sketch, designed by Dan Shipley.

14. Material Design Pattern

Material Design Pattern

This is a new set of tiled pattern in high resolution. It is available in Photoshop file, PNG and vector format.

13. The Icons

The icons

Here you will find a growing collection of material icons in various formats, color and size.

12. Confirmation Popup

Confirmation Popup

The stylish Material design confirmation popup designed with CSS3 and jQuery.

Recommended: 26 Modern jQuery Plugins To Make Your Website Better

11. SVG Sidebar

svg sidebar

The elastic SVG sidebar based on Material design, written in simple JS with requestAnimationFrame and custom easing.

10. Lollipop GUI Kit

Lollipop GUI Kit

This is Android’s Lollipop xxhdpi graphical user interface kit designed by Sandip D.

9. Lollipop GUI -2

Lollipop GUI -2

This is Android Lollipop 5.0 PSD with all screens including splash, call, notification, inbox, email, manage file and contact feed screen.

8. Material UI kit

Material UI kit

All new material UI kit (HTML + CSS), designed by UltraLinx. Here’s the demo.

7. Lollipop Material Design UI kit

Lollipop Material Design UI kit

This is the Android Lollipop Material design UI kit for sketch, designed by Ivan Bjelajac. The use cases are based on common UX flows in Android app.

6. Material Design Hamburger

Material Design Hamburger

Android’s material design hamburger is built in CSS that currently supports the latest version of all major browsers. Just download the latest release and include the CSS & JS files from the dist folder where desired within your project.

5. Android Music App

Android Music App

Wanna create a music app? The design is ready for you. It includes home screen, login, my music, contacts, sidebar, top playlist, news feed, player, album view and user playlist screen. Available for $15.

4. Materialize

Materialize

Materialize is the modern, responsive front-end framework based on material design. It includes tons of gorgeous elements and components like badges, buttons, cards, preloader, icons, colors, grid, form, table, media, shadow, typography and much more.

3. LumX

LumX

LumX is the responsive front-end framework based on Angular JS and material design specification. It is built on Google guideline, respecting metrics in pixel perfect way.

Read: 26 Modern jQuery Plugins To Make Your Website Better

2. Material UI

Material UI

It’s a CSS framework and a group of react components that implement Google’s material design. For better understanding start with the React library before diving into material UI.

1. Polymer

Polymer

Recommended: 35+ Useful HTML and CSS Frameworks For Web Designers

Polymer is a large library that uses latest web technology to let you create HTML elements. You can build anything from a small button to a complete application as an encapsulated, reusable element that works on all devices.