Flat design vs Material design

In January, we wrote about the flat design, history of the appearance and distinctive features. In addition, it was mentioned casually about his future incarnation – material design. In this article we will look at the pros and cons of the two types and try to figure out: is there a difference between them, or material design is just a refine continuation of  flat design?

Flat design

Flat design appeared as a an alternative to existing, but which has become too cumbersome in work, design. And if, at the beginning of 3D design, realism and skeuomorph give the user an answer to the question “how does the visualization of the virtual world?”, But over time became too massive, and were not needed – the user has learned to determine the importance of this or that element.

Flat design is based on a maximum simplicity and rejection of such graphic means of expression, as shadows, gradients and textures. The flat design come first icons, colors, fonts and colors, which are due to the minimalist interface, it becomes easier to pay attention.  In the first place it face icons, colors, fonts and colors, which are due to the minimalist interface, it becomes easier to pay attention.

Flat design – it is a kind of philosophy of intuitive graphical interface. The basic principle is that user himself can determine, which item should function without relying on the tips, such as was the case with the realism of the image.

Pluses of flat design:

Identity graphics on all devices.

Speed. Rejecting the skeuomorph, designers significantly improved the speed of appearance of the images.

Minimalism components, which improves the performance of websites as laptops and smartphones.

Adaptability, which allows you to create a friendly Design for the Web and applications.


Minimalism, which has been popular for several years in the interfaces, greatly influenced the development of flat design. Last gravitates to using a limited number of colors and shades, graphics and an expressionless shadows.

Interface, which uses only the simplest elements, loses its individual features and recognition.

-For some applications and sites require a more expressive visual features to improve the user experience. The lack of such in the form of design – its key flaw. Without convex elements or shadows much more difficult to figure out which of the elements is intuitive.

Material design

As we have noted, speaking about the shortcomings of flat design, after a while it began to seem to many designers and users too impersonal, carrying the minimum graphical base. Material design appeared at the junction of the existing styles: flat design and rethinking skeuomorph.

From the first he took the overall visual appearance, from the second elements, but not artificially showing the world, and working according to the rules of physics.

Advantages of material design:

Return three-dimensional image plane. Shadows, that were unacceptable for a flat design, help to understand the structure of the interface and simplified user interaction.

Animation and animated details. 5 version Android, Lollipop, as material design as a whole, inherent the animation. Small elements (icons, pointers), that “come alive” on the screen, in contrast to the static flat, increase conversion and customer experience.  A key feature animation in the material design – constant intuitive. That is, users are made aware of actions. Animated details sequentially displayed each stage of work with the application or website in a particular period of time.

Release of detailed guidance for Google material design, that helps to understand its essence, thus speeding up the development of applications and websites based on it.

-The principle of adaptability. He appeared in a flat design, and then in the Google design concept of “Kennedy”, who have realized, that need collect the entire user experience into a single interface. But, if visually designers were able to achieve good results, differences between desktop and smartphone screen was still great.

Development of the basic rules of material design allowed to implement adaptive versions for different devices. Given the fact, that the interface design in the material consists of block designs, you can virtually change their positions easily, changing in size, that is, to set certain limits for a particular display.

In addition, adaptability depends on the amount of information available on the screen. If it is not large in size, the smaller the data, we can obtain. Therefore, some content has to endure, and some hide behind other interface elements. This practice has applications that are adapted to run on a smartphone.

Minuses of material design:

It is generally accepted, that material design – a harmonious balance between skeuomorph and flat design. For the first type was characterized by realistic graphic interface, the second simplify the “digital environment”. Material design though it is considered an offshoot of the flat design nevertheless incorporates such features as “effect of digital paper / ink.”

But liked this combination came not for everyone. The three-dimensional and animation details many of the designers and users is not accepted. In their view, these effects create the visual effect of oversaturation interface. And animation “brakes”, many sites and applications.

-The detailed rules set out in the guide for Google Material Design, and may have the effect of “reverse action”: this kind of design will cease evolve, stuck among constraints.

-Inefficient use of space interface. Irrational use of the interface space is constant discussion in the ranks of designers and ordinary users. Actually, presence of voids on the screen, the object is indeed controversial, because preferences are different. Some users need to complete the mapping data. They claim that the infinite scrolling frankly on your nerves, and prefer content with a clear structure.

There is also the opposite view. The other part is a “free space” as a convenient and aesthetic. For these delimiters available Android interface – is an opportunity to highlight the main points from the overall flow of information.


Proof of the above may serve as an example of the Android and iOS interface. Many users prefer the “airless” space first, a lack of it monotonous search. Proponents of a different opinion, on the contrary, consider design iOS massive due to the dense data stream, while Android, in their view, the visual is more simple and convenient.

The debate on the subject, what kind of style is better maintained to this day. Flat design wins due to the speed of download and “total” interface ease. Material design, although it is considered to be his successor, yet has a distinct advantage. Animated elements, shadows and textures can improve the user experience with the interfaces and usability in general.

And since it is the material design – one of the trends of the web in 2016, in the near future we will know, whether he has a chance to pass the test of time, or he, as a flat design, “reincarnated” in the new species, and, we hope, that even more perfect.


Post A Comment

  +  69  =  78