- Design
- Develop
- Tools
Design
This is possibly the meatiest section of the site because it’s where they put all of the theory. It’s a design system first and foremost, after all. The code used to implement it is almost incidental. Here you’ll find an overview of all of the major concepts from Environment, to Shape, to Communication. It gets pretty in-depth. There’s also a pretty large section that deals with the individual UI components of the system, how they’re supposed to be used, etc. There’s also a section full of general guidelines, and a very interesting set of case studies of real apps built using Material Design. If nothing else, go check that out to see all the different ways you can implement one single design system.![01-Design](https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/01-Design.jpg)
Develop
This part of the website is the bit developers (hence the name) will be looking for. It basically just offers code-related documentation for each and every UI component. The cool thing is that you can find the components in four flavors (so far):- Android
- iOS
- Web
- Flutter (Google’s own cross-platform mobile app SDK)
![02-develop](https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/02-develop.jpg)
Tools
Lastly, we have a small but useful (and presumably growing) collection of tools.Material theme editor
This one is interesting: It’s a Sketch plugin that’s designed to help you quickly and easily make global changes to your implementation of Material Design. Basically, it’s there to help you implement your own branding with the system. Sketch users will no doubt love this.Icons
This is just what it says on the tin: a massive set of icons to use in your apps. They come in five aesthetic flavors, too. Well, they’re all monochrome, but if you implement them with the provided icon font, or download them as SVGs, you can quickly change that through CSS whenever needed.![03-Icons](https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/03-Icons.jpg)
Color tool
Basically, it’s just a color palette generator, but it’s specifically designed for Material. It gets the job done.Gallery
Last but not least, the gallery is basically Google Drive for stuff built with Material Design. It’s designed to host Sketch files, so you can inspect them. The service itself can link you to relevant developer resources for Material Components, when appropriate. And naturally, you can share your work, and collaborate on projects.In Summary
For anyone looking to dive into Material Design, this is probably one of the most complete resources out there. It will also be the place to look to find information on the system’s newest components, and I have no doubt that they’ll release more tools. If Material is your thing, material.io is exactly where you should be starting.Ezequiel Bruni
Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…