Material Design, UI according to Google

In the modern scenario, if you want to include movement, you will have to make it real, respecting the laws of physics and the functionality of things in the real world. Indeed, users are used to feeling movement in their daily lives. This attracts their attentions and helps them better understand the functionality of things.

20 basic principles of the Material Design

The Material Design is a set of principles and guidelines that guide the design of modern and elegant user interfaces (IU). Launched by Google in 2014, this visual language aims to create coherent and harmonious interfaces on all devices, regardless of the operating system or the interface used.

The Material Design is based on three main pillars: the physical universe, color and space. Each interface component must blend into this universe, respecting the proportions and colors specific to each material. The spaces must also be well defined so that the user can easily navigate from one element to another.

What is the Material Design ?

It’s what ?

The Material Design is a set of design rules, created by Google in 2014. This instrument facilitates the management of the components of the platform. Indeed, Google designers have understood that components must have specific physical properties.

The Material Design thus includes directives for everything:

• The width
• Speed
• The shadow

• The typography
• Grates
• Space
• The colour
• The scale
• Imaging

In this way, users have the impression of being in contact with physical elements of the real world.

Likewise, the Material Design is not only a question of showing designers how to work on the appearances of products and services. It also allows designers to create intentional designs.

Why opt for the Material Design ?

Like most design systems, Material Design has been created to provide a better user experience on various devices and platforms. The goal is that users have a coherent experience .

The Material Design is not a simple set of style guidelines. This is a complete design system.

Unlike other less complete design systems, it can manage design situations, with complex use cases.

Likewise, the Material Design is a fairly flexible design library. In directives, a large part of the specificities of the implementation of the design are entirely left to the designer.

List of principles of the Material Design

Principle 1: Familiarize yourself with key resources

If you wish to acquire specific knowledge of the Material Design, the best solution is to consult the official Google resource.

It is continuously updated and contains all the complete and necessary details, for the design of materials designs.

The best advantage concerning this resource is that it is not only limited to specific aspects in Android. On the contrary, it covers the whole of the Material design aspect, in any project whatsoever the type of the application or on the web.

It is advisable to browse at least the first chapters of this resource, to be able to familiarize yourself with its fundamental principles.

Principle 2: Know what “material” is in the Material Design

The name Material Design is far from harmless. Material design is an imitation of the material and physical world. She is inspired by her textures, even from the reflection of light and the projection of shadows. The material surfaces reinvent the paper and ink supports.

Indeed, the central idea of ​​the principles of the Material Design is focused on creating design, imitating real world objects.

Principle 3: Use shadows to define visual hierarchies

The main material design tools are:

• Edges
• Surfaces
• Lighting
• Realistic shadows

For example, the shadows help you to prioritize the different elements, in order to have a complete design.

Principle 4: Use bright colors

The Material Design is undoubtedly a design made in a minimalist approach. In other words, you don’t need to use many design and style tools.

One of the few material things you can use is the color. Precisely, the bright color. Indeed, bright colors play an important role in enhancing the Material Design. They draw the attention of users and encourage them to interact with design.

Principle 5: Do not neglect primary color and accent color

The best way to adapt this principle to any type of design is to choose three shades that will serve as a main palette, with a color that will serve as an accent.

The primary colors you choose can be used in key elements of the interface, including:

• The fields
• Boxes
• The backgrounds
• Fonts, etc.

And the color of accent is, as its name suggests, emphasizes and draws attention to a main element. Remember that the chosen accent color should be more contrasting than that of primary colors.

Principle 6: Make good use of white spaces

White spaces play a key role in the layout of the text and typography. In reality, white space is a tool to attract attention, user and direct their attention to a particular element.

So do not hesitate to:

• Use large typography for main titles
• Add a lot of white spaces
• Keep enough empty space in your global design.

Principle 7: Follow the new Edge-to-Edge Images trend

Materials designs are fully adapted to the image. So, if you have decided to add images to your design, they must have a main role.

The images included in the Material Design, must follow the Edge-to-Edge mode. That is to say, there must not be margins, separating the edge of an image from the edge of the window or the screen.

Principle 8: Everything must be reactive

Make things accessible and usable on each device, regardless of the size of its screen, is one of the basic principles of the Material Design. The goal is to offer a coherent experience. In this way, the user will not feel confused during the transition from one device to another, because he will not obtain a new interface each time he will change the device.

In this case, the design must be reactive. Fortunately, thanks to advanced frameworks, half of your work is already done. Consequently, the creation of a reactive design will not be a difficult task for you.

Principle 9: Dimensions

On the web the Z axis is used for superposition and not for the prospect. On the other hand, the 3D world is based on the y axis.

