Creating Graphics According to Google Material Design

AD

As the year is coming to an end, we are looking back at the developments that took place this year. Arguably, the biggest of them all is the launch of Google Material Design guidelines.

Material design is a new design language invented by Google. This is the most significant design language to come out since Microsoft’s Metro.

Google Metro Design has been a trending keyword for past few weeks and it seems that designers all around the world are discussing about it. We won’t stay behind, would we? Besides, it is one of the significant developments of design industry so we needed to cover it anyhow.

Today’s article discusses everything that has to do material design. That includes the basic principles and guidelines of Google Material Design, how it is received in the market and what should we be doing now. Let’s begin!

Introduction to Google Material Design

We’ll go through this country on fast track because you must have already seen this land. What I mean is that you must have already read google.com/design and you know what I’m writing here. So I wouldn’t waste wanna your time.
Even if any chores have restricted you from checking out Google’s official guidelines, you can do it later. I am covering all the main points right here.

One thing that is we can be absolutely is that the next year is going to be about user experience, as Ian Armstrong defined in his comment at upcoming trends of web design article that we published last month. Google material design language is focused completely on user experience.

Deisgn is not just what it looks like and feels like. Design is how it works.” -Steve Jobs

3 Basic Principles

Basic Principles of Google Material Design

Material is Metaphor: Interior designers perform their designing talents on physical material, such as fabrics and metals. However, graphic and web designers don’t have this luxury. Our designs are displayed on digital screens. Doesn’t matter what we design, it is displayed on a digital screen.

So Google thought that even if it is displayed on a digital screen, we can create an illusion of fabric with pixels. When users tap, swipe, click or even pinch on the screen, the pixels should move creating the illusion of real material.

Click to Tweet

Google defines it in these words:

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

Bold, Graphic, Intentional: This part is concerned with the elements of print media designing, i.e. typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements are the core content of any design. And they need to be presented using the tried and tested methods devised over centuries.

These elements tell the story of a design. They give it meaning and they are what the user wants to see. How should we present it to the user then? That’s the question and Google has come up with the answer. Use bold, intentional and graphicalized (I know that’s not a word, but it is now) elements. They will enhance user experience.

Motion: Motion is the focal point of Material Design. And real effects just cannot be made without motion. So motion is a big part. We will talk more about motion in the next section.

Designers’ Feedback of Google Material Design

Last year, many designers were predicting that skeumophism will be in trend this year. Even though that trend did not really catch on but Material Design does find its roots in skeumorphism. Probably that’s the reason graphic designers did not only like it immediately but they also started adopting it immediately.

Here are a couple of examples.

Here’s a free UI Kit made on Google’s Material Design techniques.

Material UI

IconShock has designed an impressive material design icon pack already and made it available for free!

Material Design Icon Set

Click to Tweet

The Android OS community was also taken aback, but in good manner when they realized that Google has created a design language, and not just any language, a bloody brilliant one.

The only negative feedback it has received is that Material design has not brought anything new to the equation. All the things they are suggesting were already in practice and some designers were following it on their own.
I personally feel that this is not really a negative criticism as Google has theorized and formulized those techniques. One does not have to go overboard each time they create a design language.

What Designers Should Be Doing Now

One thing that I am certain of is that Google Material Design is the best thing ever happened to web design. I know it’s a big statement but I believe it because this is the first thing that’s standardizing and the industry and now we can hope for a future where all websites will be displayed beautifully on all devices and users will not have any confusion or face any other troubles.

Cross Platform

Introduction

One of the basic goals for developing this language was to enable web developers to make websites that are displayed beautifully on all platforms. Not just websites, mobile apps and web apps as well.

Google Material Design Across Platforms

Cross Platform

Going Beyond Flat Designs

Flat is good but it’s not the best. I said it two years ago that flat cannot prevail for good and suddenly my colleagues started booing me. I thought flat was too dry, but Google has defined it better. Flat is not real. Today we are trying to minimize the differences between real world and digital world by imitating effects of digital world. The real physical world has shadows, so design must have it as well.

Beyond Flat

Creating an illusion of 3D and using shadows is encouraged in material design. That was not the case in Metro. This is why I think Material Design is a very good thing to happen to web design because it is minimizing the difference between digital screen and real physical objects.

Motion

Real physical world has motion, hence we need motion in design. Check out this Dribbble shot.

Motion

Subtle, simple user friendly motion, powered by storytelling techniques can enhance user experience by a great deal. This is the reason material design places huge emphasis on motion.

Click to Tweet

Wrapping Up

Material Design is Google’s first design language. Compared to other design languages, such as the historic Snow White design language, created by Steve Jobs and the recent most design language, Microsoft’s Metro have brought new visual design effects but Material Design does not. Instead, it tells us that designing has already evolved enough, now we only need to standardize it.

Google is advising us that we should focus on physics of the real world and replicate it in digital world. However, we must not go overboard with skeumorphism and design something like iOS8.

From now on, the focus will be on storytelling techniques that enhance UX. That’s the bottom line, user experience and conversion rates matters above all else.

And in the end, I leave you with this PDF by Google summarizes all the fundamentals of Google Material Design. Ciao Ciao.

create free website wix below post

Further Related Readings

Comments
  1. Rezan Ferdous December 10, 2014 at 12:47 pm

    Awesome design .. thanks for sharing this .

    1. Ayaz Malik December 10, 2014 at 6:49 pm

      Glad you enjoyed Rezan!

  2. Dilbert February 28, 2015 at 5:37 am

    I don’t know…it’s a good mash-up of decent design practices….but these practices were developed via trial and error in the public domain. Google has nothing to do with them being “standards”; Google has their share of successes and failures….So…I really don’t see this changing anything with how the web/digital world looks.
    It will be referenced, added too, deleted from….they do say “living” document.
    All in all…I think it’s ridiculous. Couldn’t we have just done a Wiki entry?

    PS: Is “Web 3.0” coming?

    1. Tayyub March 13, 2015 at 1:05 am

      Well, we won’t see any drastic changes now because the industry has already matured enough that no drastic changes will come now.
      Material Design Language only (as you put it) standardizes the designing but that’s all design languages do these days. Even Metro was a set of standards because we already knew how to design flat.

      Web 3.0… let’s hope not 😛

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyrights © 2016 - Designzzz. All Rights Reserved