20

After Windows 8 came out all spoke about "Metro UI" and later about the "Flat design". Now, after Android Lollipop came out all speak about "Material design". Can somebody explain the difference between "Material design" and "Flat style"?

20

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

  1. Material is the metaphor
  2. Be bold, graphic, intentional
  3. 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.

  • In that Material Design, visually, uses a lot of flat design icons and styles, I'd say they are certainly related in that sense. Material Design, is, of course, more than the visual look as you point out, though. – DA01 Nov 4 '14 at 20:15
  • @DA01 Thanks, I tried to make my point more clear in the most recent edit – Zach Saucier Nov 4 '14 at 20:46
  • On a related note, this article is great for comparing iOS to Material Design and learning more about each. – Zach Saucier Aug 4 '15 at 14:13
5

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.

  • I don't think this goes enough into the detail of what they actually are. It seems to be more so what they're used on – Zach Saucier Nov 4 '14 at 20:47
  • @ZachSaucier right. The OP was asking mainly about the difference. I'd say the difference is that one is a generic term for a visual style, the other two are specific terms for branded UI guidelines. – DA01 Nov 4 '14 at 21:10
  • 1
    @DA01, just want to point out that Microsoft's UI has not been named Metro since 2012. It is instead called "Microsoft design language" source. I realize that OPs question mentioned it by this name as well but that's incorrect. – Hanna Nov 4 '14 at 21:31
  • @Johannes yep, that's a good note. – DA01 Nov 4 '14 at 21:34
  • Material Design can be used not only with Android but also Web design & Desktop app design. – vovahost Mar 8 '15 at 19:48
3

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.

http://www.google.com/design/spec/material-design/introduction.html#

-1

"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.

-2

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

protected by Community Mar 27 '18 at 16:51

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.