Flat Design vs Material Design: Similarities and Differences

Until recently we only heard about flat design, but a time now, there is a new concept that is being imposed with force: the material design. Surely anyone with an Android device knows full well what I’m talking about. With the new update (5.0,) its design has changed including this new trend.

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

When comparing the two we have several questions such as whether one is better than other or when we can use each one of them. After reading these certain points, this will be much clearer. But as always, we have to start from the beginning. We want to remember why the flat design appeared and the “realism” ended. 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 material design.

Realism (Skeuomorphism)

If a minute ago we discussed the use of the flat against the material design, in the case of realism the battle is lost for a long time (luckily.) The use of realistic and Baroque elements downplaying the points that really should stand out is in the past.

This decision not only due to the aesthetic (as in the case of graphic design,) but also to the functional: improving loading speed and usability of the web. Realism is behind us and we go for a design that expresses a lot in a few lines.

Flat design

What can we tell you about Flat design at this point! It began, as we said, as a design that broke with the above, leaving behind all those elements that contributed nothing as shadows, gradients and textures to focus on icons, fonts and colours.

Its use is based on functionality: the most important thing is that the design fulfills the function for which it was designed. So loading speed increases and gets it to look in an optimum way regardless of screen resolution. It gets things easier for both designers and users.

We love the flat design, 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. We look for simplicity with the fewest lines.

Pros

• The designs are much more agile and are leaving behind unnecessary graphic elements.
• This considerably increases the loading speed resulting in a happier user and less bounce rate.
• It is much easier to make the sites “responsive” as they are much simpler with little load on the graphics.

Cons

• Misuse of it can make your site too simple or monotonous. Flat design is not synonymous with boring, so if the result is that, you’ve misunderstood.
• The lack of relief requires visual cues to guide the user. With no raised edges the user can find it difficult to know if something is 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 a 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 the flat cannot give us.

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.

The material design includes other factors that in the case of the flat did not exist such as: depth, surfaces, edges, shadows … interlinked in a logical manner in which objects overlap but cannot be crossed each other. So these are the two distinguishing features:

Shadows and light

Although it keeps many similarities with the flat design, fonts, order … It has an important difference and that is the inclusion of shadows and light giving rise to a hierarchy that in the case of the 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 will know if it is above or below it, depending on the projection of the shadow. It leaves behind the Baroque that realism offered, becoming flat bottoms that even making shade, are reminiscent of the flat.

Animations

Perhaps the main difference with the flat design is the use of animations. Not all is static now; there are floating buttons where we can appreciate the different speeds.

Pros

• By including a new dimension it 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 are designing.
• Animations are good to use to extrapolate to other parts of the design.

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 make our website or application looks like too much to the design of Google.
• Being so clearly marked the guidelines we cannot use creativity so much.
• 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 did not pleased the material design, because in most cases I do not find necessary the animation effects and I think they could be simplified even more. But I understand that sometimes they make navigation easier.

Personally I would choose a mixture of the two, in which we take the design improvements that material design can give to the flat. If you do not like animations and you are not going to use them in your design, it is normal that you approach closer to a flat design. If instead you would like to include them, you must engage the material.

In general, I choose the flat design. In fact the first time I used the material design I thought “it looks like the flat design but it is more complicated.” When you use it you realize that there are some elements that enhance usability and allow us options the flat did not have, but still…

Which one do you choose?