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

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

by Joe Shara on 14/08/2018

Updated at 8/02/2023

 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.


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.

If you need any help with your website or app design to hesitate to contact our web development agency. We run the best custom web development agency in Montreal.

Source : Montpellier Wis

Frequently Asked Questions

Flat design is a graphic design based on minimalism. Unlike realistic and/or detailed design, it eliminates elements considered decorative or superfluous such as shadows and 3D effects for example. It focuses on content and functionality.

It is a language that is visual as well as interactive that was created by Google. It is also an aid to design a graphical interface. It is called material because it is inspired by real objects like paper and ink.

- Is minimalist and fashionable. -More user-friendly and easy to use. -The skeuomorphic side that is used for a more understandable UX. -Provided by Google with a complete documentation that is easy to implement. - Ideal for web solutions.

-Minimalist is fashionable. -Accessible to the good understanding of users. -Saves time and performance, optimized UX. -Does not divert the user to something other than the content itself. -Adapts to any screen resolution.

Joe Shara

Joe Shara is a in-house journalist and Oshara editor. Tech savvy guy who follows all the latest web & digital developments. Loves cats and complex coding problems.

Was this article useful?

People Who Read This Article Also Read...

How to install a Laravel web application that you cloned from Git

Laravel is a powerful php framework that allows you to create custom web applications

How to install a Laravel web a...

Everything You Need To Know About Communication Agencies

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

Everything You Need To Know Ab...

12 questions to ask when collecting customer data

Collecting data from customers is an important marketing strategy since it gives you information on what customers exactly want instead...

12 questions to ask when colle...

How to fix Joomla Error 0 'Cannot open file for writing log while updating'?

Did you already try udpating your joomla website and you got this error : "An error has occurred. 0 Cannot open file for writing log" ...

How to fix Joomla Error 0 'Can...

How Netlinking Is Useful for Your SEO

With the aim of helping companies improve their notoriety through their blogs. Oshara Inc, shares his knowledge about Netlinking in thi...

How Netlinking Is Useful for Y...

How to obtain instagram certification?

Like Twitter and Facebook, Instagram offers the possibility for administrators of an Instagram page to certify certain pages. Oshara In...

How to obtain instagram certif...