Great Resources for Building Rich UX with Google Material Design

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.

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.

Coolers.Me

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.

ColorDrop

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.

MaterializeCSS

Powerful css, easy lightweight offer material experience with out of the box grid system. This is one of the richest work outside official getMDL.io (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.

You May Also Like

0
comments

About me

Hi. I’m Enterprise Architect (IT) at Intuitive Surgical Inc , building worlds smartest and largest surgical robots and binding business systems with cloud. I’m Founder of OyeCode. I have worked with Salesforce.com as Technical Architect (HQ) in San Francisco and designed/developed the cutting edge Salesforce Product Trailhead . I enjoy development on Salesforce, Heroku, Rails and other cloud based platform