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.
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.
If you are a developer, you might also want to read the Material Design for Developers guide.
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.
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.
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 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:
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.
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.
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.
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.
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.
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.