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

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

    1. Hey, I am here for giving you my services being a Web Designer.

      1. We need a web Developer at the moment. you can apply for the job here.
        https://www.prolificweb.co.uk/

        1. The Project We are currently working on is https://brightcareservices.co.uk/

  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

  10. I like your web design list. That’s a really good to look for really good recommendations when looking for a web design. Thanks for such post and keep it up.

  11. You should remove jsobotka.cz. It re-directs to fishy looking pages.

  12. Really Nice designs. We love every single one of them. Material design is one of the most important factors in the process of web design. It is really nice to see graphically rich web templates in a same location.

  13. manoj

    great list

  14. Igor

    Check out my latest side project – https://earthearoulette.com
    It allows you to generate a random travel destination. The website is in Material Design obviously.

    1. Igor

      Oops, the correct link is https://earthroulette.com

  15. christopher

    Can we customize?

  16. Jack

    Great article! You can find some amazing tools for Bootstrap here: https://mdbootstrap.com/

    1. Clark

      Great tool. Worth to mention on this page!

  17. Oh No!

    None of these websites work

  18. Thanks for sharing cool websites!

  19. Appreciating the time and effort you put into your website and thorough information you present. It’s amazing to come across a site every now and then that is not the similar old re-written material. Excellent read! We’ve bookmarked your site

  20. nice work done. thanks for sharing this with us 🙂

  21. You are doing a great work . thanks alot

  22. Strong content . thanks

    Regards
    Reading Removals Company
    https://www.readingremovalcompany.co.uk/

  23. Amazing blog .thanks

  24. Good work guys.kep it up ,Thanks

    Regards :
    Connells Office Movers London
    https://www.connellsrelocation.co.uk/

Leave a Reply