24 Sep

Initial Thoughts on Google Material Design

“What is this made of? What is the material that our software is made of?”

That is what Jon Wiley, Principal Designer for Google Material Design asked himself when the challenge of creating a design language that would unify and change the way projects across Google would look and react was presented. The answer to this challenge started with the notion of digital surfaces reacting the way that things in the physical world react. The idea of using real world materials such as paper was the birth of project Quantum Paper.

Quantum Paper was the starting point for Google Material Design, it applied classic design principles to the way physical objects behave. In 2014 Google Material Design was complete and introduced to the world at the Google I/O conference.

In this post we will look at some of the highlights of the Google Material Design language and discuss the reason so many designers are adopting this new revolutionary design language.

The Material Worldzaxis

As a user when we are interacting with applications we should feel like we are in a familiar and natural space. Google material creates a life-like environment for users to interact with. Unlike traditional design layouts Material is taking something extra into account, the Z axis. While most design work focuses on how things are placed on a X and Y Axis Materials focus on the Z axis as well, giving the design depth and objects in it a place in relation to one another within three dimensions. In this space all objects have a width and height measured in a unit called a “dp” or density-independent pixel. The density of an object and its relation to other objects on the page project a 3D environment.  In order to give the user visual cues as to where objects exist in this space shadows are cast from a controlled virtual light source. All of these factors together create the virtual space that our design takes place in.

Image from http://www.google.com/design/spec/material-design/introduction.html

Motion in Material

The way materials move is probably the most attractive feature. In Material Design the way objects interact with one another has also been developed to follow the rules of physics. No two objects can take up the same space on the screen. Objects can be layered or pass over on another, but not through each other.  While Material offers a variety of default animations, it also gives the developer the opportunity to create or customize motion in the following categories: Touch Feedback, Circular Reveal, Activity Transitions, Curved Motion and View State Changes. Google provides detailed documentation on how to customize motion. When designing your custom motions, Google has provided documentation for developers who are less experienced with motion graphics theory on how to design logical motion that will make the application flow with user interaction.

Color Theory, Typography and Layout

These are the three core elements that graphic design is founded upon. Material takes these properties of design and gives even the most inexperienced designer a chance to create clean efficient designs. Lets look a little closer at each one.

Color Theory
palette generator

Color in Material is designed to help developers create a basic color scheme for their application that is built off of a primary and accent color palette. If you are trying to decide the best look for your app and are having trouble envisioning the outcome of your palette the Material Palette application  is a great way to test out different combinations. Once you have decided on the perfect palette you can take it to the next level by applying it using the Material Theme to apply your colors to the CSS throughout your design.

Image from https://www.materialpalette.com/

Typography

The main font used in Material is Roboto. Roboto is a San-serif font designed to be clean and clear for interface design. It was created by Christian Robertson in house at Google and is constantly evolving. It comes in 6 weights Thin, Light, Regular, Medium, Bold, and Black. Roboto is currently the font used on the Android OS. To go along with the Roboto font, Material also contains guidelines for best practices when writing for user interfaces because  it doesn’t matter how strong your typography is if the content is not worth reading.

Layout

When working with layout in Material a few extra considerations are taken in order to optimize design appearance.

Z Index: As we mentioned earlier the Z index is a thing to consider in your layout. What is closer to the user? What is further away? Will any objects on the same Z index clash when animating? While thinking about these things note that they affect not only layout but the hierarchy of the design as well.

Density Independent Pixels (dp): The next thing that is taken into consideration is how the density the dp units used in Material keep object sizes consistent on screens with different resolutions. The following formula is provided in Material as a guide for translating measurements into dp:

dp = (width in pixels * 160) / density

Grid Structure: Material’s grid structure is based on an 8dp grid structure that is used throughout all of the design elements. Components are laid on top of this grid structure to create the skeleton of an application.

How to use Material Design Language?

Google Material is the base design behind a lot of new UI frameworks. These frameworks take the design theories and base elements provided by Google Material and apply them in an easy to use format. Some examples of these new frameworks include:

Each framework uses different stacks of technology and offers different components to work with. Before choosing a framework you should do some research and figure out which technology stack you’re using and which framework might offer more components applicable to your use case.

Material Design – A Quick Run Through.

The example embedded in this post is a single page application that provides users information on the main principles of graphic design. Hopefully this example will illustrate how easy it is to get started using Material on projects.

Step 1 – Choose a framework

I chose the framework that best fits the needs of my project example, LumX. I chose LumX because it is lightweight and comes with easy to install components to scroll through data.

Step 2 – Install the framework

Then I utilized bower to get all of the components required to get started:

$bower install Lumx

After checking to make sure necessary libraries were linked to my index page, I created a simple Angular.js application, since Lumx is a front-end framework based on Angular.js.

Note: If you are unfamiliar with angular.js, Lumx may not be a good framework to get started with. To learn more about angular applications, you can find information here.

Step 3 – Add the dependencies

Then I added the dependencies to my example application file (app.js) and main controller file (resourceController.js).

app.js

var app = angular.module('app',['lumx']);

resourceController.js

angular.module('app').controller('resourceController', function($scope, $http) { });

 

Step 4 – Choose what you need and customize

I went to LumX’s directives page and used the code for the tabs section to set up a quick way for users to scroll through information, while not leaving the index page. You can look through all of the built in elements that LumX offers on their webpage.

Here is the code I grabbed :

index.html

<div class="card mt++">
     <lx-tabs links-tc="light" links-bgc="light-blue-500" indicator="yellow-500" no-divider="true" z-depth="1">
         <lx-tab heading="">
             <p class="p+"></p>
         </lx-tab>
        <lx-tab heading="">
             <p class="p+"></p>
         </lx-tab>
        <lx-tab heading="">
             <p class="p+"></p>
         </lx-tab>
     </lx-tabs>
 </div>

This provided my example project with a nice looking tab bar that uses Material design.

Feel free to play around with this example code and customize it to make it fit the needs of your project. I’m impressed with Google’s Material Design methodology and the front-end frameworks that leverage it. Hopefully you will be too, have fun!

Resources

Share this

Comments (1)

Leave a reply