All posts by Arun Kumar P

PROBESEVEN - Get a Quick Insight on Google Material Design

md1

It was just as if I got out of everything I had been doing and jumped into the Material Designing, the fact is it has transformed to enrich the design concepts and it is been a welcoming concept to the creation of winning designs. You will discover what it is, Now!

Material Design being known as a design language which was created by Google and it has its first applied to Google I/O 2014 further with the Android OS.

About Material Design:

This visual language is a concept that aids the designers to design websites and applications in a friendly and more usable manner. Material Design in particular works with the set of principles that gets the target accomplished.

md2

Goals and Principles:

All the principles of good design are applied with innovation that meets across the platforms and devices which includes smart phones to smart TV.

Principles like the basic design theory like the grids, use of space, scale, colour, images and motion should be in guidelines and should not affect the user experience.

Smart Paper

What you see below is the SMART PAPER which takes the shape of the real one and it can be animated meeting the rules of physics.

smart paper

Motion

When the flow of objects takes place it defines the motion, while the acceleration and the deceleration of the object replicates the moves in the real world. This attempt transforms and navigates without the surrounding barriers.

material_motion

Colour

Colours are quite important for designing and it is directly related to the psychology of the users. It directly denotes the approach of being fun, loud, friendly  normal and much more. The highlight here is that in Material Design it gives a large palette of vibrant colours.

What is interesting and inspiring is that Google provides complete colour palette which is downloadable which makes it simple.

material_color

Typograph

The recent trend in the typographic layouts are that it is made simpler to understand and it uses intelligent spacing and colours to highlight the font.

Roboto is the standard Android font but has been improvised to meet the requirements where Noto typography works to fill the gaps in Roboto. This is applicable for all major languages.

typography

Shadows

Better understanding is been implemented with the elevation of the elements that grabs the attention and also add to the interaction of the design.

Understanding the axis which occupies the positions it demonstrated the material design language which has heights and thickness. It is not merely the 3D which manipulates in the Axis-Y but in Material design the Z-axis does its alignment to the plane which means adding elevation.

material_Shadow

Icons

Icons are one another aspect which is represented in material design, its qualities includes thin lines, crisp edges along with shadows and lightings.

material_Icons

Imagery                    

Of course imagery makes it happen to stand out from the usual, it goes with bold images, graphics with vibrant colours.

imagery

Layout

The guidelines for the layouts in the material design is interesting.

The layout has to be created with the baseline grid and the mathematical structure which defines the placement of elements. It again aims to break down in regions to place icons and the page details.

Common Elements

Here we are with the elements in material design which includes 19 components goes with bottom sheets, buttons, cards, chips, dialogs, dividers, grids, lists, list controls, menus, pickers, progress and activity, sliders, snack bars & toasts, sub-headers, switches, tabs, text fields and tooltips.

Glance at few application inspired by Google Material Design

eg1

Here is another example.

eg2

It is really encouraging and Thank you for being here a while, hoping you to add your thoughts as comments on this post.