What is material design? New concept of designing apps?

After android 5.0 or lollipop, we eventually heard material design. But what the heck is material design? So, today I am going to tell you about material design. All right so, material design is a new visual, interactive concept by google. It is all about the new design of application development.  To develop single underlying system that allows for a better and unique experience on all the different size of devices. Now a day you are using a lot of google applications. Material design is all about the UI and UX. Like how your app should work and what the color combination you have to pick etc. The way you create some objects and give it to the motion it really feels good. Now let’s talk in depth about material design.

What is material?

If you hear word material, you starte
thinking about real world material but here is different concept.  In the concept of material in android development material is considering as objects like a circle, square etc. Your apps have a lots of shapes and themes, but there are several rules of material design.

All the materials have obviously 3 dimensions which are x, y and z. Material is quantity so it must contain something value so according to google, All the material should have 1dp thickness. Material is in 3 dimensions and it contain some thickness so there will be also a shadow and it can be controlled by the elevation difference between surface and material.

Material Properties

All the material has different properties as similar here is also material have some properties. Properties are based on the characteristic and behavior. there are different types of material like solid, mutable, impenetrable, can join other material, cannot join other material, moving with axis etc. All the material has dimension of x and y which contains 1dp thickness. You can create a show by changing the z variable with respect to surface area but you cannot have allowed to do by changing colors.  Material is solid so you can not pass input event from the material instead of you can affect the foreground material. Material which contain something so you cannot occupy the same point in space simultaneously instead of you can do as per above by elevation to separate material elements. Material can change shape but it can not fold or being curved. Material can split and join also as you want. 

What is Elevation?

In the material properties I talked about the elevation but what it is? Elevation and shadows are the most important things, it gives you more reliable and attractive Ux. As per above I mentioned that all the material has reflective property so Elevation is basically the depth of shadow or distance between two surface which produces due to front of surface area to another object’s front-end area. Elevation can be done on z axis because it consists depth or distance between two surfaces.

Elevation is also measures in the dp because it consists thickness. Material has a 1dp thickness so, in the elevation you have to keep maintain distance of 2dp. If you do more than that then the design will look worst and not much that good so keep 2dp as default. Elevation may be change if your device is changed like if you move phone to tv then tv has more depth so there will be you need to change. Let me give you some defined parameters by google which is for components and elevation,

Switch- 1dp

Card, raised button- 2dp

Search bar- 3dp

App bar – 4dp

Floating action button – 6dp

Menu, navigation bar, card(when picked) – 8dp

Sub menu- 9dp

Floating action button (pressed) – 12dp

Navigation drawer- 16dp

Dialog – 24dp.

Shadow gives you more clarification about object’s depth and directional movement. So, shadow is becoming the most important factor of making perfect app. If you did not show shadows then it will look 2D and did not looks like 2 objects are separate from the each other. One more point that crisp shadows makes confusion about similar elevation so avoid also it. So, make shadows some larger and soft which can differentiate two objects. Shadows motion helps to let you know about object’s direction so, again without shadow Stop right there. 

Motion

In the world of material design motion uses for the intention with beauty and fluidity. You like using apps more when it consists an animation. So, what is animation? Animation nothing but it is the motion of a material, It Is all about how material moves. Animation can be 300 to 400 ms long maximum and 150 to 200 min. Motion increases UX a lot.  Now you are thinking how motion will help to figure out what to do next. So, for example there is one button and when you clicking on it, this will be going through the bottom to the top corner and pops up, so you can decide that you have to work on top side instead of bottom. That is the one example of using motion. There are also some rules for the material motion like your motion should be quick enough so user does not need to wait for finishing the animation. Motion should be clear and coherent. Your path should be clear must, if don’t then user can get confused between them. 

Material Transformation

Material nature is transformable, as we discussed previously in the material properties that material can be transformed. So, there are couple of types of transforming material.

      Asymmetric

     Symmetric

Let’s understand this transformation by Rectangle because it is easy to understand. Rectangle transformation done within the x and y axis. If the transformation is done same at a time on x and y axis both then it is called Symmetric transformation. When material transforms at a different ratio then its called Asymmetric transformation. Example, we have one square and on click it should have to transfer into big square. So, it can be done using two types first one is both x and y axis changed at a same time and its called symmetric transformation. Now when we are talking about the Asymmetric transformation then there is something difference. First x axis got transform quickly and some of y axis also but some percentage transform left into the y axis. After x axis transformation done the rest of the left percentage done with the y axis. So, here is first creates a small square and then the rest of y value increases and it’s become longer square.

Radial Transformation: -  Radial transformation is what you see when clicking on object it ripples circular wave and transform into some other shape. Radial transformation is commonly used for a circular surface.  Click on to circular button and it radial transform into square object that is correct but you cannot have suggested to do radial transform for two rectangular shapes. Transformation of floatation action button is into the arc towards manner as it expands into cards.

So, here today I give you some basic fundamentals about the material design and it is very basic. We will learn advance more in the next upcoming article series. If you want to get it properly and never want to miss any update then hit the notification button down corner below and get updated first as we upload any new article. If you like this article then share with friends to let you know about this. Your love and support make us more motivate so keep supporting. If you have any doubt then please comment down below and if you want to get connect with us then check out our social links also below. That’s it for today I will be see you in the next one. Goodbye, keep learning.