A couple of months ago, at their 7th annual I/O developer conference, Google had introduced a new UI design concept called Material Design.

This inspiring, vibrant and gorgeous design style is rapidly becoming popular among designers, and is indeed a great effort by Google to bring visual, motion, and interaction design together across different types of platforms and devices. Using bold graphic design, tactile surfaces and fluid motion, this content-focused design language delivers unified, playful, and intuitive experiences to users.

Originally Material Design was created for the L-Release of Android, but later Google applied it to home screens of Docs, Sheets and Slides. Inspired by this, designers started using Material Design for websites they create. In this blog post, I’ll take you on a tour of Material Design concept and also explore how you can use it in your upcoming web design projects.

Let’s begin!

Core Principles of Material Design

Material Metaphor:

Material design puts a huge emphasis on making elements, animations, and transitions as real as they appear in real life. After intensive study of paper and ink, Google team decided to use a material metaphor as the unified principle of a rationalized space and a system of motion. In a nutshell, we can say Material design is nothing but a combination of various classic concepts of design and basic physical properties.

Tangible Surfaces:

In material design, surfaces and edges of the material establish a physical structure to give users visual cues to help them quickly understand what they can touch and move. Utilizing principles of print design, material design keeps the important content in front of the user’s eye, while ignoring other less useful content. The use of familiar, intuitive and natural attributes allows user’s brain to work less and quickly understand affordances.

Dimensional Affordances:

If there is a stack of papers on your desk, they gain dimension along with protecting their shadows. Likewise, in material design, when you apply this property to the user interface, you’ll have hierarchy and shadows in order draw a user’s attention to the most important object they should interact with. Using the basics of light, surface and movement, material design conveys how an object will interact with users. Additionally, realistic lighting lets users get the most realistic view of the interface you’ve designed.

One Adaptive Design:

Material design uses a single underlying design system in order to organize space and interactions. The concept of one adaptive design brings coherence along different devices, means a unified design creates specialized views for different types of devices. Each view is tailored in a unique way to the interaction and size suitable for a particular device. On the other hand, no changes are made to hierarchy, iconography, colors, and spatial relationships.

Bold and Intentional Content:

Another thing you’ll notice about this new visual language is its bold design with bright color scheme. Taking cues from pavement marking tape, contemporary architecture, road signs, and sports courts, Google has introduced fantastic and vibrant colors that you had never expected. Also, they’ve extensively refined the Roboto font, making it slightly wider and rounder in order to make reading a better experience. Furthermore, deliberate white space and edge-to-edge imagery create clarity and immersion.

Emphasize Actions:

Material design puts a lot of emphasis on making the interaction between users and surfaces more digital, magical, and responsive. In this design style, when someone interacts with the user interface, the whole design is transformed in a surprising way. The graphical expression with color, surface, and iconography gives users a clear idea about what an object can do, whereas responsive interaction encourages the user to deeply explore the interface: if I touch this, what will happen? And what happens next?

User-initiated Change:

When a person touches the surface of water and makes wavelets, the energy derived from his actions to make changes in the interface gives him a real-life and tangible experience. In the same way, material design enables users to touch the user interface as they do in their real life. For this, Google suggests designers to take an extra dimension of interaction, which is “motion feedback”, into account. So user could feel like they’re being heard by the surface on scrolls, drags, slides and taps.

Animation Choreography:

In the real world, every action has a motion, beginning and ending. For instance, when you open a carton in the real life, you tap somewhere on it and show what’s inside. Likewise, all of the user actions in material design take place in a unified environment. Each object is presented to the user with a fast, smooth, and continuous animation that is choreographed on a shared stage. As all assets in material design move into a rhythm, the screen appears more enthralling and interactive than ever.

Meaningful Motion:

As we all know, for Google, user experience is more important than anything else. The same rule applies to the last principle of material design. This principle says that motion should be appropriate, meaningful, and carefully choreographed, and must not be used just to impress users. Motion in material design should not only be beautiful, but also build meaning about the functionality and spatial relationships along with maintaining the beauty and simplicity of a seamless user experience.

Implementing Material Design for the Web with Polymer

Not yet familiar with Polymer? Well! Polymer is a great UI toolkit that enables you to bring material design to the web. With the paper elements collection of Polymer, you will have access to all the capabilities of material design and be able to bring tangibility, bold graphics, and smooth transitions and animations to your applications on the web. You can see Polymer and material design patterns in action with Topeka, a fun quiz app.

Now, I’m going to explore Polymer’s paper elements and show you the way you can make use of this new design paradigm in your web projects.

Getting Started:

Polymer’s getting started guide comes bundled with a brief tutorial and starter project to help you get familiar with the key concepts of Polymer. Firstly, you need to download the starter project that contains all of dependencies and libraries required to work with Polymer. Once you’ve downloaded the starter project, unzip it somewhere on your local drive.

