With the launch of Android Lollipop, Google introduced the world to a new design philosophy called Material Design. While people have had varied reactions to this, most people are still confused and debating over whether it’s flat or skeuomorphic. It appears flat on the surface, but spending some time with it makes you think otherwise. So what is material design and how do we label it? Let’s find out!

^{First, a recap.}

“A physical ornament or design on an object made to resemble another material or technique” –Wikipedia

Skeuomorphic Design- Apple’s iBooks app

In simpler words, the design elements resemble their real life counterparts. An earlier version of the iBooks app for IOS demonstrates Apple’s fascination and use of skeuomorphism in its initial stage of application design. The screen is made to look like a 3D bookshelf housing all the books in the library.

“Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three dimensions (such as drop shadows, gradients, textures, or other tools that add depth) and is focused on a minimalist use of simple elements, typography and flat colors.”

-Wikipedia

iBooks app with flat design

The definition is quite straightforward and a more recent design of the same iBooks app shows how the world is moving to flat design (A rare occasion where Apple is following a trend instead of creating one!). There are no 3D shelves, just book covers and text on a flat background.

Clearly, the two philosophies are opposites to each other. Let’s now explore Material Design and find out the cause of all this confusion.

“If every pixel on the screen lived in a virtual world, what would the rules of that world be?”

-Google

The new calendar app built on Material Design

Google set out to make this new visual language with two major goals: To combine classic design principles with technology and science; and to create a unified experience across all platforms and devices.

The principles are simple. Material is a metaphor. It is inspired by the study of ink and paper. Every component is made to behave like a physical object. The principles of modern print design are used to guide visual treatments- content is bold and graphic. Motion has been given prime importance. It is based on physical principles to make objects feel real.

The material environment is 3D, with the x and y-axis representing the width and height of the screen respectively and the positive z-axis extending towards the user. Every sheet of material is 1 dp thick but can have varying x and y-axis values. Lights and shadows are used to show the relative positions of material elements on the z-axis.

Material Environment

The content of the material doesn’t affect its thickness. It is solid, and input events, as well as other material, cannot pass through it. No two material elements can occupy the same point in space simultaneously. It can change shape, grow and shrink, but can never bend or fold.

Bold, flat colors on muted environments, bright color palettes consisting of primary and accent colors, graphic and intentional imagery and large typography dictate the style guidelines for Material Design. This makes the interface simpler, brighter and cleaner.

The bold and graphic Google Play Music App

The in-app icons are flat and minimalist, while product icons are crafted keeping in mind the physical qualities of material. The cuts, folds and lighting imitate actual paper.

Animation is an important part of Material Design. It serves multiple purposes.

It lends realism to the environment. To achieve this, we assume that objects have mass and weight. Adhering to the laws of physics, they only move or stop when force is applied to them, and this movement is gradual and dependent on the object weight. Objects accelerate, reach a peak velocity and then slow down as they reach their destination. The exception to this is when objects enter the screen from outside the screen boundary and we assume that they have reached peak velocity before entering the screen.

Realistic Animations

The energy of the system tends to come from the user. That’s why you’ll see radiating animations when tapping objects. The surface reaction is used to provide feedback to the user for changes that have just occurred.

Surface Reaction and Material generation by the user

The material also responds to user interaction. The material can lift up when touched, indicating an active state. Also, material generated from direct user interaction appears from the point of touch, visually tying both of them.

Transitions are meaningful and provide visual continuity, guiding the user’s attention. Motion supports information hierarchy. The most important information moves first and the least important the last.

Information Hierarchy

Having explored the three design philosophies in question, we can safely say that Material design is neither flat nor skeuomorphic. While the backgrounds, buttons and other screen elements are themselves flat, the use of z-axis and hierarchical positioning of objects suggests that it cannot be considered flat.

It has the best of both worlds. It takes the minimalist, clean and content-centric approach of flat design without being boring or ambiguous.

Also, the realism of elements that skeuomorphism advocates is implemented in a better way. Instead of merely making objects look real, they are made to feel real through physics-guided animations. This results in an immersive user experience.

The best way to describe it is by its name itself, hence the Superman analogy in the title- It isn’t flat, it isn’t skeuomorphic, it’s Material Design.