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.
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.
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.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.
Lumx - Simple Front End Framework
LumX is a front-end framework based on Google Material Design.
Happy Designing
0 comments