Fall in Love with Material Design – 10 Resources

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.

Material Design Lite

Fall in Love with Material Design - Blog Template

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.

Check out Material Design Palette

Google Material Design - Free Resources - web designers

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.

Material Design Testimonials

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:

Material Design, Testimonial Concept

MaterialUp.com

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

Tuts Plus – Learning Material Design Lite – Cards

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.

Material Design Color Pallette Tool – Chrome Browser Extension

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.

10 Superb Examples of Websites built with Material Design

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.

Material Design UI UX - Free Kit

Free Responsive Web Design – Material Design UI Kit

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.

App-centric Material Design UI Kits

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.

Materialize.css - CSS and JS Framework, for developers like foundation or bootstrap

materializecss.com

10. Other Material Design Frameworks: Angular Material, Material UI with React, MUI Framework, and 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 🙂

4 responses on “Fall in Love with Material Design – 10 Resources

  1. Devin

    Thanks for the resource list. I think there are some good principles to be learnt from the MD framework & their way of thinking but it’s still a little too ‘early’ for me to really start implementing it into my workflow. With the advent of ‘flat colors’, that already dulled the web in some respects so I’m going to need a bit more time to adjust to this new wave.
    Web Design Pretoria,
    Devin

  2. Ow wow , those designs are just so well done ! Good find and very useful list Tim. Material Up looks particularly interesting.

    Thank you !

  3. Al Demiu

    Adventurer of flat colors, please kill yourself. I’m not really enlighted in material design concept, but if flat colors is important part of material design, then adventurer of material design: please kill yourself too. No, I really mean it: dull and dumb people, who are not well in using UI, without your moronic enthusiasm to make UX worse the software would be much more comfort!

    It’s culture decadence which we observe now in cinema, art, music, etc. and unfortunately software design. Which I call “moron crowd attack”.

  4. Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

Leave a Reply