The design material mainly uses 3D so the y axis. Just look at Google’s design, to notice the isometric perspective. This way of design is inspired by the real world, hence the name “material”.

Principle 10: Remember, success is in detail

In the Material Design, everything must be simple. The best example could be the skeuomorphic design . This technique aims to imitate real objects during the design of virtual objects. You must therefore ensure that each element of your design looks, as much as possible, to the things of real life.

Principle 11: The movement must have a meaning

According to Google, movement gives meaning to a design. When you work with the Material Design, movement is a component that must be included.

In the Material Design, the movement must have these 3 characteristics:

1. Be informative: it must be known to users where and when the action was available.
2. Help concentrate and guide users to the most important parts of the page.
3. Be expressive and add a little personality and dynamism to the interface.

Principle 12: The movement must be authentic

In the modern scenario, if you want to include movement, you will have to make it real, respecting the laws of physics and the functionality of things in the real world. Indeed, users are used to feeling movement in their daily lives. This attracts their attentions and helps them better understand the functionality of things.

This is why Google has reserved a separate section of the directives of Material Design, to detail the concept of authentic movement.

Principle 13: Acceleration and slowdown in movements

You must offer a clear and practical transition for users. The process of movement must be likely and realistic, since the Material Design aims at the reproduction of real world phenomena.

Designers must find the best time, for each object movement.

On the one hand, an excessive slowness of the elements can distract users and even have a negative impact on the flow of users. On the other hand, too dynamic movements may disturb Internet users.

In this case, you must be in the right middle, ensuring an optimal duration and a good readability of the animations. It is necessary to give users enough time so that they can notice the changes. But, do not make them wait. Research proves that 200 to 500 ms are the best animation speeds.

Principle 14: Take advantage of icon animations

Sometimes icons can be created with context buttons with a circular revelation effect.

It is true that Internet users do not often notice these details, but they are important to create a positive influence on the global user experience.

Principle 15: Create different timings for different movements

The animated objects which appear one by one, are more interesting and more alive. Such an approach offers users the possibility of looking at each item.

On the other hand, present all the elements of the page at the same time confuses users, because they do not know where to look.

Material Design, UI according to Google !

The Material Design is a visual and interactive language created by Google. But it is also a guide to design a graphical interface (design system). This design is “material” because it is inspired by real objects, paper and ink what, it differs from flat design. Google used Material Design to unify the graphic style of its applications and platforms. Its interface therefore has the advantage of being very suitable for use for any device and all display resolutions. She is also affordable. The Material Design would optimize the UX, while offering resources to developers and interface designers. As with any graphic current, it has its amateurs and detractors.

Material Design is above all a metaphor. A material metaphor as a unifying theory of a rationalized space and a movement system. The material is anchored in tactile reality, inspired by the study of paper and ink, but technologically advanced and open to imagination and magic.

What is the Material Design ?

The name “Material Design” corresponds to a set of Design rules proposed by Google. It is sometimes translated by “material design” or “contextual design”. It was first of all a design intended for mobile applications (mobile first). He then became one of the main trends in interface design. Google’s approach recalls the Flat design (or flat design): minimalism, geometric shapes and colorful, without superfluous (unlike skeuomorphism). But in this case, it is a flat design … with thickness and relief. Indeed, here are the main characteristics:

• A metaphor paper and ink from digital equipment.
• A bold design and chart.
• The creation of movements To improve the affordance and the UX. User’s actions cause significant micro-interactions.

The Polymer Library

To use the graphic elements of the Material Design (Paper Elements) and basic components (Core Elements), Google has created its library, polymer, intended for web application developers. Since then, Google has offered different sites and tools to help designers design with this style of design.

See this declaration in the form of “manifesto”, to be found in the introduction of the Material Reference Site.IO:

“We challenged ourselves to create visual language for our users who synthesize the classic principles of good design, innovative and the possibilities offered by technology and science. We call it: Material Design.»

Webdesign according to Google

The Material Design is therefore different from flat design. It’s a new kind of web design. We can say that he is a Responsive WebDesign (Auto adaptive) centered on the user experience. The goal is to get a design:

• Intuitive For all users (including not experienced)
• Suitable for all supports (computer, tablet, smartphone, etc.)
• Interactive Thanks to dynamic animations.
• Homogeneous between all the interfaces

According to Google, this design uses technological and scientific possibilities to provide web solutions to contemporary ergonomics and design problems. In the video below, Google’s designers express their initial motivations, the way they worked and the “physical” experiences carried out. We note that if this design language is anchored in a reality, it leaves an important place to the imagination of the user. The term “magic” often returns about the Material Design.

