Mobile - - By Ada Ivanoff

10 Essential Material Design Resources and Tutorials

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.

Sponsors