Material design vs. Flat design

Web Design: What You Need To Know Material Design

Need To Know Material DesignNeed To Know Material Design

 Need To Know Material Design? Although it is true that  Material Design is a reference for the new web design language promoted by Google, it goes beyond just an idea.

Undoubtedly, this has caused designers to readjust their concepts about web design  and application design processes. In fact, many web pages have already applied the documentation scheme of the Google design material.


Material design is a visual language created by the Google design team. It aims to help other designers design applications and web pages that are not only practical, but also accessible. A living document that is available to the public was what inspired this idea. The documentation is updated regularly to reflect changes in its approach and technology.

Objectives and Principles

In fact,  material design revolves around a set of objectives and principles that are easier to formulate and implement. However, this should not be a problem because the essence is more in thinking about the design and improving it. This is the thing that you have Need To Know Material Design.

Objectives of the  Material design :

To devise a visual language that combines classic principles of an impressive design with the improvement and the opportunity of technologies and sciences.

Create an underlying system that allows a unified experience in different platforms and sizes, regardless of the device. Mobile guides are basic, but the tactile, the audible, the  mouse and the keyboard, are all first class participation procedures

Principles of  Material Design :Principles of  Material Design

  1. The material is the metaphor

It is important that the visual nuances are based on reality. A material metaphor is the fusion theory of a rationalized space and a system of movement. The material is subject to a tactile reality and influenced by studies of paper and ink. Despite this, it is technologically advanced and contemplates magic and imagination.

The use of common tactile functions helps users understand usability quickly. However, the flexibility of the material gives rise to new use abilities that displace those in the physical world without defying the rules of physics. Light, surface and movement are vital for the transmission of how objects move, interact and exist in space and the relationship with others. A good light shows layers, divided spaces and suggests parts that move. This is one of the things that you  Need To Know Material Design.

2. Bold, graphic and intentional

The visual elements should be guided by the basic theory of web design, such as the use of colors, images, scales, fonts, grids and space. They give way to hierarchy, meaning and focus.

Moderate colors, edge-to-edge images, large-scale typography and intentional blank create a bold graphical interface that immerses the user in the experience. Highlighting the user’s actions allows the basic features to provide clues.

3. Movement gives meaning

There is no doubt that moving objects or actions are great, but it must be ensured that they do not interrupt the user experience in any way. In addition, there must be coherence between these animations or moving images and the essence of the website.

The movement respects and leaves the user in charge of performing the movements. The actions of the main user are modulation points that initiate the movement, which results in the general transformation of the overall design. The actions occur in only one scenario. Objects are offered to the user without destroying the continuity of the experience, despite the transformation and reorganization. The movement evokes and fits, works to concentrate attention and ensure continuity. The feedback is restricted, but different. And, despite being efficient, their transitions are coherent

Material design vs. Flat designMaterial design vs. Flat design

There are many guiding factors for the  material design ; however, they can be simplified into a variety of specific ideas and approaches. Google has formulated a series of rules about how to make animations, patterns, styles, designs, usability and components. But you must take note that the material must be connected to reality, which means that the objects can be found in a three-dimensional space … well, almost three-dimensional.

With regard to aesthetics, the material design borders Skeuomorphism and the scale of  flat design . In contrast to flat design , the  material design makes a great use of the so-called  paper shade. This shadow is designed to act like a sheet of paper that lies on the shiny surface. It mimics a 3-D presence for a digital object. Perhaps the best-known example is the Gmail icon that uses light effects that makes you think it’s a tangible envelope.

Typography and color of  the design material

The color concepts of the  design material are quite inspired by the trend of  flat design , which means that the color palettes are not only intense, but also bright. The color is inspired by the color extracts contrasted with opaque backgrounds, taking indications of modern architecture, reflective pavements for pavements, traffic signs and sports fields. Emphasizes intense shadows and highlights them while mixing vibrant and unusual colors. What makes the concepts of  material design interesting is the use of sharp contrast.

The rules of typography are also basic because it takes the same flat theme  and a simple sans serif font. It has a default font for all types of application, Robot , which comes with a download link and a scale for the use of fonts. This is the things that you Need To Know Material Design.

Material design template design

The basic template and the design structure of the projects based on the  material design are inspired by printed design concepts. It is highly recommended to create and use a base grid along with mathematical structures for proper placement of the elements. In addition, the template is simplified in areas that suggest how and where to place elements for the main user interaction

Also, each idea has a downloadable template for its creation on Android. However, there is a risk that the designer ends up with a design that is too common, or worse, with an application that is undeniably Android. Without a doubt, this may be in bad taste for people who love Apple’s operating system.

Common elements of  Material design

