Flat Design and Material Design Are The Same… Oh Are They Really!

The UI design industry has come a long way in the last few decades. We’ve seen designers using real-world elements to give a realistic look to the User Interface (UI), i.e. Skeuomorphism. Since it was first introduced in Apple devices, it was pretty well-received by the masses. Unfortunately, its popularity, like any other trend, did not last very long.

Flat Design was introduced through Microsoft’s Metro UI, which came into existence with the launch of Windows 8. As soon as it was unveiled, it knee-jerked the skeuomorphic themes down the hole immediately as it rose to power. You might know what caused the prominence of flat design, but just for clarity let me restate why. This new design dominated the UI throne not just by the tag of its brand, but by winning over the users with its minimalistic, elegant and focused user interface.

Fast forward to present, Google also decided to jump on the bandwagon of custom design language when it announced the launch of its Android OS Lollipop, at its 2014 I/O event. The design it introduced is now considered by some as the most dynamic and powerful, and they named it Material Design, a.k.a. Quantum Paper.

Flat vs Material Design

The Great Battle of “Confusion”

On the face of it, Flat and Material design look the same. To the untrained eye, both have minimalistic elements, flat squared boxes and colors. However, when we go into the depths of it, we find that the two actually sport different principles as well as purposes.

Basically, flat design is the complete opposite of skeuomorphic design, mainly due to the lack of all the stylistic or 3D objects. Material design, on the other hand, keeps some stylistic elements but not the skeuomorphic ones, yet it also retains the minimalistic appearance of a flat design…

It’d be much better if I show you a visual comparison of these three major designs:

Skeuomorphic vs Flat vs Material

Still Need More Enlightenment…? Thought So!

For many, the above example might not be enough to resolve the confusion between material and flat design. To put an end to this long-debated confusion, we’d first need to go all the way back to skeuomorphism design, and start things from there.

The Rise and Downfall of Skeuomorphism

Skeuomorphism, if put into simple words, is a design concept that tends to imitate worldly objects in the digital settings. Its purpose is to give you a realistic feel of using lifelike objects on your mobile or web interface.

iBooks app, for example, uses a bookshelf that looks like a real-life wooden shelf where you can showcase your favorite books. You can see here how the 3D wooden-texture of the shelves make it seems more lifelike and nostalgic.

iBooks App

This one doesn’t need any explanation at all. Or, does it? Shutter…Camera shutter. Anyone…?

Camera Shutter iOS

All in all, skeuomorphism was designed to make the transition, from bar phones to smartphones, easy for users. In short, it was made to make us familiar with the new smart-screens, when they first came out.

Eventually, people became so used to their smartphones that they no longer felt the need of real world references, as first pointed out by Jony Ive, the Senior Vice President of Design at Apple, “we understood that people had already become comfortable with touching glass, they didn’t need physical buttons, they understood the benefits”.

Plus, it met with negative critical reception when responsive design started becoming popular. The design felt like overly-decorative design that lead to excessive space consumption, unnecessarily lavish use of elements that would take too much loading time, and lack of scalability on cross devices. Ultimately, designers began to leave skeuomorphic design for a more minimalistic and flexible, yet fully-functional look, i.e., flat design.

The Ever Popular Trend of Flat Design

Though the Earth may not be “Flat” as wrongly assumed by some pre-Socratic philosophers, the current User Interface certainly is - be it of an App UI or a Website.

Flat design is one of those trends that tend to surface every few years or decades, thanks to its timeless elegance. These designs tend to run in the opposite direction of skeuomorphic design, in that they neither require 3D looking objects nor do they need heavy décor to attract users.

What makes a flat design preferable over skeuomophism is that it is more focused on the functionality rather than the aesthetics. The neat and simple colors and iconography let users easily identify the action elements on the page. Plus, it allows you to offer your users a fast surfing experience.

Talking about its visual presentation, when you see a flat design, the design or template looks as if it has been bulldozed and all the objects on the surface have been leveled to the ground. I think it’s a pretty good analogy… isn’t it?

Regardless, here are some examples that will clarify my point:

Colorful Flat UI by Christina Style
Colorful Flat UI

Maleo by CreAtive Web Themes
Maleo

As you can see in the examples above, there are no glossy buttons, no stitch-like patterns, no bevel and emboss, and nothing that would give the design a 3D impression - there’s only a flat surface with simple navigation menus and plain yet attractive colors.

The Emergence of Material Design

Finally understood what skeuomorphism and flat designs are and what makes them different? Now, allow me to throw some light on the long-awaited material design discussion and what makes it different from the aforementioned… flat design.

Basically, Google launched Material Design with the primary purpose of creating a visual design that “synthesizes the classic principles of good design with the innovation and possibility of technology and science”, as mentioned on its website.

MATERIAL DESIGN Animation

Still, what makes it different from flat design?

Upon simple inspection of the definition and examples of flat design above, you might have noticed that flat design works only on X and Y-axis. Secondly, it doesn’t use any stylistic elements or effects for any added décor.

The governing factor that makes material design different from flat design, is the use of Z-axis in the designs. The Z-axis obeys the first main principle of a material design language that defines Material as a Metaphor - an object. The design offers visual hints and nods that define the structure of the object that gives you a feeling that a plain object is floating over a surface.

Plus, it uses the stylistic materials – the second principle – that it is not only used for mere aesthetics but to let the users easily identify the position of the elements on the UI that were once ignored in flat design. As Google said on its Material Design page, that styles “create hierarchy, meaning, and focus”.

Another important thing that makes it an elite-force of its own is the addition of animation principles to it. Though the transitions that material design features are gorgeous, they are in no way intended to add only glamour to the design.

Other than the added pizzazz, animation is integrated into the design to inform users of their actions against the intended element. The Material Design Motion principle uses the real-world principles that make interaction with the UI feel real to users.

There goes the third strike that erects a huge wall between flat and material design!

Conclusion

Some people assume that material design is just an extended version of flat design, while some believe that it is the blend of both flat and skeuomorphism. Regardless of anyone’s believe, the fact prevails: It isn’t either.

Material plays a game of its own, with the rules distinct from that of flat or skeuomorphic designs. It is the finest version of a visual language that although incorporates the best (concept) of both the previous designs, but sets its exclusive principles. In short, material design is not, and I repeat, neither flat design nor it is an extended version of it.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.