SALES / SUPPORT : 855-752-5503 (Mon-Fri, 09:00-17:00 EST)

Material Design – Going where Flat Design Hasn’t Gone Before! -

Flat Designs

The laws of physics don’t apply to the digital realm. That is why most web designs are flat or devoid of any physical aspects that would show us what they really are – mere illustrations.

To make users more attuned to the physical realm, and to help designers design with perfect balance, Material Design was created. Material Design is very much similar to flat, but for a subtle difference.  What’s the difference and how does it make up for the lack that flat design offers? That’s what we are about to find out.

What Is Material Design Anyway?

Material Design is a design language developed by Google with the purpose is to create a perceptiveness of physical objects in the digital world. Unlike flat design, which has been stripped of three dimensional elements, Material Design adds a little more skeumorphism back into flat design. Think of a design comprised of a couple of two dimensional planes that are floating above each other at varying levels.

Material Design
UI elements stacked behind one another in Material Design

In other words, it renders all of the buttons and windows behind a screen as pieces of cardstock. All this does is make each piece catch light and cast a shadow in 3D simulated space where a user’s fingers meet a screen. However, unlike paper, Google’s innovation can split in two, ripples with color and animation.

The primary aim of Material Design is to add an intuitive feeling of physical objects in the digital environments. However, it is less bound to visual cues and lean more towards how different elements of a web or app design would behave.

In order to get a better idea of this concept, here are some examples of web designs that incorporate Material Design UI brilliantly.  

Nexpic.co

Nexpic.co
Nexpic.co is a web application that enables users to share things they care about.

Android

Android
Google applied its new UI on Android Website

Related: Learn about other Extraordinary Logo Moments

What Is Flat Design?

In order to understand how Material Design makes up for the limitations of flat design, we must understand what flat design is. As the term implies, any element of a flat design looks like it is lying flat on a surface. Basically, any design that has been stripped of all any three dimensional elements is considered flat.

Here are a few examples of flat web designs:

Hell’O Baby

Hell’O Baby
The oversimplified icons, choice of colors and rounded edges are all elements of a classic flat design

Intercom

Intercom
The unobtrusive typography and stylistic icons make Intercom’s website a great example of flat design

Why Material Design Comes Out On Top?

How does Material Design make up for what is lacking in flat design? If the details mentioned above are considered, it is pretty obvious that Material Design has a far more enhanced UI as compared to its flatter counterparts. There are three aspects in which Material Design trumps flat design –

• Optimization Across Multiple Platforms

Windows 8
Windows 8 was designed indicative of flat design

Flat design is only meant for users who are attuned to digital interactions. Its main purpose is to use simple buttons, icons and color schemes to make it more efficient for users to find what they are looking for. And it does away with any sense of three dimensionality.

Material Design, on the other hand, encourages a reactive response from a user and therefore brings the design closer to its ability to connect.

Why is this important? Keep in mind, Google launched Material Design to solve its user experience problems. Before its transition from flat design, there was no practical way for users to keep up with a torrent of Google launches from Google Docs to Gmail and Google Drive. Android’s VP of design Matias Duarte sums the dilemma, “We had all these different screens sizes and platforms being considered separately. Web and mobile teams were optimizing for their one particular problems. But no one ever looked at the user journey, and how much burden they were creating.”

Google Docs
Google Docs redesigned as a Material Design

By launching Material Design, Google found a way to solve this problem. How? By unifying all of its products into one platform through Material Design.

• Clickability

The main problem with a design that is completely flat, is that it makes it harder for users to find clickable elements. Clickability wasn’t a problem before flat took over and designers used visual cues like gradients, raised edges or textures to indicate buttons that can be clicked. By transitioning to flat, web designers had to come up with the same solution. However, they were limited to use shapes, colors, contextual elements and proximity to do it.

Take a look at this flat design. Can you recognize which parts are clickable? Chances are you can’t, at least not without pointing the cursor at specific spots.

features Material Design
Fitbit’s website features Material Design

By utilizing the Z-axis, Material Design allows users to spot visual clues that tell them where to go or how to interact with the UI better.

Both material and flat designs incorporate minimalistic approaches. However, Material Design goes a step further since it meshes both the real and digital world by using skeumorphisms. It also does it subtly.

Slack Android app
Screenshot of Slack Android App

For example, you can see the button at the lower right corner of this screen on Slack Android is clearly a button without being overly glossy. The use of light and shadow is cleverly used to achieve this effect.

• Visual Cohesiveness

User centric design is king. And the main purpose of UX design, is to maximize usability by reducing the time and effort it takes for someone to make sense of say, a web page. Unfortunately, flat design is not always able to achieve this owing to the absence of a Z-axis.

Microsoft's Developer's
Microsoft’s Developer’s Network Website – Another example of Flat Design

As we can see from the flat design of Microsoft’s Developer’s Network, it would take a visitor more time to make sense of the different elements of this website.

Designs that adopt Material Design approach on the other hand, recognize the human ability to perceive depth and information hierarchies that are organized on a Z-axis.

Google Calendar app

Google’s Calendar app is a good example of how Material Design prioritizes visual hierarchy better than apps that have flat designs. This app gives a vertical layout and places the current day at the very top of the page. Days that are irrelevant are condensed. This way, Google streamlines user experiences to show only what is useful.

Will Material Design Take Off?

The main difference between flat design and Material Design is depth. If we compare designs that adopt the trend and those that stick to flat design, the former clearly stands out with regards to a friendly web design, clickability and visual cohesiveness. Will it take off? That remains to be seen. I, for one, would love to see how other platforms adopt Google’s design evolution.

Author Bio:    

Evan is an Expert in Digital Marketing. He has been working in the social media space since 2008, with a focus on design services, user interface planning, branding and more. Currently, he is leading content marketing efforts at DesignMantic and has played an integral part in the success story of DesignMantic through strategic marketing campaigns. Evan is also a design pro, who has shown a predilection towards DIY design projects.

2 thoughts on “Material Design – Going where Flat Design Hasn’t Gone Before!

  1. If I have a choice between the same mobile app designed with a flat design or material design, which one is consuming less battery power?

Leave a Reply