Material Design, from Google to User Experience: Journey into the Design of Graphic Interfaces

Material Design, from Google to User Experience: Journey into the Design of Graphic Interfaces

Today surfing on internet sites or apps has almost become obvious for us. Millions are the pages and applications that we visit and use every day, but what is behind everything we see? Certainly a long and careful design, especially with regard to the graphics interface that we display. The design that appears to us is not just something purely aesthetic but is designed to allow us to make the most of the service, product or simply the page we're going to display. The Material Design was born at the hands of Google and has as its intention to give further definition to the concept of the design of graphical user interfaces for virtual media.

Material Design: in the creation of interfaces, the user experience is at the center of everything

It is presented in 2014 at the Google I / O conference, as an innovative design that puts the user experience at the center of the entire creation process, creating a graphic appearance that can be:

  • Intuitive
  • Elegant

Furthermore, it is designed to be used and adapted to devices of different sizes such as tablets, smartphones, and desktops and displayed by operating systems such as Android, iOS, Windows, up to the Web platforms, maintaining, for each device, all the aesthetic aspects typical of this design.

From the Skeuomorphism through the Flat design: this is how the idea of Material design was born

Until the advent of this new way of designing virtual interfaces, there were two types of design, still used today: skeuomorphism and flat design.

Skeuomorphism is the current one-off design that aims to represent an object in its real form. The name derives from the Greek and indicates it is a physical or graphic ornament affixed to an object, in order to recall the aesthetic characteristics of another. This type of design was widespread in the past, especially on Apple media and aimed at the idea of familiarity. The user more easily approached the use of digital, as he found forms of everyday use.

However, skeuomorphism presents some problems, such as slowness in implementation and poor compatibility with web languages. From 2010 onwards there is a change of trend, widespread by Microsoft, with the advent of Flat design. The whole concept of reality is put aside, in favor of "flat" design (precisely flat), simple, defined and highly stylized. The flat design is no longer relevant as the imitation of reality, but creates a design in itself, perfect for digital media. However, this type of design has some shortcomings in terms of usability, often it is not simple and intuitive for the user.

And it is in this framework that the Material design is placed, interpreting the role of a design that solves and innovates with respect to its predecessors.

Material Design, why Material and why design?

As we have already seen, the problem of the flat is precisely usability, as a design that is too "flat" cannot be understood perfectly by the user. And this is where the challenge of Google is born, with its new design, inspired by the physical world, with surfaces that reflect light and shadows and behave dynamically. The material, in this case, is a digital fabric that responds according to how it interacts with the user.

At the base of the Material philosophy, there is the tactile experience, in fact, it is mainly designed to be used on all those touch applications in the most fluid and simple way possible. Shadows, edges, dimensions and above all dynamism contribute to making the user experience even more realistic.

The 4 characteristics of the Material design

There are numerous distinctive features chosen by Google to represent the graphics interface of the Material design. Absolutely not random choices, but the result of a long and careful study, aimed at usability and adaptability. Moreover, it provides all the specific design standards for the development of applications on Android, Web and iOS devices.

1) The Color, or the Google color palette

The Material devotes ample space to the choice of color, proposing a very wide range of choices, in particular palettes with various chromatic ranges, are supplied, in order to better distinguish the UI elements and the various parts of the interface. It is possible to choose between shades of a single primary color or contrast a primary and a secondary color. Based on this, the colors for surfaces, backgrounds and error messages are then defined. All the selection process is assisted through a special color generator that allows you to create the right combination based on what we prefer.

2) Icons that are the basic elements of app and web usability

Icons are now part of the web language, they are universally understandable and help us to recognize functions without using words. They are basic elements regarding the usability of an application or a website. The material design considers two types of icons:

"Product" icons, with 48 up dimensions that communicate the idea behind the product and that represent the application itself

System icons, with size 28dp, which, instead, identify the possible commands and actions within the application. There are numerous guidelines regarding the use and creation of these icons, also with regards to color and shape.

 3) Typography: not only stylistic need

The text is a fundamental graphic element and the Material leaves nothing to chance, even as regards typography. The text is essential, especially for positioning on search engines and the choice of Font does not only satisfy a stylistic need but also of immediacy and readability. Robot and Noto are the characters chosen by Google and, the Material design indicates clear guidelines to manage the writing of all parts of the user interface.

4) The Layout that improves the coherence between the environments

The layout in the Material design uses tools such as basic grids and structural models to improve the coherence between the environments. These layouts are able to adapt to the various dimensions of the supports on which they are displayed so as to create a completely responsive design.

In fact, through the use of columns, spaces and margins, which adapt according to the various " breakpoints”, the dimensions of the individual supports are defined, such as tablets, smartphones or desktops and it is possible to create a dynamic design that can adapt to any device, maintaining the characteristics of usability, also through the transformation of the elements that compose it.

In short, the Material design is a real design method that every User designer should practice

Undoubtedly the Material design has laid the foundations for the creation of a way of designing and designing typical products for the web, considering a whole series of aspects that until now had not been officially considered and trying to fill many gaps, creating a true and its own design method.

Certainly today it is a great reference for all designers who approach the User Interface, as it offers many ideas, collecting a whole series of principles and information that a User designer should never neglect.

Author Bio:

Rachel Huston has been a digital marketing specialist from the past 8 years. She has contributed to thousands of wiki page service and independent articles on Wikipedia. She carefully keeps the balance between the informative articles for Wikipedia and SEO needs. Her work can be seen among the reliable source of media sites.

wiki page service

Leave a comment

Please note, comments must be approved before they are published