Google’s Material Design is an open source set of rules and guidelines for web and mobile app design. It wasn’t built only for Google Products or specifically for Android mobile apps. It’s a very detailed and useful guideline considering the multiple screen reality that web products need to handle nowadays.
When designers first started designing for the Web, they tried to design a action button look like a physical button in the real world so that people would know what it was,- a clickable button that they were supposed to push/click. Nowadays people have gotten used to virtual worlds: virtual controls, hover effects, buttons, menus, dropdowns and other web design elements no longer have to look like things that are in the physical world.

By using Google’s material design, web designers and developers are freed from the data bulkiness and the constraints of trying to make web elements look like real things in our world. Material design is a new design language, that helps developers to transcend most common web design principles. It aims to build a visual language that combines classic principles of a good design with technological possibilities and innovation. Material design goal is to create a single elemental system, that grants a consolidated experience across all device sizes and platforms. With a new generation of mobile devices and new form factors, such as Android smart watches, this move is seen by many as a logical evolution in design. It’s unlike other design languages out there because most of the design languages were developed earlier for older technologies.

Web Applications built with Material Design

Google is already using Material Design on most of their web applications. It allows them to be visually consistent from Web applications to Android apps, and adds a lot of the delightful small details such as transitions, motion, ripple effects, shadows and animations. Material design is quite well thought out on the Web applications as it is on mobile and the consistency is great. Apart of Google, there are plenty of web applications built using Material Design. It’s interesting to see how designers are adopting Material Design for their own web projects. Here is the list, featuring some of the best examples of web applications built using Material Design language.

1.Polymer Pitch Timer

Very simple web application built using Polymer and featuring material design elements. Contribute or download this app on Github. Application created by Tomoyuki Kashiro

Preview

2.What2see

What2see is a Polymer app built for DevFest Rome 2014 showcasing 700+ interesting monuments you can find in Rome. Application designed and developed by Claudio d’Angelis and available on Github.

Preview

3.Kitteh Anonymous

Anonymous chat room application in Material Design, build by Tomomi Imura. You can read full tutorial on how to create web app like this one.

Preview

4.Daily Stock Forecast

Daily Stock Forecast is a free service for day trading professionals created by Derek M Tishler. Application built with Polymer and Material Design.

Preview

5.Paperkit Framework

Material design framework. Built in plain standard vanilla HTML, CSS and JavaScript. Paperkit is still an alpha version. Developers can join this project and make their contributions

Hey! We are seeking collaborators! Wanna join a cool opensource project? Just reply to this tweet! Share to anyone that might be interested!

— Paperkit Framework (@Paperkit) February 13, 2015

Preview

6.Spotify Artist Discovery

Experimental project using Spotify API, Materialize CSS, jQuery Promises and jQuery Templates. You can use this web application as a base for your own project.
Project is available on Github.

Preview

7.Material Design Playground

Polymer material design playground featuring most (if not all) material design elements.

Preview

8.Contact Manager Material Design Web App

Simple web application in material design built with Angular and Polymer.
Available on Github

Preview

9.Polymer Shop

Example of shopping cart implemented with Polymer, Web Components and Material Design.

Preview

10.Kiosk Browser

This web application locks down the user interface so that the end-user isn’t able to adjust Android system settings or gain access to other applications. Build with MaterializeCSS framework

#app #inspiration #applications #webdesign #showcase #materialdesign #design #websites #examples

Share this:

• Facebook
• Twitter
• Google+
• LinkedIn