4-5 years ago, all Google products looked pretty distracting in different ways. Every single product looked inconsistent on different platforms. But everything began to change back in 2011, when Google started to work hard on the visual part unification of the ecosystem of its products and called it Project Kennedy.

Google’s new design direction Project Kennedy

Primarily, Project Kennedy enhanced web and few iOS applications design. At the same time, there was a separate new version of Android – Holo, which replaced aesthetically anti-pleasant interfaces of old Android. But there was one problem: Holo still looked different from Project Kennedy.

Users had to adjust and get used to the different look, layout and controls of the new interface when switching between different devices and platforms. Therefore, at some point a group of designers at Google gathered together and began to wrestle with this problem, hoping to solve it once and for all. In I/O 2014 conference, Google introduced the new system and design approach, called Material Design. The new design language allows you to create a consistent user experience across all devices and screen sizes: smartphones, desktop, tablets, television, watches, cars and etc. Material Design is the evolution of Holo and ultimate design guideline for developers & designers of Android and web applications. In many ways it is a more flexible design language, that was created for a global community – Google was only the first user. Material Design allows a more objective approach to the design adoption choices. It sets reasonable limits, but not excessive restrictions.

The key principles of Material Design

Material Design is based on four basic principles:

Tactile surface (“quantum paper”). Material Design interface consists of tangible layers, so-called “digital or quantum paper”. These layers are stacked, arranged at different heights and cast shadows on the top of each other, which helps users better understand the anatomy of the interface and the principles of interaction with it.
Print design. If we assume that the layers are pieces of “digital paper”, then the “digital ink” would be everything that is displayed on these layers. That’s the same approach as used in traditional graphic design; posters, magazines, newspapers, packaging, branding, record covers and so on.
Meaningful animations. In the real world things do not come out of nowhere and disappear into nowhere – this only happens in the movies. Therefore, using Material Design language always think about how to use “realistic” animations of the layers and “digital ink”.
Adaptive design. It is about how we apply the previous three principles and concepts on different screen size devices with different resolutions.

Let’s take a better look at each one of these basic Material Design principles.

Tactile surface

Let’s start with tactile surface. Material Design surface consist of tangible objects – layers and “sheets” of “quantum paper”, that, unlike ordinary paper possess superhuman – able to connect, stretch and change their shape. The rest of the surface behavior is in full compliance with the laws of physics.

Surface

What is the surface? At its most basic level, surface is a “container”, which cast a shadow and nothing more, but it’s enough to distinguish one object from another, and to show how they are positioned relatively to each other. Google’s Material Design philosophy strives for “clean” design and simplicity. No need to go too far and use textures or light and shade image gradients. A neat shadow can express a lot and it’s absolutely sufficient. Each surface has its height – a position on the axis Z and it cast a shadow at the bottom – exactly as the real world objects (materials) do.

Depth

Traditional flat design doesn’t contain stylistic enhancements which simulate three-dimensional objects such as shadows, but in Material Design shadows perform an important function in notation structure and hierarchy of elements on the screen. For example, if the lifting member is greater, then it has more shadow. This increased depth of focus is critically important to the users and helps to browse through the application gracefully.

Depth also gives us some tips about interaction. In above example, as user is scrolling content , green header adhere to the topsheet and cast a shadow. We can instantly understand that we are moving not only the “ink” on the white background, but surface (“container”) as a whole.

Important:
The depth should be meaningful. There is no need to apply depth principles with the “ink” objects.
Take care of the movements. Floating buttons, toolbars and dialog boxes are located at a certain height. Sometimes they need to move along the Z axis in order to avoid collisions when users take actions.
It’s not necessary to use Floating Action Button (FAB). FAB is a very distinctive Material Design element. Many believe that it is necessary to add it to the interface: so it immediately becomes Material Design (not!). It should be only used for the key action in your application. If you need to close a window or confirm the action, it is not necessary to use the floating action button. There are many other elements to achieve this.
Not everything has to be on the card. The card suits only if object has many forms and it contains a lot of different content.
Dialog box. Designers at Google drastically improved dialogs, but for most tasks it’s better to use Bottom Sheet or Snackbars.

Print design (digital “ink”)

As we already know, every surface in Material Design we call “digital or quantum paper”. Everything that is placed on “digital paper” (images, text, icons and etc.) is “digital ink”. Material Design language uses classic print design principles in its interface design.

Typography

In print design, typography plays a crucial role. Take any magazine and you will notice that typography performs two important functions. Firstly, font style and composition reflect brand’s personality and identity. Secondly, typography defines the structure of content.
Material Design has been criticized for narrowing font selection only to one – Roboto font. But there is a good reason for this. Take a look at the image below. If we ignore icons and convert the text into the plain, gray blocks, it becomes apparent that the structure is quite distinguishable. We can clearly see header title and a set of smaller elements, which are distinguished by their color shade – more important = darker. In this case, we explicitly distinguish grouping.

