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 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:
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.

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.

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
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.

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.

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.

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.

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
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.

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.

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!

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.

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.

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.

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

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 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.)

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.

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.

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.

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.
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.
Paula Borowska is an innovative and insightful Senior UX Designer at CVS Health, known for her relentless pursuit of designing the best user experiences. As an expert in design systems, user testing, accessibility, and cross-team collaboration, Paula is dedicated to enhancing digital experiences for all users. Paula possesses the rare combination of technical skill, creative thinking, and strong communication abilities. Her dedication to user-centered design and her advocacy for inclusive digital experiences make her an invaluable asset to any organization.
We create beautiful website and email builders, helping 30,000 customers to grow their business.
A simple tool to create emails and newsletters.
Create an animated website in minutes.
A perfect tool to create Bootstrap website.
Earn 25% commission on affiliate sales. We have everything you need to make money.
Our useful services seamlessly integrated with each other and our products to get you to the finish line faster.
Drag-n-drop solution for your static website to quickly host your static website.
Design in the cloud and create new websites seamlessly, without any coding skills.
Talk to your audience at scale. Send your email marketing campaign quickly and easily.
Get website downtime alerts by phone call, SMS, email, Slack, etc when your website went down.
Whether you’re an experienced web designer, developer, marketer, or a newbie looking to learn the basics, there’s something for everyone on this blog.
170 articles
137 articles
108 articles
96 articles
85 articles
22 articles
13 articles
90 articles
148 articles
57 articles
52 articles
18 articles
102 articles
35 articles
64 articles
We’re always looking for new authors. We’re happy to publish useful articles and tutorials related to web design.
Made by Designmodo.
This website design and code was built using our tools. Treat it as a proof of concept.
Subscribe now to receive discounts, news, and updates. We pinky swear to not spam you. 😉
Copyright © 2010-2023. All Rights Reserved
We use cookies to ensure that we give you the best experience on our website. Privacy Statement.
Your cart is empty 🙀
Get started with the most advanced email builder for your next campaign or newsletter.
A perfect tool to create website or prototype projects. It will fit all kinds of projects.
Create an amazing static website in minutes and export ready-to-use template.
Get started with the most advanced email builder for your next campaign or newsletter.
A perfect tool to create website or prototype projects. It will fit all kinds of projects.
Create an amazing static website in minutes and export ready-to-use template.
Create an amazing static website in minutes and export ready-to-use template.

source