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.
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.
8 Comments
Regardless of how frequently I read it, it never gets old. You certainly hit the nail on the head on this one. This is something individuals need to think about. Your blog is really mind blowing and the design is really first class. Really, your blog is mind boggling. It’s important that they know how the structure of online blogs workout.
ReplyDeleteIt is a very informative blog, Thanks for taking the time to share the good article.
ReplyDeletesalesforce interview questions
blue prism interview questions
ReplyDeleteNice blog! Thanks for sharing this valuable information
IELTS Coaching in Hyderabad
IELTS Coaching in Bangalore
IELTS Coaching in Pune
IELTS Coaching in Gurgaon
IELTS Coaching in Delhi
Thanks for sharing this blog. It was so informative.
ReplyDeleteNon technical IT jobs
Tech jobs for non techies
Thanks for sharing this blog. It was so informative.
ReplyDeleteBest way to introduce yourself in an interview
How to introduce myself in a job interview
Thanks for sharing this blog. It was so informative.
ReplyDeleteGerman institute in Chennai
Best german classes in Chennai
Thanks for sharing this blog. It was so informative.
ReplyDeleteOnline tally course
Tally classes near me
Nice blog! Thanks for sharing this valuable information
ReplyDeleteIELTS Coaching Centre in Bangalore
IELTS Training in Bangalore