Mobile
Article

10 Essential Material Design Resources and Tutorials

By Ada Ivanoff

When Google announced Material Design, it caused a splash in the Android community and beyond. It's been a Long Road to Google's Material Design, but the journey has been worth it.

Material Design is no longer new, but it's as popular as it was on launch day. Material Design has a lot of good resources, but if you are new to the concepts, you are probably wondering where to begin.

The most logical (but not the easiest) place to start, is the Material Design specification itself.

1. Material Design Specification and Tutorial from Google

The Material Design specification from Google is an introduction to the main goals and principles of Material Design. It defines the basic concepts, such as material, material properties, elevation, animation, style, layout, components, patterns, etc.

Introduction to Material Design by Google

If you are a developer, you might also want to read the Material Design for Developers guide.

2. Android Getting Started with Material Design

Specifications are helpful, but nothing beats a good tutorial with practical advice on how to implement specification. One of the best is the Android Getting Started with Material Design tutorial. This is an in-depth, yet easy to follow tutorial, and I whole-heartedly recommend it. I bet even those with more experience will learn plenty from this tutorial.

Material Design Tutorial

3. Android Development Tutorial: Lollipop Material Design

Another in-depth tutorial that I find useful is this one. It covers the main aspects of Material Design, such as view elevation and shadows, clipping views, SVG drawables such as palette and color extraction, animations, etc. Unlike the previous tutorial, this one doesn't contain much code. It's more of a clarification of the specification than a tutorial that produces a deliverable.

Android Development Tutorial: Lollipop Material Design

4. Material Design Video Tutorials

Many designers prefer video tutorials, so here is a series of video tutorials on Material Design. For video tutorial maniacs this is a treasure trove because the series has over 58 video tutorials, most of which are 10+ minutes long! They are HD tutorials, so you won't have to strain your eyes with blurry images.

Material Design Video Tutorials

5. Material Design Frameworks

Material Design frameworks are an essential part of Material Design – it's hard to work without them. I am not going to cover these in detail because they have already been covered in the Top 5 Material Design Frameworks to Use in 2015 article. The article includes the major frameworks you'll need, such as:

Material Design Frameworks

6. Material Design Icons

Icons are an interface component you can't do without. While you can always design your icons on your own, ready made icons are more efficient. For instance, these Material Design icons are a good repo to pick from. This is a large collection of icons, most of which are submitted by the community and are free to use. Before you use them, especially in a commercial project, always check their copyright / license.

Material Design Icons

7. More Material Design Icons

As you can never have too many icons (or other design resources), make sure to look at these Material Design icons. These are easier to navigate because they are arranged thematically – i.e. Alert, Communication, Content, Device, Navigation, Notification, etc.

More Material Design Icons

8. Material Design Themes

Ready-made Material Design themes that can be customized quickly are a must-have. Material Design themes are a good starting point. The site offers free and premium themes, both in HTML and for WordPress.

Material Design Themes

9. Material Design Widgets PSD UI Kit

Here is a widgets kit, a pack of 16 colored Material Design widgets. The widgets are in PSD format and you can use Photoshop to edit them. What I like about this pack is its clean forms and bright colors.

Material Design Widgets PSD UI Kit

10. Roboto & Noto Fonts

Roboto & Noto fonts are the official fonts for Material Design. You can't do without them! Roboto is designed for both mobile and Web use. It comes with a specimen booklet.

Noto is the standard Android typeface for all languages not covered by Roboto. You can visit the Roboto & Noto fonts page and download them from there.

Roboto & Noto Fonts

I could go on and on with the list of useful Material Design resources because there are so many! You might find it useful to read this Prototyping for Android with Material Design article. It reviews great prototyping resources, such as IconShock Material Design Icons, Material Design UI Kit, Sketch ready Material Design Icons, and CSS Material Design Buttons.

Conclusion

Material Design is here to stay. It makes sense to become familiar with it. I hope the resources included in the article are a great start for both newbies and more advanced designers/developers alike. Let me know which ones you like working with and I welcome any comments.

  • Eno

    Thanks for these great resources Ada. This might sound like a silly question but, can material design be applied to desktop web applications. Also is material design Andriod specific for mobile or is it comparable for IOS devices too?

    • adaivanoff

      Yes, it can be applied elsewhere. In fact, the purpose of MD is to, “develop a single underlying system that allows for a unified experience across platforms and device sizes”. However, the feelings of using it on iOS devices are sort of mixed. Check this: https://www.designernews.co/stories/27078-ask-dn-what-do-you-think-about-using-material-design-on-ios. I believe it’s more of an acceptance problem – i.e. you are used to the iOS look and feel and everything else feels strange. I guess iOS users won’t be fascinated by MD on their iPhones. :) Probably because of this we don’t see much MD elsewhere.

      • Eno

        Ok thanks Ada.

  • http://www.sitepoint.com Simon Julian

    Thanks for some great resources Ada, excellent article

  • http://www.Intertech.com/ Intertech

    Wow, great collection of resources, Ada! This article is making its way around our office.

  • Antonella

    Bookmarked, thank you!

  • http://www.daemon.com.au/ Geoff Bowers

    You missed http://daemonite.github.io/material/ – an awesome bootstrap based Material project for web apps.

    • adaivanoff

      This one is good, too, but unfortunately I can’t include every good resource I find – it’s great there are too many of them, but the list will become an endless one. :)

  • http://www.p2warticles.com/ Serafino Bilotta

    you’ve forgotten Material Design Lite: http://www.getmdl.io/

    • adaivanoff

      Thanks for the link, Material Design Lite is really something but from what I read it’s more for Web than for mobile and I tried to include resources for mobile design mainly.

  • http://www.ineedhtml.com/ ineedhtml

    Great list! Bookmarked.
    Thank you. :)

  • http://www.i-visionblog.com/ s.shivasurya

    udacity material design tutorial videos were also useful ! :)

    • Divyesh Niyalani

      thnx

  • http://www.indiobailbonds.com/ Indio John

    Great guide on material design.

  • Divyesh Niyalani

    i want to start work on material design on android can some give me way how can i????

  • Divyesh Niyalani

    can you suggest me website to learn material design…???

    • peerzada burhan

      You can simply download my app it teaches every aspect of material design
      Link is provided above.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Mobile, once a week, for free.