Dribbble Shots: Material Design Inspiration

Recently Google introduced the new design wave called material design. Generally it's a combination of various notions and design principles we've already seen but never used that as a complex. Originally material design was created for Android. But lots of designers have already grasped this idea and used it in website they create.

Further we're going to have a detailed talk about material design, it's basic principles and share with you number of newely created "material design" things, these examples were borrowed from the primarysource, from designers who share their projects at Dribbble. Let's start.

What's a Material Design

According to Google material design is a unifying theory of a rationalized space and a system of motion. In the following video presentation you can find out about the new design language in action, with radically redesigned versions of Google's apps for Android and the web, including Gmail and Calendar.

Principles of Material Design

Material

Material is grounded in tactile reality, inspired by the study of paper and ink, yet open to imagination and magic.

* * *

Surfaces

Surfaces and edges provide visual cues that are grounded in our experince of reality.

* * *

Dimentionality affords interaction

Due to fundamentals of light and surface realistic lighting shows seams, divides space and highlights movinf parts.

* * *

Adaptive design

Each device reflects different view of the same system, each of those views is tailored to the size and interaction of appropriate for a specific device.

* * *

Bold content

Bold design creates hierarchy, meaning and focus.

* * *

Color, surface and iconography

User action is the essence of the design experince, primary actions are the inflection points which can transform the whole design.

* * *

Users cause changes

Changes derive their energy from user actions.

* * *

Animation

All actions take place in a single environment, objects are presented in a way that it's not loosing continuity of experince.

* * *

Motion

Motion is meaningful and appropriate.

* * *

These were the basics of the new design principle introduced by Google, now let's have a look how designers have implemented these techniques in their creations. As I already said all examples were borrowed from Dribbble the social network where designers all over the globe brag with their UIs, freebies, fonts or anything else they create.

Best Dribbble Shots of Material Design

Material Design with Framer.js

* * *

Material Calculator

* * *

Emailer

* * *

Evernote Redesign , Material Design

* * *

Aerospace Material Client Redesign

* * *

Material Design Chat

* * *

Music player Material Design

* * *

Airbnb Card

* * *

Spotify Material Design

* * *

Facebook Material Design

* * *

Material design in the I/O app

* * *

Material Design'ish - Mock Up

* * *

Button

* * *

Hope you enjoyed examples provided. If you think that something is missing feel free to drop your ideas in the comments below. Have a great day.