Redesigning Google

To fully understand Google’s approach, you have to go back to the origins of Google, and the importance that the firm of Montain View attacked design. Well not very much … according to the initiators of the Material Design.

Seeing this video gives us a good idea of ​​the importance of carrying a “vision” to undertake this project: REDESIGNING Google.

Why the Material Design ?

Visible in version 5.0 of Android, the Material Design was presented for the first time on June 25, 2014 by Matias Durate, director of the Android user experience at Google. It was as part of the Google I/O conference. With this new design charter, Google created its own visual language, identifiable whatever the service or the product, from mobile applications to connected objects.

Matias Duarte exhibited the metaphor for paper (Android / Material) in 2014 in 2014).

Watch this video to celebrate the first anniversary of this design approach. It was one after the launch, in May 2015. Matias Durate takes a retrospective look at this past year and could already appreciate with what enthusiasm designers, but also developers, had appropriated the principles presented a year earlier.

For or against the Material Design ?

This design was also designed to enrich the user experience And the effectiveness of the interface (new fonts readable in multiple languages, better affordance …) a year later, Google unveiled, among other things, the Material Design Lite kit for web projects (download the kit here).

The Material Design has aroused different reactions. Some approved this “improvement” of a flat design deemed simplistic and boring. Indeed, it is a “fluid” and moving design. In the composition, gates, responsives and dynamics, structure the interface. Spaces, alignment and colors are essential in the design phase. All these elements prioritize the content and facilitate the navigation of the user. Animations, based on the laws of physics, reassure the user as to the result of his actions.

However, for others, Google seeks to impose its graphic style, at the risk of limiting the creativity of designers/graphic designers. All websites would then start to look like Android applications, to the detriment of the quality of user experience.

How it works ? Application with Android

We must keep in mind that these are “material elements”. Thus, it is impossible to cross an element. Only the user affected component will react. In the Material Design, theenvironment is 3D. Each object, or “material”, has 3 coordinates: x, y, z. The Z axis concerns the elevation of the object. We can decide on the elevation of the object, its dimensions and the damaged shadows, but the thickness remains that of a sheet of paper. The latter cannot bend. On the other hand, it moves on all the axes.

Android provides three themes (Dark or Light Material Theme, Light Material Theme With Dark Actionbar) to be implemented directly in the application by changing, if you wish, some of the attributes. THE entertainment Apply to objects/elements of the interface are two: the tween animation (for transitions, for example by rotating on the image) and the frame animation (display of several images). The loadanimation allows you to load them and the startanimation of activating them/launching them.

Examples of Material Design interfaces

Theoretical explanations – the metaphor of intelligent paper that comes alive and interacts with the user – may seem obscure. But observe interfaces concretely facilitates understanding the concept of Google.

See the sources on the Uplabs (Stories.uplabs.com)

Another source, rich in examples: the Material Design Blog

Material design icons

This design system had to produce its own icons. A large library is available on different sources sites, saving considerable time to UI designers when you know the complexity of a design of homogeneous coherent icons.

Reread our articles to this subject:

See the GitHub guide for the use of these icons in different environments.

Other Material icons (to download here)

You can download here many Material Design icons

Another source of Material Design icons to download here

Large choice of Material icons in flat design to use on your projects, but also guides to use them (here)

Some sources and inspirations

• The reference on the Material Design: Material.io
  • Motion
  • Style
  • Layout
  • Component
  • Patterns
  • Growth & Communications
  • USABILITY
  • Platforms
  • On the Google Design site, you will find case studies and practical guides (many resources and possibility of subscribing to a very rich newsletter)

  Conclusion

  The Google Material Design benefits from the Simplicity of flat design. The interface is refined and visually balanced. Like flat design, it meets the requirements of Responsive design. But where flat design is often criticized for its lack of affordance, Google honest A part of skeuomorphism at a high level of abstraction. Thus, the intelligent use of animations, typographic choices and the metaphor of paper improve the user experience. The extent of the graphic elements offered to developers also makes it possible to understand how the Android Material Design has conquered the web … at the risk of being invasive. Of course, as with each design trend, the choice to use this type of design depends on targeted users and business objectives/brand. To the designer/designer to decide whether he must fully follow the Material Design Charter, To be inspired by it or turn away.

  • Google Material Design, a design formalization
  • What is service design ?
  • What is design thinking ?
  • What is the affordance ?
  • What is flat design ?
  • What is skeuomorphism ?
  • Definition of emotional design, the place of emotions in design

  See our services:

  • Our training to design a system design
  • Our 2 -day Thinkingen design training.