20 Creative Interpretations of the Material Design Guidelines

Material Design is an incredible system which details every aspect of a user interface, from spacing and positioning, to styles and visual language. It’s typically in the users’ best interests for designers to abide by these guidelines as closely as possible. This then ensures consistency of design language across entire systems like Android.

Material Design Guidelines, however, are just that: guidelines. As a result, designers can interpret them however they like, within reason. While this does reduce consistency, it opens the door for a wide-ranging and diverse selection of apps and web-based products. Some of these are incredibly inspiring and innovative, leading the way in terms of what we can expect from product design moving forward.

In this article we are going to compile a list of the 20 most creative interpretations of the Material Design Guidelines. We’ll focus on mobile Android applications as a platform for showcasing these designs.

Strelka App

This Android app uses a high-contrast color palette combined with a visually impressive background area consisting of gradient shapes. It employs plenty of depth and uses no dividing lines to create a sense of continuity throughout the design.

Go to website

 

Starting a Business

This app for starting a business is exceedingly clean in its design and uses multiple instances of gradients throughout the card elements and backgrounds. The typography consists of very thin title text which combines with the gradients to produce a clean and refined design language.

Go to website

 

Task App

This next example is another to do away with any sort of dividing lines. It results in a beautiful continuous design which is ordered and separated using visual effects like color and depth.

Go to website

 

Fashion App

This fashion app utilizes some beautiful, innovative user experience experiments. The design is highly visual with full-size imagery and unique overlay controls.

Go to website

 

App for payment

As a payment app, it’s important to make the send and receive options clear and at the forefront of the user experience. This app does just that while combining beautiful design elements like custom VISA card templates and clean iconography throughout.

Go to website

 

OTP SCREENS

A beautiful two-tone black and white color scheme graces this OTP app. It results in a highly visual design language and contrasts perfectly against the custom illustrations and bright red and green primary action colors.

Go to website

 

Photo Gallery for Flight Booking app project

This flight booking app takes many layout cues from Material Design, while furthering the direction with some stunning visual tweaks to the buttons and carousel. The design is consistent across both iOS and Android, taking elements from both to produce a highly-refined product.

Go to website

 

Selina Filters

Selina app does away with much of the depth styling we have become accustomed to with Material Design. In its place is a much more refined style which uses depth elements much more sparingly and limits color usage to active user interface element states only.

Go to website

 

IoT Prototype

One of the most outstanding interpretations of Material Design is this data visualization prototype. The graphs use emphatic, bright colors and gradients throughout. Combined with some subtle illustration designs, the cards contrast perfectly against the night theme.

Go to website

 

Arrivert

The Arrivert app is both minimal yet impactful. It has effectively switched the color palette to use the background as the main visual element. Contrasted with the white content cards and extended to the full width and length of the screen, the result is impressive.

Go to website

 

Sync FAB Expansion

This particular Android app design is special in the way that it presents highly visual graphics in the app background. The colors are cohesive and the header produces a semi-transparent overlay which provides continuity as the user scrolls the interface.

Go to website

 

Property App Home Versions

This very refined app design combines sans-serif typography with mono typography throughout. It’s a beautiful combination and provides some visual separation between pricing and property data, and user interface elements.

Go to website

 

HSBC Banking App

This clean concept design for HSBC extends the background from edge to edge. The resulting layout lacks a defined header area and replaces it with a more free-form layout with the navigation, logo, and title all stacked vertically.

Go to website

 

TODO App

This app uses an abundance of visual design elements, from gradients and drop shadows, to graphical backgrounds and thick iconography. Despite the potentially overzealous combination of visuals, the elements are well-spaced and work well together.

Go to website

 

Worksheet App

Another highly visual example is this worksheet app. The two-sectioned interface uses a variety of stunning gradients and overlapping elements. The result is both unique and the hierarchy is easy to understand.

Go to website

 

Plaid Activity feed

Plaid’s app uses a primarily flat design language, by Material Design standards. Instead it uses color and typography as a primary way of separating sections. The pink floating action button stands out perfectly as the only drop-shadowed element.

Go to website

 

Cards Qonto Android

With a design direction slightly more akin to that of a stock Android app, Qonto uses a clear hierarchy of elements and a minimal tab bar. The color combination of green, purple and yellow work together perfectly.

Go to website

 

Blog App

This blog app for Android offers a unique take on the position of the floating action button and tab icons. It’s a very informative and colorful design with plenty of attractive content and graph elements.

Go to website

 

Fitness App

This wonderful night-themed app offers some of the most incredible visual elements to be seen in an Android app. The gradients pop against the navy background and the subtle glowing overlays and blurry drop shadows add to the futuristic direction.

Go to website

 

Onboarding

This Material onboarding uses a great deal of spacing and well-positioned illustrations and typographical elements. The colorful illustrations use design language from Material and combine beautifully against the otherwise minimal setup.

Go to website