The two main streams of design: Flat design and Material design

by Alexandre Vincent on 20/09/2018 |

Two months ago, we talked about the importance of investing in a good visual identity. Today we are going to talk about the two trends of design that we use today in the digital world: Flat design and Material design, two styles that are both similar and different.



Whether for Flat Design or Material Design, all the digital interfaces we use today (Smartphone, tablet, computer, etc.) are modern and sleek. But that has not always been the case, and it is important to know where we are from.

* The first stream of design: Skeuomorphism



It was during the presentation of the very first iPhone in 2007 that the first stream of design in digital is recognized: Skeuomorphism. A style that is characterized by elements of computer interfaces reproducing the aesthetics of real physical objects. The idea was to create the most intuitive and familiar interfaces possible for casual users. In short, Skeuomorphism was conceived in order to accustom users to the transition from the real to the digital.

We recognize this style in particular by its realistic side vis-à-vis the real with shadows, reflections, or textures of reality such as leather, paper, or wood in order to give easily accessible benchmarks to the real world. 'user.
But since 2013 until today we know design styles that push simplicity even further. Nevertheless we still find the skeuomorphism in the field of production of video games, or in the interfaces of computer-assisted music (MAO).

* The arrival of Flat Design



Flat design has been designed to improve the intuitiveness and handling of skeuomorphic interfaces. Literally "flat design", it consists of the combination of two-dimensional graphic elements (icons, font, colors, etc.). It puts aside anything that is not used directly to read the interface to make it as simple as possible. Shadows, gradients, textures, everything is abandoned to make room for simple shapes and solid colors. (see below the difference with skeuomorphism.)


But intuitiveness is not the only argument of Flat Design. It's also a question of loading speed. Indeed, Skeuomorphism was overloaded with textures and graphics that slowed down the application's performance and loading times.
Another advantage of Flat design is that it is designed to create intuitive interfaces with any screen resolution. Microsoft, a pioneer in the field of Flat Design is a very good example especially with the latest versions of Windows. Because the objective of these latest versions was to adapt the operating system for smartphone and tablet.
Unfortunately, we must believe that the use of Flat Design to create a cross-platform OS was not a relevant idea. The user experience was not good because there were too many similar elements, and it was difficult for some people to complete their actions. Clickable elements differed badly from non-clickable text and icons. Microsoft has failed with its project of "Windows Phone" but will catch up brilliantly with Windows 10 that we all know.
Apple will be the first to succeed with Flat Design with the arrival of iOS 7 in 2013. Unlike Windows, Apple has reviewed just reviewed its existing designs and made various corrections. In particular, they added solid colors and removed the shadows. Users had no trouble finding their way around and could really appreciate these new interfaces. iOS 7 was treated to great public and critical acclaim.

* Google enters the scene with Material Design.



On June 25, 2014, at the Google I / O conference, Material Design is presented for the first time. Material design is a set of design rules proposed by Google that applies to all interfaces of its software and applications, including Android since version 5.0 of the operating system. By creating Material Design, Google was willing to have its own graphic identity on all of its products.


The basic concept of Material Design is paper and ink. This style of design favors animations, transitions, depth effects such as lighting and shadows (boxshadows) while keeping the graphic base of Flat design. Material design compiles everything with an intelligent grid system. Indeed Google wanted to correct some errors from Flat design. As said before, Microsoft had failed in its UI design because of the confusion between clickable elements and non-clickable elements. Google has tried to solve this problem by adding shadows in their design. Two-dimensional objects become three-dimensional objects allowing the user to better distinguish clickable elements.
In summary, Material Design takes the great codes of Flat Design by adding, in a moderate way, characteristics of Skeuomorphism to add usability and readability to its visual identity.

* Flat design VS Material design: advantages and disadvantages
Now that we've mentioned the main trends in design in recent years, let's make a comparison between the two main styles, Flat Design and Material Design.

The advantages of Flat design:
-Minimal and fashionable.
-Accessible to the good understanding of the users.
-Gain of time and performance; UX optimized.
-This design does not divert the user to anything other than the content itself.
-The Flat design adapts to any type of screen resolution, which is ideal for responsive design.
The disadvantages of Flat design :
-The simplicity is not necessarily the solution to everything.
-The flat design by its very "flat" appearance may seem boring if it is used incorrectly.
-Not always so intuitive that it looks, especially for inexperienced users (see the case of Microsoft).
-The Flat design is much too fashionable, which becomes tiresome. Moreover it is difficult to stand out nowadays with Flat design.
The advantages of Material design :
-In the same way as Flat Design, Material Design is minimalist and fashionable.
-More friendly and easy to use. Indeed the material design is a great idea because it adapts to any type of user who is used to digital or not.
-The skeuomorphous side that is used in the service of a UX more understandable.
-Material design is provided by Google with a complete documentation simple to put into practice.
-The effort provided by Google in relation to animation concepts that bring a plus to UX, and which are ideal for web solutions.

The disadvantages of Material design :
-A surplus of animation can cause drops in speeds in the applications, as well as an overconsumption of energy on your device.
-Material design is the property of Google. It is therefore difficult to add a personal touch without the authorization of the rights holder.
-What brings us to the next point: If Google has the rights to the most used design style today, one may wonder if creativity and originality will not be in danger in the coming years.

*Conclusion


Flat design and Material design are two styles that are both similar and different. The preference of one or the other is only a matter of taste and bias. All we can say is that Material Design has been designed in a way in response to Flat Design by creating an alternative to the flat aspect of the Flat while adding a pinch of skeuomorphism to add relief.
Some will tell you that Material design is genius while others will be more likely to say that Material Design is the Flat Design of the Google brand.
At Oshara we keep abreast of trends in design. Because we attach great importance to the visual identity we design for your digital projects. Because a project of quality, is a project having its own identity. An upcoming article on the current design trend would interest you?


Source : Montpellier Wis

Was this article useful?

People Who Read This Article Also Read...

A communication agency everything you need to know

A communication agency everything you need to know

By definition, a communication agency (marketing) is a company that plans and harmonizes internal and / or external communication on be...

A communication agency ev...


Good or bad idea invest in a good visual identity

Good or bad idea invest in a good visual identity

Complicated to find something more important than visual identity in business communication. The visual identity of a company is the fi...

Good or bad idea invest i...


6 tips to protect yourself on Internet

6 tips to protect yourself on Internet

You have often heard about identity theft events or even know relatives who have been victims of identity theft. So you know there's a...

6 tips to protect yoursel...


Marketing and advertising no more confusions

Marketing and advertising no more confusions

We are often asked whether there is a difference between marketing and advertising. What needs to be understood is that while marketi...

Marketing and advertising...


The two main streams of design: Flat design and Material design

The two main streams of design: Flat design and Ma...

Two months ago, we talked about the importance of investing in a good visual identity. Today we are going to talk about the two trends ...

The two main streams of d...


Get Blueprint Facebook Certification

Get Blueprint Facebook Certification

Follow our tips to find out how and why you can get BluePrint Facebook Certification.

Get Blueprint Facebook Ce...


Processing.....