: What is the difference between "flat style" and "material design"? After Windows 8 came out all spoke about "Metro UI" and later about the "Flat design". Now, after Android Lollipop came out

@Karen819

Actually, flat design will appear more simplistic on the background of material, besides, all these animations are aimed more on user interaction with mobile devices, rather than with the site. In addition, no one prohibits the use of these two approaches in a single product, if approach the work on the design more consciously and philosophically. As for skeuomorphism, it tried to bring elements of the interface in a more familiar, user-friendly way: how this or that object would look in the real world, but many people have different views of the surrounding things, so creation of a single style of such approach was nearly impossible…Some information to add What's the difference:Flat Design vs Material Design

Vote Up Vote Down

@Correia448

Flat design

This is a type of design which is stripped of any multidimensional elements. That’s to say, it makes it feel like all the objects here are lying on a single surface. Flat design just got rid of any stylistic elements like drop shadows, textures, and gradients to be more like the play of fonts, icons, and colors.

Pros


Minimalistic and stylish.
Easily understandable. That is, your idea will be delivered to the masses better.
Focused on a content. No overly detailed UI elements which can distract users from really valuable things.
Looks equally great on different devices, be it a PC or a smartphone browser, and makes pages responsive.
Speeds up the process of website/application design by getting rid of unnecessary design strokes.


Cons


Can be too simple in some cases. If gone too far, flat design UIs can look very featureless and generic.
Can be limiting when it comes to the usage of shapes, colors, and iconography.
Not that intuitive. The users who lack experience interacting with web and mobile may find it difficult to understand the purpose of some of the flat design UI elements. That’s also true for some skilled folks. Thus, it can be inappropriate for complex web or mobile solutions.
Ubiquitous. The truth is, it could be really hard to stand out with flat design sometimes.


Material design

Material design was a response to a radical flat approach whereas flat was a reaction to heavy and overly realistic solutions. Material has just added what flat design was always running from – a little bit of skeuomorphism.

Pros


Minimalistic and stylish as well.
More intuitive. Material design is great both for experienced users and newbies.
Moderately skeuomorphic. Makes everything look more real due to the usage of Z-axis (a unique Google’s concept).
Has a set of well-defined guidelines which are kept updated constantly. So you always can refer to them if you have any difficulty working on the project.
Promotes animation for web solutions. It's useless to deny, people love action. Moreover, animation helps users grasp the UI better.


Cons


Owned by Google. So it will be kind of hard to improve something that you’re not satisfied with without asking the proprietor.
May take longer to implement than flat, because of Z-axis.
Motion can be very energy-consuming.
A constant adherence to the guidelines can negatively affect designer’s individual creativity.


To get more information about difference between flat and material design, I suggest to read this article: Flat Design vs. Material Design: How Different They Are

Have a look and good luck!

Vote Up Vote Down

@Chiappetta793

"Flat design" is as they explained you up there, and "Material Design" design is not realy "skeuomorphic" but "Skeuomorphed Flat Design". "Material Design" use flat things and align it in Z-axis to have a "3D Flat Design". I hope it helped.

Vote Up Vote Down

@Holmes874

Flat design = a generic term that refers to the trendy modern UI aesthetic of blocky flat icons and blocks of color.

Metro Design = Microsoft's new UI design (now called Microsoft design language) for Windows 8 that uses the flat design visual aesthetic.

Material Design = Google new UI design for Android that uses the flat design visual aesthetic.

(Note that both Metro and Material are much more than just about the flat design aesthetic. They also talk about interaction design, flows, pattern libraries, etc.)

Thanks to Johannes for noting the name change for Microsoft's UI.

Vote Up Vote Down

@Murphy569

Material design is unrelated to flat design in its principles. Material design is skeuomorphic in that it is an attempt to make web design more realistic in how it portrays elements, using layers and animation in a way that makes sense outside of the browser. Visually flat design and material design are similar at the moment, but material design can be applied to designs other than flat-like ones.

It follows 3 principles


Material is the metaphor
Be bold, graphic, intentional
Provide meaning with motion


Layering in material design is done through moving elements forward or back along the z axis, to and from the user, and adding realistic shadows to convey more meaning. Animating elements, such as having an animation affecting position when a list item is removed, is meant to improve user flow and understanding while making the experience more smooth. In doing so, more meaning can be portrayed through material design than in flat design

Google designers made paper models to figure out layering and shadows for their material design.

There are other design guidelines covering spacing, color, usability, and more detail about positioning and animation which you can check out in Google's webpage about the subject.

A good way to learn more about material design and how to implement it is to use the apps Google has created using material design and to read about the design details, this one is by Brian Lovin on the Inbox app.

People may assume that material design is a sort of extension of flat design, but in fact the principles are different. The current trend is to make clean, flat-like design which Google uses for now, but the principles of material design extend past those bounds and can be applied to other methods of design as well.

Vote Up Vote Down

@Cofer715

Material design is not flat, its a bunch of flat layers of "material" that are spaced out a little bit on the Z axis. This means that these objects have shadows and are supposed to come from somewhere when they appear on the screen and leave to somewhere when they are not needed anymore. Which means they don't just fade in and out.

There are also a bunch of design guidelines that specify the color, the spacing and many other aspects of your layout.

Here are some of them, but you can find much more with a few google searches.
www.google.com/design/spec/material-design/introduction.html#

Vote Up Vote Down