learn all about Google design! – WAU

In 2014, Google developed a new version – until then – of its Android operating system and created a new design methodology, which was called Material Design. Nowadays this is one of the biggest trends in design. Designed to be fluid, natural, intuitive and simple to understand, Material Design has […]

In 2014, Google developed a new version – until then – of its Android operating system and created a new design methodology, which was called Material Design.

Nowadays this is one of the biggest trends in design.

Thought to be fluid, natural, intuitive and simple to understand, Material Design has several particularities and fundamentals, which will be explained throughout this post.

So without further ado, let’s get to the essential concepts!

Occupation

Material Design aims to synthesize the classic concepts of good design with innovation and possibilities brought by technology and science.

It provides a uniform experience across several different platforms, whether smartphones, computers or smart watches.

Principles

Realist

Material Design is based on the real world.

From lighting to how your animations will behave, everything is designed in a way that resembles what would happen if it occurred outside the digital environment.

The material was conceived on the study of papers with ink, but being more technically advanced and open to creativity.

With this, the design becomes intuitive and easy to understand, since it is based on the reality experienced outside the virtual environment and already familiar to users.

At the same time, because it is more flexible than real materials, it creates new understandings that are not present in the physical world.

Material Design - Realistic overlapping elements

Flashy

The fundamental principles of graphic design, such as typography, grid, color, spaces and use of images are not just to make the content visually pleasing.

They also create visual hierarchy, meaning and focus, guiding the user through his experience.

Therefore, Material Design also relies on these pillars, to be the most intuitive, clear and immersive during use.

Material Design - Central element in focus

Kinetic

Movement is essential in Material Design. Its use provides focus, transition and feedback of the elements, all within the same environment.

This is designed so that continuity is not affected, even if there is movement.

Material Design - Organized elements to give an idea of ​​movement

Environment and Shadows

All Material Design objects have axes x, y and z. That is, they are 3D and have length, width and height referring to the background.

This three-dimensional environment has two sources of light: ambient light and directional light. They are combined to form the lighting present in the elements.

Material Design - Shade difference caused by different light sources (directional, ambient and combined)

Lighting is extremely important in Material Design. Since all objects follow the same axis to z (height), it is only the shadow that they cast that will differentiate which is in front and which is in the background.

Shadows are essential for understanding the components.

For example, if the shadow increases next to the object, it means that it has increased its height relative to the background. On the other hand, if the shadow remains the same, it means that the element has increased in size.

Material Design - Difference in size of the same object caused by the difference in shadow

The axis z always is perpendicular to the device screen and the elements present in it will always be parallels in the background (whether on computers, tablets, smartphones, etc.).

Finally, different objects Never are at the same height level.

In addition, all elements have ever 1dp thick, equivalent to 1 pixel on a screen with a density of 160 pixels per inch.

Elevation

All the elements of Material Design have a resting elevation pattern.

That is, whenever they are not moving on the axis z, are at a defined height, which varies according to the visual component. The shortest possible distance between the bottom and the objects is 2dp.

Resting elevations also change according to the platform used. For example, televisions and computers have larger screens and are used from a greater distance than cell phones and, therefore, have greater depths.

The different heights in relation to the background create a visual hierarchy between the visual components, defining which ones have more importance over the others (and vice versa).

Material object characteristics

The objects present in Material Design have some immutable characteristics:

    • Occupy spaces unique in the environment;
    • Its shape is changeable (but change in size only when at the same level as the z axis)
    • They can merge with another object (while they can also break, to separate and patch up);
    • Can be created and destroyed;
  • Finally, they can move on any axis (x, y and z).

Movement

As introduced in the principles of Material Design, movement is a crucial element for its functionality.

The whole kinetics of the methodology is thought based on the real natural movements. This way, it becomes very fluid and pleasant for the user.

There are some precepts of movement used in the Material.

For example, the elements have enough energy. In this way, they are very responsive to what the user asks for, delivering quickly without compromising fluidity.

In addition, the components move Natural, with accelerations and decelerations that occur asymmetrically, as it occurs naturally with the gravity.

Material Design - Natural movement of Material Design demonstrated by a motion graphic of two blue and red balls

Natural movement of Material Design. The blue line and circle indicate the used one, with acceleration and deceleration. The red elements indicate how it would be with a uniform and mechanized movement. (Source: Material Design)

The kinetics of the Material is also conscious the environment, changing the position of elements according to the user’s intention and the movement of a main component.

And, like any movement of objects, this must also be quite clear (without obstruction or unnecessary animations that complicate the movement) and you must shift the focus from one location to another.

As well as the elevation of objects, animation also changes from platform to platform, since devices with larger screens have a much larger area for a component to cover in the same time interval than on a very small screen.

Color