All elements of  the design material have a detailed definition. Definitely, it’s hard to imagine something that is not here.

Here are some of the 19 most common components of  the design material :

  • Bottom pages. They are pages that slide from bottom to top to reveal additional content.
  • They contain an image or text, or both according to the color of your application.
  • Cards They serve as an introduction to more information.
  • Chips They contain complex entities, such as a sequence of titles or an image.
  • Dialogues Its content varies from text or UI control.
  • Separators This component separates content within page templates and lists.
  • Grids They separate similar information as images and optimize it for their visual comprehension.
  • Lists They separate similar information, such as images, and optimize it for their reading comprehension.
  • List controls. These icons are on the left or right side of the list.
  • Menus They emerge from the buttons and are used to choose an action or discrete option.
  • Selectors They work well for presentation in a confirmation dialog.
  • Progress and activity. Represent each action with a single activity indicator.
  • Sliders . They allow you to choose a value from a series of values.
  • Snack bars and toasts . They are used mainly for system messages.
  • They are special titles that describe different sections or indicate unions in the material.
  • Selection buttons It is divided into three types: Verification boxes, radio buttons, and so on.

Eyelashes. They help you to explore between applications and web pages very easily.

Text fields Determine the type of characters that will be included in the field. This things you should always Need To Know Material Design.

Information on tools

If the appearance of the components are to your liking, you can even download an Adobe Photoshop, Illustrator or Sketch file that offers all the elements of the Android system icons. The label sheet comes complete and includes styles that adapt to the recommended grids.

Accessibility, interaction and usability of  Materia Design.

There is no doubt that the most successful products are visible to the vast majority of consumers. This is only possible if a product is accessible to all people, regardless of their abilities, as long as they understand it and the product can help them achieve their goals. In the case of the documentation of the  material design , it opens the eyes to web designers towards patterns that can improve interaction, usability and accessibility.

It is true that many of the aesthetic properties of the  material design seem very basic and make experienced designers raise their eyebrows doubtfully, it cannot be denied that many of their ideas of interaction and usability cannot be ignored. Undoubtedly, the section of their interaction patterns is a great help for designers. It requires a set of concepts to create some universal elements from one design to another.

Use of cards

With the  material design , the content is always presented in cards that make use of the hierarchy, background images and content to offer context and an entry point for an information. Undoubtedly, the cards work well because they have the purpose of placing the exact amount of information in a compressed view that are enhanced with visual elements. There is a wide variety of cards and their use depends on the content you want to present; however, most of the time you will not need to present an action or place information in a block of content. This is the thing Need To Know Material Design.

Runtastic Running and Fitness

With Runtastic, you can take your physical well-being to another level. There is no doubt that it is the best free application to be in shape that you can have on your Android device. Use your GPS to monitor your sports activities. You can also measure the duration, change of elevation, distance, number of calories left and many more things.

Google Settings

Who else would use the  material design but Google itself? The Google settings section shows the simplicity, cleanliness and friendliness of the design as well as how to use it effectively.


This application allows you to exchange messages without paying a penny for SMS. It is available for Blackberry, Android, iPhone and Windows Phone.

Evil Rabbit

Evil Rabbit is the brand an Argentine designer whose work has been presented at Behance and other design pages . One of the things that makes her stand out is how she uses  material design effectively.

Weather Timeline

Despite the simplicity of this climate application, it can not be denied that it is of great help to its users. Show the weather forecast in a timeline that helps you see and understand the information.

What if they adapt  Material Design ?

Since its launch, many popular applications have adapted this new design philosophy. In addition, new applications are being launched with their appearance. However, it can not be denied that there are still many popular applications that must adapt this design. Have you ever imagined how they would look if they had implemented the  material design ? Look at the concepts of various designers. These all are the things that you Need To Know Material Design.


The most popular social network would be more fun and attractive your bet for this design.

Calendar for Desktop

This calendar would look elegant whether on a desktop computer, laptop or even on mobile devices .

Music player

This music player simply looks modern with the material design.

Windows Explorer

Does not this new Windows design look much better than the old one?


In the case that Instagram decides to bet on the material design , it would be more interesting to publish photos.


Designs, especially those related to technology and trends, are changing. Play with different ideas, but do not get too attached to them. Like every trend, structure or web design idea , you need to evaluate if you can the concept in the project where you are working. Therefore, think if  material design is good for your project and explore the possibilities.

This article was originally published in 1s web designer , and has been translated and adapted into Spanish by Staff Creativa, digital marketing agency in Lima, Peru. If you find online content in English about web page design , corporate image management , digital marketing or packaging , do not hesitate to contact us. We will translate and publish it, and we will let you know!

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.