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.
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.
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.
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.
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:
- Angular Material
- Materialize (You might also want to view their tutorial, it's really good)
- Material UI
- MUI CSS Framework
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.
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.
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.
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.
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.
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.
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.
How to Simulate Mobile Devices with Device Mode in Chrome
By Craig Buckler,
Does your web app work in all devices? Testing is a huge job. Learn how to enable Chrome's useful device mode to emulate dozens of mobile devices.
7 Cross-Browser Testing Tools You Need in 2019
By Daniel Schwarz,
Though browsers are arguably more reliable than they've ever been, we still can't forget about cross-browser testing tools. Here are 7 top options for you.
How to Test Responsive Web Design Cross-Browser Compatibility
By Craig Buckler,
Craig introduces CSS options for setting up a responsive website, including media queries, Flexbox and Grid, and covers tools for testing cross-browser compatibility.
Ada is a fulltime freelancer and Web entrepreneur with more than a decade of IT experience. She enjoys design, writing and likes to keep pace with all the latest and greatest developments in tech. In addition to SitePoint, she also writes for Syntaxxx and some other design, development, and business sites.