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"?
Add a comment
|
5 Answers
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.
answered Nov 4, 2014 at 19:52
-
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.– DA01Commented Nov 4, 2014 at 20:15
-
@DA01 Thanks, I tried to make my point more clear in the most recent edit Commented Nov 4, 2014 at 20:46
-
On a related note, this article is great for comparing iOS to Material Design and learning more about each. Commented Aug 4, 2015 at 14:13
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 Commented Nov 4, 2014 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.– DA01Commented Nov 4, 2014 at 21:10
-
1
-
-
Material Design can be used not only with Android but also Web design & Desktop app design.– vovahostCommented Mar 8, 2015 at 19:48
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#
"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.
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
