What is Material Design? Material design is a collection of conventions pioneered by the design team at Google to make responsive web design and mobile applications, that are intelligible, usable, and useful. It’s guiding principles are ‘Material is the Metaphor;’ (a modern take on skeuomorphism lite,) ‘Bold, graphic and intentional’ (seemingly taking principles from flat design and heavy imagery now popular,) and ‘Motion provides meaning’ (utilizing the now ubiquitous CSS and JS animations for its meaningful transitions.)
A number of the conventions in Material design are a significant improvement on the web, and is helping move design forward – other web design experts agree. Digging into new responsive web design trends gaining steam in 2016, I decided to design my first website utilizing the concepts of Material design and wanted to share the resources I’ve come across that can help jumpstart getting down to business with the Google’s Material Design.
1. Amazing Templates from Google themselves: ‘Material Design Lite’
Without getting overly sentimental here, it’s amazing how much sharing is going on surrounding Google’s material design. In ‘Material Design Lite,’ Google shares 3-4 templates to get you started with Material design. These templates can be wielded to produce some really nice looking work and I plan to utilize them in some websites soon.
2. Material Design Palette – Get complimentary colors and how they’d play out with material design elements
My recent ‘Ultimate designer’s color guide for 2016‘ shared 10+ tools for designing with color over the next year included this nugget of goodness; this material design color palette tool quickly helps you find schemes and shows you how they’d play out in Material Design.
3. Material Up – Ton’s of free resources
From PSD mockup’s to to CodePen snippets, Material Up is incredibly practical. Some of the design’s are just Dribbble concepts, but can get you rolling on some UI design. I found this Material design testimonial slider helped informed some work I’m doing, and you could likely find some good stuff as well.
Another material design testimonial concept I found on there, is a little more outside the box. If someone codes this, I’d love to see how they choose to do it:
4. Tuts Plus – Learning Material Design Lite – Cards
What are Material Design Cards? Card based design is simply a pattern for a particular design and how it displays and image, caption, and link to dive deeper into that item. By using some delineation between the ‘card’ and the rest of the page it gives a very visual and obvious clue as to the grouping of objects and allows visitors to scan quickly.
Dribbble and Pinterest are sites whose layouts are basically mostly based on card formatting. ‘Card based design’ has been getting a new resurgence as of late perhaps because of a new understanding of how things on the web should be presented for effectiveness;
- Display items with clear visual hierarchy, creating contrast between grouped items
- Use more images that ‘show, rather than tell.’
- Helps people find their way around the site easily which is a major user experience win
5. Material Design Color Pallette Tool – Chrome Browser Extension
Where-as the tool above was more for finding totally new color palettes from it’s website, this handy tool can help you get inspired on the go.
6. 10 Superb Examples of Websites built with material design.
Still trying to get the scoop on what Material Design is really about, and want to see examples of it in action before trying to design with it’s principles? These 10 examples will get you rolling.
7. Material Design UI Kit Freebie
You can’t create the UI elements to look like Google’s Material Design from scratch, or you can just skip to the color, layout, and font choices and re-arrange these elements.
8. Or, Supersize it with these 10 free Material Design UI Kits
If you don’t care to keep it simple and want a little variety, these 10 kits will kickstart your exploration. Grids, maps, graphs, and alot of things a bit more centric on mobile app development.
9. Material Design Framework – Materialize CSS
What’s not to like about a bootstrap like Material Design framework? The principles of material design are laid out in a framework that put’s Google Material Design’s concepts to work.
10. Other Material Design Frameworks: Angular Material, Material UI with React, MUI Framework, and Polymer Project.
- Angular Material
- Material UI – Utilizing React
- MUI Framework – Another ‘Bootstrap like’ Material Design CSS Framework
- Polymer Project
According to the article ‘Top 5 Material Design Frameworks’ the author suggests to start with Materialize CSS because it’s so similar to Bootstrap and many web developers will find its familiar conventions easy to work with. Otherwise if you’re a fan of Angular.js animation functions, go for Angular Material.
All-in-all I think the principles of Material design are sound. They will likely reach a saturation point and people will branch off into variations, but because they are built on solid design principles these resources and templates should inspire us to do better work. In the end, we’re not out here to create artistic expressions of ourselves, we’re here to help people get where they want to go, clearly present information and make responsive websites that look nice after all.
Thanks for checking out “Fall in Love with Material Design – 10 Resources“; I invite you to leave a comment, share, and read another article 🙂