15 Awesome examples of Material Design done right

For now at least, it’s all about simplicity, with subtle but very natural and real visual clues providing distinctions to aid the eye’s navigation around the interface:textures, shading, contrasts, hues and so on. That’s right: material design trend is here to stay.
For those who think Google’s material design is a form of skeuomorphism (skeuomorphic design tries to reflect the concepts and materialism from everyday objects into the design ) answer is quite simple: material design does not recommend mimicking real-world interfaces.

Actually, it’s quite opposite. The Material in the name also refers to the real world, but it is less bound to visual cues and more to behaviours. Animation, transparency, boundaries, shadows are typical material design elements. Google’s “Paper and ink” moto presents minimalistic, lightweight design style.

Google’s official release of Material Design was a landmark moment for the trend. And the trend goes well beyond Android’s operating system or Google products. Whether it’s a graphic design mockup, a device interface, an app design or the simplest portfolio website, these 15 great examples show material design aficionados how it should be done…

1.Androidto.com

Canada’s Largest Android Development, Design and Business Conference – AndroidTO.

androidto

2.Jpiedade.com

Portfolio website built with material design by JOÃO PIEDADE

ui:uix

3. Material.cmiscm.com

Material Interaction shows interactive experiences for Google’s Material Design Principles. It was created with HTML5 and CSS3 and works well on mobile & tablet devices.

a11

4. Foodtrack.de

Web #application allowing to find local food trucks. Currently available only in Nuremberg, Germany. Excellent example of Google maps web implementation.

foodtrack.de
foodtrack.de

5. Lifeaweso.me

Lifeaweso.me website is aiming to give people a simple and efficient way of telling others who they are and what they’re capable of.

Lifeaweso.me
Lifeaweso.me

6. Diskforyou.com

Cloud-based repository DiskForYou is focused on maximum protection of your data and sensitive information.

ocloud

7. Jsobotka.cz

Portfolio website by Jakub Sobotka

jsobotka

8. Makoframework.com

Mako is a lightweight and easy to use PHP framework based on the MVC architectural design pattern.

makoframework

9. Adolfogutierrez.me

Portfolio website by Adolfo Gutierrez

adolfo

10. Battleborn.io


Online web application to compare your images in a sublime way. Website is under development in it’s early stages.

battleborn

11. Apkmirror.com

Have the APK file for an alpha, beta, or staged rollout update? Just drop it on Apkmirror website, fill in any details you know, and they will do the rest.

apk

12. Google.com/inbox/

Material design user experience for Google Inbox users.

3037483-poster-p-1-google-reimagines-email-with-their-new-inbox-app

13. Materialwp.com

Material Design WordPress Theme. Currently one of the best examples of WordPress based on material design. This material WordPress template uses the Material Design Bootstrap theme by Federico Zivolo to get all the cool features combined with the Bootstrap framework.

Wordpress Material Design Theme
WordPress Material Design Theme

14.Nimbusnine.co

Material Design website of the smartest cloud solution for enterprise-level lighting control and energy savings management. Beautifully designed and feature rich website delivers brilliant Material Design UI.

nimbusnine-material-design-website

15. Nexpick.co

Nexpick.co is a new web application allowing people to organize, discover and share the things they care about by creating a collection of your picks. Access your collections on all your devices via the web browser. Needless to say, Nexpick website features brilliant Material Design UI.

nexpick
Nexpick.co

#showcase #materialdesign #mockup #design #websites #examples

9 responses on “15 Awesome examples of Material Design done right

  1. Help! I want to engage a design who is comfortable with Material Design, enough to be able to create something compelling within the specification.
    If you know of anyone who could be up for this project in the ‘Material World’ Please shout!
    https://99designs.com.au/web-design/contests/innovative-localtag-website-push-boundaries-material-design-tilt-490048
    thanks Pete.

  2. Material Design is very important factor for Website owners. This post should read by every designer. Thanks for sharing it with us.

  3. Ut eget lorem massa. Duis ac lorem ex. Aenean condimentum a lectus non eleifend. Etiam dictum scelerisque egestas. Maecenas tellus odio, vehicula vitae cursus ultrices, porta in elit. Etiam non augue aliquet, molestie neque eget, euismod tortor. Pellentesque sodales quam odio, vel dictum magna congue eu. Aliquam fermentum leo eu libero lobortis laoreet. Maecenas posuere

  4. Thanks for this article. Material Design is slick.

  5. one of the website templates available on the internet. going to share it with my friends so that they can get an idea of latest website designs

  6. Tom

    I would add http://ArcChat.com to the list 😉

  7. Arc chat isn’t responsive. Does that violate Maturity Design guidelines?

  8. Toby Hodkinson

    most of these links are now dead or outdated!

  9. Check out this cards based master detail based on material design:
    mini.coach

Leave a Reply