20 Creative Interpretations of the Material Design Guidelines
Oct 25th, 2017
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.
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.
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.
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.
This fashion app utilizes some beautiful, innovative user experience experiments. The design is highly visual with full-size imagery and unique overlay controls.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.