Flat Design vs Material Design – Similarities and Differences

If until recently only heard very little talk about the flat design, a time now, a new concept that is being imposed with force, the design material. Surely anyone with an Android device knows full well what I’m talking about. With the new update (the 5.0), its design change including this new trend.

While that is a concept “invented” by Google to design the operating system, as happened with the flat design has spread to the overall design and we can see it applied for example on websites, apps, video games … For this We not want to miss the chance to make a little comparison with the flat design, because from my point of view, have much in common and we could not understand the material without the prior existence of flat.

When comparing the two we come several questions such as whether one is better than another or that case each use. After reading these certain points than that is much clearer. But as always it’s back to the background, remember that began flat design and thus the end of “realism.” Let’s begin!

NOTE: We know that you are a great expert in flat design so we will do a brief and then we will study the design material.

Realism

If a minute ago we discussed the use of the flat against the material design, realism if the battle is lost long ago. I stay behind the use of such realistic elements and Baroque downplaying the points that really should stand out.

This decision not only due to the aesthetic (as in the case of graphic design, but also to the functional: improved load time and usability of the website. Realism is behind us and go to a design that expresses few lines long.

Flat design

That we are going to have at this point not know the Flat design! He began, as we said, as a design that broke with the above, stripping it of all those elements that contributed nothing needed as shadows, gradients and textures to focus on icons, typography and color.

Its use is based on functionality the most important thing is that the design fulfills the function for which it was designed. So load time speeds up and gets it to look in an optimum way regardless of screen resolution. Gets things easier for both designers and users.

To us the flat design we love and as you can see most of our templates for WordPress and our logos are designed under the trend “Less is more” and we like it that way, looking for simplicity and simplicity with the fewest lines.

Pros

• The designs are much more agile and are stripped of unnecessary graphic elements.
• Thereby considerably it decreases the charging time resulting in a satisfied user and less attrition rate.
• As much simpler sites with little load on the graphics, they are much easier to do “responsive”.

Cons

• Misuse of it can make your site is too simple or too monotonous. Flat design is not synonymous with boring, so if the result is that, you’ve misunderstood.
• The flatness requires visual cues to guide the user. With no raised edges the user can make it difficult to know if a button or a selectable object.

Material design

As we started talking about in this article, the creation of the material design is determined by the flat design, to be this, for some critics, something short of what design is about.

Perhaps in flat design all elements of realism are removed, leaving too simple design. This can be beneficial for graphic design and elements such as signs or logos, but for web design, in which the user has to interact, we find elements that need something more, that does not give us flat.

The material design, as its name suggests is based on material objects. We could say that they are several simple geometric pieces (usually rectangles and circles) placed in a particular place and a particular movement.

Depth, surfaces, edges, shadows … interlinked in a logical manner in which objects overlap but can not be crossed among themselves and other factors, that in case there were such as flat included. So these are the two distinguishing features:

Shadows and light

Although many similarities with the flat design, careful typography, order … have an important difference is that the inclusion of shadows and light give rise to a hierarchy that in the case of flat design was not so clear.

For example in the case of the shadows they are used to determine the different positions of the objects. According to the tone of it we know if it is above or below it, depending on the projection of the shadow. This is stripped of Baroque realism offered, becoming flat bottoms that even making shade, reminiscent of the flat.

Animations

But perhaps the main difference with the flat design is the use of animations. Now everything is not static, there are now floating buttons you can appreciate both directions at different speeds as they appear.

Pros

• By including a new dimension becomes easier for the user’s understanding of the hierarchy. At first glance it is much easier to understand.
• Possessing standards for almost every detail is readily usable for whatever device we’re designing.
• The animation is strong to use to extrapolate to other parts of the design point.

Cons

• As we started saying in this article, the design material is an invention of Google, which is intrinsically linked to it. If we follow their guidelines we can fall into our website or application looks like too much to the design of Google.
• Being so clearly marked the guidelines, we can not use both creativity.
• Animations clearly make more battery consumption.

Conclusions

As you can see both have much in common. Excluding the realism and going towards a clean and simple design, which increases the functionality and usability.

At first I was not convinced the design material in most cases not find it necessary or animation effects and I think could be simplified even more. But I understand that sometimes like shadows nest elements and make navigation easier.

Personally I advocate a mixture of the two, in which we take the design improvements can make to flat materials. If you’re not convinced animations and can not use them in your design, it is normal that you approach closer to a flat design. If instead you would like to include, you must engage the material.