Most likely, we have all interacted with some digital product that implements the concept of Material design, which as defined by its creator Google: it is a visual language that synthesizes the basic principles of good design and innovation in science and technology.
This design philosophy was first announced in 2014 and although it was initially intended for the Android system, after its creation it has spread to almost the entire web.
Material design is inspired by paper, the physical world and the textures that compose it, including light and shadow: “unlike real paper, our digital material can be scaled and reshaped intelligently. The material has physical surfaces and edges.” – Explains Matias Duarte, vice president of design at Google.
By relying on paper and material properties, your entire environment is developed with the qualities of 3D space in mind: surfaces, depth, and light and shadow.
1. Surfaces: In Material design, all elements have depth and move horizontally, vertically and with varying depths along the Z axis. In the same way these surfaces have dimensions, shadows when there is elevation, infinite resolution and physical properties that correspond to how a material actually behaves:
- It can change shape
- Can change opacity
- It grows and shrinks as long as it stays in its same plane
- It can bend and fold as long as it does not exceed the depth of the user interface.
- It can generate and disappear anywhere in the environment as well as move along any axis.
- Two elements can coordinate their movements.
2. Elevation: In Material design, elevation is defined as the distance between different elements and surfaces. It is measured along the z-axis from the front parts of each surface and is shown by default using shadows or visual cues such as surface fills or opacities.
All elements have different elevation values as this allows them to move back and forth from other surfaces in addition to focusing the user’s attention on the highest elevation.
3. Light and shadow: In the Material design UI, there are two types of lights: Key (create precise shadows) and Ambient (which appear from angles and create softer, more diffuse shadows).
One of the big problems that a digital product has is the difficulty of achieving coherence between the design and the user experience. Material design was born as an answer to this need, unifying all the design and development criteria that a team must follow to achieve a successful result. In summary, some of the most important features are:
- Visual appeal: beyond the operation of the application, Google seeks that when the user sees the application, he falls in love. It doesn’t matter when they interact with it, they simply have to see it and love its design.
- Movement: Everything that is touched within the product must have a movement or reaction. The user must realize that when he clicks or enters a section: something happens.
- Interactive design: This user interaction with the application is conveyed through different principles: light, surface and movement.
All the design guidelines of Material Design have been gathered by Google in the web “www.material.io“, where you can find all the systems, principles, typographies, rules, colors, buttons, iconographies, shadows, movements and graphic examples that complement each explanation. Additionally, a section for developers is included with resources and tutorials to perform their task.
See projects where we have applied Material Design: Here
