This post includes live material design examples, concept material designs and a few material design apps. All in all, this is the ultimate inspiration post for designing web and mobile apps keeping material methodologies in mind.
If you don’t know what material design is, here’s a quick recap. (Although, you should know this by now.)
Earlier this year, Google came up with a design language of their own. Previous two years were dominated by Microsoft’s Metro design language, but this year has been all about material design.
Material design guidelines emphasize the use of animation, sound, flat color, larger margins and paddings, large tap-able objects, and all other factors that boost interactivity.
In the real world, if you flip a page of a book, you get an animation of a page flipping, right? You also get the ruffling sound of a paper straightening up and landing back down. Just like that, material design supports the use of real material animations and sounds.
The core concept of material design is using web canvas as paper and using graphics as ink, and support these two with real life animations and sounds. That’s why it is called Material.
This concept makes designs more simple and straightforward, but add to interactivity in order to boost user experience.
We covered the material design guidelines in a detailed article, so this post is only about material design examples. This post is for the inspiration of web designers and app designers so they can produce super cool material inspired designs.
24 Best Material Design Examples
This is one of the pioneering examples of material design. Inbox was one of the first websites to come up with material design… in fact, they designed this website when material design language hadn’t even been launched. They could do it because Google itself was designing it.
Evernote is one of the most used Android apps in the world. It also became one of the material design apps in the beginning of this year.
This is a concept design, which means that this is not the real design of Facebook but a concept given by an designer. Please comment and tell me if you think Facebook should adapt this design.
This design is created by another designer, but I liked this one as well. So, I’m adding both in the list.
I’ve always found NYT website a little cluttered. Their old design was too cluttered, the new one is a little better but this one really seems awesome.
Youtube already runs on material design, but designer Marcus Hofer thinks he can make a better design. I think that Hofer’s thinking right. By the way, Hofer has also designed a content page youtube.
Google developed material design guidelines, they should do something about their browser as well, don’t you think so?
Who said material design can only be applied to web related apps and software? Whole operating systems can be designed using these guidelines.
And while we’re seeing desktop software designs made with material guidelines, how can Photoshop be missed.
This is not a concept but a real app. Office 365 app for Android has gotten a makeover and it now wears material design.
This is a dark colored UI design for a music player application.
This is a profile page design for any social media network.
This is an example of designing dark in material style.
This is another (and my favorite) example of dark themed material layout.
Google’s own calendar app in an improved material design concept.
This is another design by another designer for a calendar app’s desktop version. I liked this one as well so I decided to add both.
This is a cinema ticket app concept design. It is one of my favorites in this list.
Trello is one of the most powerful project management apps out there.
WhatsApp is a very popular messaging app that was bought by Facebook for 19 billion dollars last year.
And while we’re discussing material designs of all other kinds, why not logos.
I’ll be adding more content in this post. Whenever I find more material design examples, I’ll make sure to add them here.
If you have made a design using material guidelines, please do share it using the comments section below.