Material Design Lite, or MDL, gives designers and developers
a way to add a material look and feel to their websites
based on Google's design guidelines.
But what is MDL, and what makes it lite?
I'm Mustafa Kurtuldu, Design Advocate at Google.
And in this video, I'll give an overview of the material
design guidelines, the intentions behind MDL,
and the resources we have to help build and develop
your own MDL website.
Material design guidelines were born out
of a need to create a consistent user experience
across multiple platforms.
Consistency is really important, as people
tend to jump from one device to another
throughout their working day.
For example, while traveling in the morning,
they may use a mobile device.
At school or work, they'll be on their desktop or laptop.
And in the evening, they may switch to a tablet.
This continuous device switching means applications and websites
need to transfer these experiences
across different boundaries.
For this, we must create a continuous, a ubiquitous user
experience.
And this is where material design can help.
To understand this further, let's take a look
at the building blocks of Google's design language.
Material design is broken down into three core principles--
material as a metaphor; meaningful motion; and bold,
graphic, and intentional.
These principles help define the relationship
between the user and the UI, which
is also called affordance.
Good affordance can be the difference
between a user naturally knowing how
to perform an action in your application
or getting frustrated and confused.
The first principle, material as a metaphor,
introduces the idea that every element in an application
is made of a flexible and tangible piece of material,
similar to paper.
Each piece of material can be any shape, size,
has a thickness, occupies its own depth,
and can be elevated above other pieces of material
to demonstrate its importance simply
by casting a realistic shadow.
By using shadows and other familiar things
from our everyday experiences in the real world,
we can naturally relate to material.
And this helps us quickly understand the affordances
in our application.
The second principle of material design
is meaningful motion, which describes how bits of material
move and relate to a person's click or touch.
Every transition must appear natural and help guide a person
to perform a specific task and not simply
be decorative distractions.
Material can shrink, grow, rotate,
or move across any axis so long as it does so
in a meaningful context.
The third principle of material design
is bold, graphic, and intentional.
This principle references the classic standards
from print design and will determine
how material looks by using typography, grids, space,
scale, color, and imagery.
Together, all of these principles and design
considerations is what we call material design.
The material design principles can be applied to any platform,
though the guidelines are extremely rich,
and this can be a bit overwhelming.
This is where Material Design Lite can help.
The reason why we add the word "lite"
is because we avoid implementing the full animation
support for some of the motion transitions.
This means you can ship a [? fast ?] [? static ?] site
with a material design look and feel.
To make MDL available to all developers,
the project is open-source.
So whether you have a content-heavy website
or a simple, static website, you can use MDL.
To use MDL, simply link to the CSS file on our CDN
and add the relevant CSS classes and HTML
markup depending on the MDL components you may wish to use.
For example, we have a layout component
that is fully responsive and allows you to design and build
custom page layouts.
We also have simple, small UI components,
like the progress bar, for indicating loading and progress
states.
Each component has a basic usage with a number of CSS classes
you can add to the HTML in order to change the default
behavior or styles.
You can find out more about MDL components
and how they are implemented on our website, getmdl.io.
For those of you who want to create a custom
theme for your website, we have a color wheel
that lets you change the default, primary, and accent
colors of our UI elements.
We also have pre-built templates at our website
that you can use as a source of inspiration,
as well as a showcase section on our website that
displays existing sites currently using MDL,
such as Google Wallet, Contributor, and Web Starter
Kit.
Again, all of these can be seen on our website, getmdl.io.
So that's material design and Material Design Lite.
And now that you have an understanding of how MDL works,
you can craft the perfect website
to suit yours and your users' needs.
For more information about MDL or material design,
you can check out these links.
Thank you for watching.
[MUSIC PLAYING]