Great Resources for Building Rich UX with Google Material Design

by - 11:08 PM

Google material design is everywhere, you see burgers menu, cards, parallax and much more every other site that is following latest design trends. I have ventured into material design for close to a year now, currently leading UX team in my role here at Intuitive Surgical, I started having classes and lots of brainstorming session on wire-framing and deep diving on human psychologies involved in develop lean and clear interface.

I was intrigued by how material design came into picture and wrote blog post on using google material design libraries with salesforce and another post here. Eventually, I gather so many resource of material design and I would like to share out.

Vibrant Google Material Design Colors Guidelines

Officially by google, this page provide basic UX guideline for building interactive views, including color combination, layout transition and justify material metaphor neatly.

Material Up : Color palette

Material Up is San-Francisco based company call upLabs , list down wonderful collection of layout for ios, web and material design paradigm. A must visit for wonder ideas and inspiration

Material Palette 

Design and make your  combination of material colors that fit the persona of your application through  palette in realtime. This is one my favorite website and most frequently used.


Beautiful color generator leveraging the sense of soft material colors, this page auto generate combinations which are handpicked and sensible for making corporate and person application using material phycology.


Another great colors palette, for quick start and this site provide ready pallets for quick use. These combinations are decent and pretty wide

Material Design Icons 

Beautiful Material icons, though I do not like their naming conventions used in this library for icons, but they are very intuitive in UX in look in relation to font-awesome library, this is collection officially provided by Google.

Community Driven Material Icons (contain much more icons)

This is community driven website, which own more icons than official google design and gives you more options and have better naming conventions

Pallete Tab

Official Google Chrome extension that generate multiple cards with beautiful color and font combination that offer great sense of typography with every new tab you open in chrome browser. if you are deep into UX this is must install chrome extension to keep you engaged and enlighten randomly.


Powerful css, easy lightweight offer material experience with out of the box grid system. This is one of the richest work outside official (officially library from Google)

Material components on Angular2

A collection material inspired components written on Angular 2, easy to import and use, though this is in beta, but quite mature in itself.

Bootstrap on Material Design

Yes, someone took this initiative to write material sense of UX by enhance Twitter Bootstrap. This library thought not very rich in transitions but good enough for those who are raised to responsive design with bootstrap or are bootstrap fans

React Component on Material Design

Set of React components that implement material design concepts

MUI - Lightweight CSS

MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Just as Material UI, it works on React JS library, so there will be no problem in mastering MUI if you are familiar with this tool.

Angular - Material 

Angular Material is a UI framework for users of AngularJS 1.0 and 1.5. It gives you control over a massive collection of user interface components compliant with the Google’s guidelines for material design.

Icon-Material : Lightweight CSS for Ionic Framework

Ionic Material is the extension library to the Ionic mobile app framework.

Lumx - Simple Front End Framework

LumX is a front-end framework based on Google Material Design.

Happy Designing

You May Also Like