Material design

What is Material Design?

Material Design (MD) is a unique design language and style developed by Google for the purpose of unifying products like Android apps, Gmail, Chrome, Google Docs, YouTube, and others, based on a set of guidelines and principles that clearly define how the components should look.

Designers can use MD principles when designing web pages, mobile and web applications. This design style was applied on Android phones at first, but then Google wanted to match the looks of all applications so that users could know what to expect from them.

However, Material Design gained popularity relatively quickly. Designers had adopted its principles and began applying them to desktop applications. Since then, more and more websites have joined this trend.

The origins of Material Design

Although MD is present on the web for several years, it has quickly overtaken the Internet. The initial idea came from Matthias Duarte, Google’s VP for design, but the part of the credits goes to flat design as well. Namely, it all began in June 2014, at the I/O Conference, when Google announced that their applications and websites had switching to Material Design, or Quantum Paper, as they called it at the time.

Quantum Paper is based on "cards" that first appeared on Google Now, Google’s Intelligent Personal Assistant who was answering voice questions on Android devices. At the beginning of 2015 most of Google Apps for Android had moved to Material Design, including Gmail, YouTube, Drive, Docs, Maps, Inbox, etc. In 2016, it was already very successful and well-accepted within the design community, so Google announced that even Google Chrome is going to MD. Material Design was applied to these applications using Polymer, an open-source JavaScript library for creating web applications.

Material Design can be understood as an outlet of a flat design that, on the other hand, emerged as a contradiction to the skeuomorphic design and ruled the web at the beginning of the 21st century. Skeuomorphic design existed on most web applications and mobile apps (mainly for iPad and iPhone). It is based on a 1980s design that resembles the materials of everyday objects, such as wooden furniture, cars, etc. The costs were lower, and the impressions were similar.

This new trend was soon defined in detail. When newer phone versions appeared, designers wanted to eliminate the third dimension, so they switched to flat design. But that style was not realistic enough to show smooth transitions and the third dimension, so Matthias Duarte came up with a new style that had everything: it was modern, powerful, and unified.

This is how Material Design was created.

Today, MD provides users with the same experience regardless of the device. Powerful, vibrant, meaningful, and modern.

Philosophy of material design

As explained by Google, the philosophy of Material Design consists of three principles:

1. Material design is a metaphor
2. Powerful, vivid, intentional
3. Movements provide meaning

The first principle - material design is a metaphor - means that MD is based on a tactile world experience, such as a pencil and paper. It means that every product resembles a digital paper and ink, acting in accordance with certain rules by which gravity might not exist, but the inner functions law. The light, the surface, the movement, the edges, these are all MD elements that deserve special attention.

The second principle - strong, vivid, intentional - means the use of print elements, such as typography, space, scale, colors, and images as guidelines for a visual experience. All of these elements establish a hierarchy, they hold meaning, keep a focus and improve the user experience while using the application.

The third principle - movements provide meaning – means that the primary role is given to the user, and interaction movements emphasize it. The continuity of the experience never seems to be interrupted as the environment continuously remains around, even when a design is reorganized. Therefore, the notion of the movement that conveys meaning and purpose applies to the „direct attention and maintain continuity“.

Elements of Material Design

Google has recently updated the Material Design website (see the link below in the resource section) and provided free access to all resources for developers and designers. Now it is easy to find a resource for learning about MD components for Android and iOS design, as well as resources for building websites according to the MD principles and its accompanying documentation.

For example, if you want to start designing user interface elements for a website according to the principles of Material Design, you should first download and install the library, insert the style into the header of the file, add components to the HTML body, and add scripts. And there you are. You will get the simple yet beautiful looks.

Improve your applications with Material Design

MD is not only about vibrant colors, neat layers, textures, and shadows. It is a conceptual style that has flooded the Internet, providing the possibility of customizing the interface layout. If you are looking for a team to design your mobile or web applications, we have got your back. Contact us today!