Material Design has its own color palette – which, as already said on the blog, is the palette we follow to create the images of posts and ebooks – developed to be harmonious, contrasting and striking.

Colors can be used to create visual hierarchy, defining which elements attract the most attention, and also defining the state of something.

For example, if an element is wrong you can represent it with red and when you are right, with blue.

The use of colors must ensure sufficient contrast between the visual components. In the case of text, do not use solid colors, but many different opacities of the same color.

Material Design - Two texts of different opacities on the same background

The same happens to differentiate highlights in the texts, be it light color on a dark background or a dark color on a light background. In both cases, less transparent colors gain more focus.

Iconography

Material Design icons are made from geometric shapes, simple and, in total, synthesize the fundamental idea of ​​the product.

Each icon is designed to look tactile and real. The design refers to reality as if it were a sheet of paper cut and folded in an iconographic format.

Material Design uses a very versatile grid for iconographic creation, being able to cover several formats in a single pattern.

All formats can be obtained from the Material Design icon grid.

Material Design - Icon formats

All formats can be obtained from the Material Design icon grid.

Images and illustrations

The images are more than decoration in Material Design. They are a very powerful tool for you to communicate your product and differentiate it from the competition.

Some basic principles of the use of images in Material Design define that they have to be relevant, informative and attractive. In this way, they will assist the user and increase their engagement with your product.

Your product may have images and illustrations depending on the context, and this is highly recommended.

For example, when you want to represent an artist or a specific dish of food, look first for photos, as it is something specific.

On the other hand, for more comprehensive representations, such as cinema tickets, vehicles and buildings, illustrations are welcome and very attractive.

But beware! In the Material it is highly recommended that you stay away from standard stock photos. They do not pass authenticity and do not differentiate your product by creativity and originality.

Look for photos that narrate storiesare specific when needed and have a focus to assist in understanding the user.

Material Design - Integration between images and colors (gradient, solid and translucent)

In this way, it will be possible to create a narrative for your images and make your product more immersive and humanized, defining the mood and context using visual storytelling – by the way, you can understand more about storytelling by reading this post.

Integration with other elements

In order for the images to be in harmony with the other elements present in the same space, some measures must be taken.

THE resolution, for example, must be a major concern. Poor quality images are not as attractive as images with size appropriate to the layout. Therefore, always check if the image is in good resolution in the final design.

To interact with text, in Material Design, the images gain a gradient from black to transparent (like a shadow) to improve contrast. How translucent this layer will be depends on the background image, but the recommended variation is 20% -60%.

Attention: always be careful not to obstruct or darken the image too much.

You can also use Colors to the bottom of the text as a design element and use them translucent in conjunction with the gradient over photos to increase contrast and stylize images.

Images can also be in set. In order to create a visual hierarchy, differentiation in their size is recommended. Larger images draw more attention than smaller ones in the layout.

Typography

Material Design has two standard fonts used in the various products: Roboto and Born.

Roboto is the font developed by Google with the aim of being functional on a wide range of devices. It has a slightly wider and rounded shape to provide greater clarity during reading and to be more optimistic.

The Roboto family has the following variations: Thin, Light, Regular, Medium, Bold and Black, in addition to the italicized variations.

Material Design - Variations of the Roboto font

The source Born is responsible for supplying certain languages ​​with different alphabets that Roboto does not support, such as Chinese, Japanese, Korean and Indian.

Its variations differ in relation to the written language. In Chinese, for example, his family has: Thin, Light, DemiLight, Regular, Medium, Bold and Black (almost like Roboto). For Thai, for example, there is only Regular and Bold.

If you want to know more about typography, be sure to check out this complete post on the subject!

And much more!

The Material Design guidelines are quite extensive.

This is because its use is mainly aimed at the development of applications and websites, and, therefore, each element of the interface has its specific rule of color, movement, position etc.

But even though it is so complete, all laws follow the same principles.

Material is simple, direct, concise, Natural, intuitive, friendly, flashy and kinetic. Each element of the interfaces goes and has to fit these characteristics.

Since 2014, when Material Design was launched, it continues to be the main influencer of design trends.

Its modernity, fluidity and attention to the user have built its importance in the development of applications and websites since its creation.

What is no different here at Websites Are Us! Our design line is inspired by Material Design, from the fonts and color palette we use to how navigation on our blogs and websites will be.

As already said here too, many images are produced based on the Material, and this post explains how this process works and provides some tips on how to create attractive images for your audience!

If you want to know more about the various Google rules on the other elements, be sure to access the complete guide prepared by Gigante das Buscas!

If you want to continue learning even more about different topics in marketing, I recommend you check out our social media ebook!

Social Media Marketing Kit

And that’s it! If you have any questions or opinions, leave them in the comments! To the next!