Font size

Material Design guidelines recommend to use Roboto font and offers variety of size combinations. However, Roboto font can be replaced (or combined) by corporate font to support the brand.

Colors

As in print design, color is an important means of expression in Google’s Material Design. In “quantum paper” color is playing a more prominent role (unlike in previous Google’s designs and Android versions ). Standard Material Design color palette consists of the main and accent colors:

Colors are mainly used for large areas such as action bar and darker variation for status bar. Bright accent colors are used for point-controls, indicators, buttons, strips and etc. Accent color is designed to attract user’s attention to the key elements such as the floating action button:

Android supports a library called Palette, which allows you to extract and make use of colors in an image. Palette allows dynamically paint interface based on photo images used in application:

We’ve selected a picture and an algorithm to separate from it 6 colors with different characteristics:
– There are 3 vibrant and 3 muted colors;
– they are divided into light, standard and dark tones;
– each background’s color is determined by the color of the text.

Beautiful photos

Finally, Material Design guidelines are encouraging developers and designers to use photos and illustrations in all its glory. Pictures are mainly displayed without frames (“bleed”). Even the status bar is specially made transparent so that it wouldn’t interfere.

Meaningful animations

In the real world objects can not just appear out of nowhere and disappear into nowhere. This would cause confusion and lead developers into a dead end. Therefore, in Material Design language meaningful animation is used to confirm user’s action.
Example 1. The animation shows selected surface movement on click (tap) :

Example 2. An action in the calendar after you come off from the surface becomes a separate layer (“paper”) and begins to transform showing detailed information about the event.

An interesting point: the active movement catches user’s eye. By using animations we manage user’s attention.

Asymmetry

Since the depth of the interface is limited by thickness of the device, all facilities necessary to perform transformations are “hidden” in the plane. This also causes  transformations to be asymmetric: width and height of the object must be independent. Otherwise, there would be an illusion of approaching or moving away from the viewer, with a very large distance.

Response

Another very important principle of Material Design animation – response to user actions. Where possible, the epicenter of the interface changes must be the touching point of the device screen (or click point in desktop applications). For example, a wave that comes and goes from the touching (clicking) point. This effect can be easily implemented in Android L.

Authentic motion

In real world, the force is nowhere close to infinity, time will never tend to zero either, which means that objects cannot come to an instantaneous stop. Exactly the same physics laws of motion are used in Material Design animations. “Animation with abrupt starts and stops or rapid changes in direction appears unnatural and can be an unexpected and unpleasant disruption for the user.”

Adaptive design

The last major aspect of Material Design – a concept of adaptive design. That’s how we can apply all three of the above mentioned principles on different screen size devices in different form factors.

From general to specific

The most common technique – reducing the amount of information for smaller screens (smaller screen = less information on the single “paper” = larger quantity of surfaces). If on the big screen, we can afford to show a list, and detailed information of selected item, then on the smartphone display a list and details requires a separate screen (surface layer).

Indents

It’s much easier to control free space of the large screens by using content blocks. On widescreen displays units are stretched to their limits of readability and padding space from the edges can be quite large. In that case, empty space is a perfect opportunity to use elements such as floating action button.

Whiteframes

Whiteframes created by designers at Google is a good source and starting point to learn how to organize space on different screen size devices.

Dimensions

It’s recommended to create multiple proportions for all elements. In particular – is more convenient to choose the size of an app bar making it fold: 1x, 2x, 3x. On smartphones and tablets this size is different, but the app will adapt without any problems.

Blocks

If you’ll set modular grid of blocks (multiple by 8dp), you’ll get a great visual rhythm and to make layout decisions will be more convenient.

Toolbar

Action bars (header controls, action buttons, navigation) are one of the most important parts of the user interface. In Android Lollipop navigation has evolved from a constrained strips on top of a full-fledged widget to a beautiful and functional application control unit. Material Design UI controls has been enriched with variety of elements:

– input fields, forms and etc.;
– floating action button;
– advanced navigation toolbar is hidden (but it’s functional widget) ;
– Toolbar controlled conveniently and only if it’s necessary.

Tip:
Don’t make bottom corner “the ghetto” for floating action buttons. FAB can be placed anywhere: bottom, top, right, left. Of course, it’s very convenient to reach FAB in the bottom corner, but it’s not the only option. FAB can be moved from place to place depending on the objectives of your application.

Official Google’s Material Design guidelines

Video and content originally created by REDMADROBOT – Russia’s #1 development company

#materialdesign #Google #Android #Lollipop #Design #webdesign #development #button #apps #application

Share this:

• Facebook
• Twitter
• Google+
• LinkedIn