Material Design Resources and Inspiration

DesignPaula Borowska • August 06, 2014 • 5 minutes READ

Material Design is Google’s new visual language. Google wants to combine great visual design with technology in order to make a better user experience. The concept of material design is so new that a lot of documentation is not out there. However, I have found some resources to get you started as well as material design style inspiration.

Google Provided Resources

Google is nice enough to give the masses a pretty long list of resources. They provided a variety of templates in Adobe Illustrator format. They are free to download on the Google Resources Page within the Material Design Guide. If you are looking for specifics, I’ve got them. Here are some of the more notable files for you to download:

• Mobile Whiteframe
• Tablet Whiteframe
• Desktop Whiteframe
• Color palette
• Roboto font
• Structural elements
• More of individual UI concepts

Inspiring Designers

I’ve scoured Dribbble and CodePen to get you some awesome material design inspired shots from other designers. It’s nice to see what others are trying to make of this new design style. Additionally, some developers have made a few resources like material design buttons to get us more excited about this concept.

Free After Effect Project File

Jelio Dimitrov created this cool animation in After Effects. It’s a neat resource for anyone trying to create animations within the material design style.

Material Design UI Buttons

Here are a few snippets with various material design UI elements. They are all coded with CSS. There are buttons, square elements, an alert box, plain square, image and circles. It’s a small but useful library to get started.

Material Design Playground

This playground is a git repo by Eric Bidelman. It has so many of material design elements and is one of the more extensive code gardens. Use it to your advantage, by learning the basics of material design.

Material Design Buttons

This is a collection of material design buttons features square, round and outlined buttons. What makes it interesting is the added click event that changes the background color.

Google Material Design Hierarchical Timing

Material design is filled with animations, specifically when you load a new element. This is an animation simulation for anyone interested in using this animation within any project – doesn’t have to be Google related.

Google Design Icon Template

On the other hand, if you are looking to create material design icons this is the perfect Dribbble shot for you. Grahm Macphee created an icon template that you are free to download and use for your icon needs.

Android L – Icon Grid System

For a more extensive icon template, this is the one for you. It includes two rectangular, one circular and one square template. This template is geared specifically toward Android L icons.

New Android L Interface

If you are looking for an Android L PSD, this is it. It is a free UI kit, which you can use to mock up apps or interfaces for Android L. I can’t get over how awesome these color pairings look!

Material Design Checkboxes

This is a code snippet for checkboxes. It’s a pretty neat looking item. I only wish this snippet also included code for other input types like a drop down.

Material Design Slideshow

For those interested in more formal documentation, Harrison Weber – news editor at VentureBeat – shared a great Slideshare. It’ explains the basics of material design in a short sequence. You can download and pass it around.

Material Design

This quick animation is by student Jovie Brett demonstrating material design (naturally). The animation is absolutely marvelous and preserves the essence of material design well. I love the playfulness here that gives material design a friendly personality.

Material Design Icon Templates

This Dribbble shot embraces the UI style of material design by embracing its fonts, colors and line style.

Google’s Material Design Dashboard

Here is a shot from Sam Mearns demonstrating ways to play around with Google’s material design concept. It’s his attempt at showing off his internal project.

WhatsApp – Material Design

WhatsApp is notorious for being constantly redesigned. Amruth Pillai took one of the first shots at redesigning it to appear in the material design style. This looks really good. (And the copy is quirky, too.)

System Icons – Material Design

Here is a set of Android L icons made by Google. Notice that they are not hollow, outline icons. It’s an interesting stand by Google, actually. Here is a clean flag icon set in both vector and sketch formats.

Action Button

If you are looking for material design inspired navigation, here you go. It’s a sleek animation for the navigation button within Android L. There is even a CodePen link for you to implement this animation.

Android L PSD Kit

Rasmus Nielsen made this awesome Android L kit. The design details on this are great. The design is clean, the colors are lovely and it has overall amazing quality.

Prayers Times App

Vincent Tantardini created this concept remainder app for people participating in Ramadan. Once again, the colors are so brilliant; so are the tiny UI details like the divider lines. material design is really well put together.

Conclusion

Actually, this is technically just the beginning. The resources are scarce, but you have now been introduced to the concept of material design. It’s a well put together design aesthetic which will shape many of our interfaces, starting with Android L. As material design continues to roll out, there will be more resources. If you have developed something in the material design style please leave a link in the comments.