Material.io – O Layout de plataformas da Google
Computer science, like the universe, is always expanding and, like living things, it never ceases to evolve. It grows in height, breadth, and depth. These concepts apply very well when, more specifically, we talk about design.
Given these circumstances, one must always be attentive to the most diverse details. Building more and more dynamic interfaces, harmonious and with an excellent usability. Thinking about it, Google is always launching a kind of model portfolio for these UI applications. This “documentation” is known as Material.io.
Quantum Paper is the Google Design Material that comes with an ink and paper style abstraction. Generating thus, a comforting feeling of touch. In other words, it is the current model design language for applications, not just web, like Android and IOS. So that it fulfills its intention to unify the visual, the movement and the iteration between these platforms. So much that Google itself has released an API that developers can incorporate this model into their programs.
The Material is based on a kind of polymer abstraction. Well, how does this happen? Simple, this Polymer is like a toolbox that makes it easier to program more responsive projects, working in a customizable way, after all, each one has their own taste. In this way, both, sites and applications, can adjust to the most diverse sizes of devices and screens. The implementation of Polymer in web applications consists of a shim that provides the API with the web components and a catalog of elements. Thus, even browsers that do not natively implement this pattern would be able to display these visual elements.
Origin, principles …
As already quoted, the Material originates from ink and paper, always working in comparison to the real world. And so they adopted some means for this, being:
- Materials, objects, and solids that, just as in the real world, occupy individual spaces.
- Layers, lights, and shadows as a way of separating digital materials
- Using the Z axis as a means to represent the depth of objects force-based animations where there are acceleration and deceleration (but the use of the delay is not necessary to teach the user).
- Screen transitions happen in a constructive and smooth way, avoiding the abrupt change between screens.
… and concepts
Every standard of business layout, whether IOS, Windows, Google now, has a particularity that makes them unique. Letting the user identify them as soon as you see them.
These peculiar characteristics come through:
- Shapes: They are used to give clarity to the content, through the use of rectangles, grids whitespace, border, grids, soft colors and etc.
- Depth: It should be clear to the user on which layer it is, whether it has already changed or whether it is in the same, and so on. For this, the material works with the lights and shadows, having the use of the third dimension. Using the 3 axes and creating a kind of elevation and thickness, giving a uniformity in the graphical interface, even when on different screens.
- Typography: The standard fonts of the material are: Noto and Roboto (Android). Unlike the icons, it is difficult to keep something so rigid in relation to the fonts. For even people who are not specialized in this area take the risk of creating new types of sources. So in this regard, it is recommended to use Noto and Roboto but it is free to join any other source. Even because, the set typography, colors, images, animations and icons create something flashy, that holds the attention of the user.
And also in the most visual aspects …
- Colors: They are often mutable and solid. Digital materials have two distinct color types: primary and accent. These channels differ by contrast (between primary/accent) and the frequency with which they appear, even though they differ only in intensity. All this helps to create an Environment and Shadow, which helps to be intuitive, flashy and more realistic. These texts, icons, and dividers also use the color alpha channel, working their opacity. The Material offers the IO Color Tool 1 and the Material Palette 2 as a means to find a set of colors that best suit your need.
- Icons: Icons are usually divided between the application icon (product icon) and the icons used to identify a feature (system icon). Being allowed for those of products, more than one color, border, and shape, leaving it more complex, bearing in mind that they indicate a mark. The system must be simple, symmetrical and uni-colors (they must all be the same color), except for those present in places with low contrast, in this case, a different color is allowed, but it remains unique but gives contrast with the background color. For this, Google makes available a series of icons in Material Design Icons 3.
- Images: They are often associated with the content, so they should be adjacent to them and working with other layout materials, being placed without borders and spacing.
- Animations: They are based on the tactile reality, being natural and with objects that we manipulate in the real world, in a smooth and fast way, being able to simulate the force that we use to move something in real life. This simulation taking into account the acceleration, bending path and deceleration contribute to creating something kinetic, so that it provides focus and does not interfere with continuity.
And what comes next?
Well, this material is very new and aims to unify the UI interfaces. And, due to the great success in its objective, it is understood that what we have to be updates of this layout model.
TotalCross could not be left out, also implemented the Material, making it possible, in addition to its application to operate in the most diverse Operating Systems, it will also be beautiful. After all, we need to win the Client, right?