Before you’re going to start, you’ll need a quick HTTP server running. If you already have Python installed, run any one of the following commands in the top level of the sample project.

Python 2.x:

python -m SimpleHTTPServer

Python 3.x:

python -m http.server

Now, load the finished version of the project to test out the web server. For example, if the local server is listening on port 8000:

http://localhost:8000/finished/

Install Paper Elements:

After that, you need to install paper elements using any one of following three ways:

• Zip: Download Zip file and unzip it to your project root.
• Bower: Run this command above from the project root:
  

  bower install Polymer/paper-elements
  

  For more information, go through installing with Bower.

• Github: Run this command above from the project root:

  git clone https://github.com/Polymer/paper-elements.git components/paper-elements
  

Once you’ve got the paper elements in your project root, import the component by including the following code in your HTML file:

<link rel="import" href="components/paper-elements/paper-elements.html">

Using Material UI Components:

Like Foundation and Bootstrap, the Polymer’s paper element collection is packed with dialogs, tabs, and form controls. Below is the list of standard user interface components contained in paper elements:

• paper-button
• paper-checkbox
• paper-dialog-transition
• paper-dialog
• paper-dropdown-menu
• paper-fab
• paper-focusable
• paper-icon-button
• paper-input
• paper-item
• paper-menu-button
• paper-progress
• paper-radio-button
• paper-radio-group
• paper-ripple
• paper-shadow
• paper-slider
• paper-spinner
• paper-tab
• paper-tabs
• paper-toast
• paper-toggle-button

Icons are another crucial part of material design. Polymer’s <core-icon> element provides a number of icons that you can use. You can install core icons in the same way you’ve installed paper elements.

Because of their declarative nature, paper elements are as easy to use as components of other front-end frameworks. Below I’ve shown the implementation of some most commonly used UI elements of material design.

paper-menu-button:

To create a simple menu button that opens a drop down menu when clicked, you need to use the following code:

<paper-menu-button icon="menu">
<div>Web Design</div>
<div>WordPress</div>
<div>JavaScript</div>
<div>HTML5</div>
<div>Responsive</div>
</paper-menu-button>

The preview of menu button will look something like this:

paper-fab:

The <paper-fab> is a floating action button that is used for promoted actions. To create a floating action button, you need to use the code given below:

<paper-fab icon="favorite"></paper-fab>

Also, the floating action button can be resized smaller by applying the class mini.

<paper-fab class="mini"></paper-fab>

paper-tabs:

You can create tabs using the following code:

<paper-tabs selected="0">
 <paper-tab>ITEM ONE</paper-tab>
 <paper-tab>ITEM TWO</paper-tab>
 <paper-tab>ITEM THREE</paper-tab>
</paper-tabs>

paper-input:

The <paper-input> is a single/multi-line text field where users can input required values. This paper element can optionally have a label.

<paper-input label="User Name"></paper-input>
<paper-input multiline label="Keep Multiple Lines Here"></paper-input>

paper-dialog:

The <paper-dialog> element is used to render a dialog overlay. For example:

<paper-dialog heading="Dialog">
<p>Lorem ipsum ....</p>
<p>Id qui scripta ...</p>
<paper-button label="MORE INFO..." dismissive></paper-button>
<paper-button label="DECLINE" affirmative></paper-button>
<paper-button label="ACCEPT" affirmative autofocus></paper-button>
</paper-dialog>

paper-shadow:

The <paper-shadow> element helps you add shadow effect to elements. This is done by nesting the <paper-shadow> element inside a <div>.
The shadow can be applied to an element by declaring it as the target.

<div id="myCard" class="card"></div>
<paper-shadow id="myShadow" z="1"></div>
myShadow.target = document.getElementById('myCard');

If you don’t assign an element as the target, the shadow will be applied to the parent element of the paper-shadow element.

<div class="card">
<paper-shadow z="1"></paper-shadow>
</div>

Alternatively, you can directly use CSS classes of an element.

<div class="card paper-shadow-top paper-shadow-top-z-1">
<div class="card-inner paper-shadow-bottom paper-shadow-bottom-z-1"></div>
</div>

Transitions:

As I mentioned earlier, animations and transitions are important aspects of material design. Where animations improve overall user experience significantly, on the other hand, transitions provide a beautiful, engaging, and seamless way to direct users to the next step. Polymer’s core element <core-animated-pages> is used to handle transitions while switching between two pages.

To see different types of transitions in action, I suggest you to visit following demo links of <core-animated-pages> element and Topeka app.

• Core Animated Pages
• Topeka App

That’s all about Material Design!

What do you think of Material Design concept? What are chances for Material Design style to get success in web design? Is this concept the future of web design?

You can share your opinion through the comment box given below!