Material Design Details - Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. {Tangible surfaces, bold graphic design, fluid motion}

1. Material Design
- Sujeet

2. prehensive guide for visual, motion, and interaction design acros
{Tangible surfaces, bold graphic design, fluid motion}

3. Material has an ambitious mission: to create a unified
design language across all devices — mobile, desktop,
wearables and everything else — that doesn't just work
for Google, but also every app developer and
manufacturing partner that touches Google's ecosystem.
"Material design is our new look and feel, but it's a lot
more than that," explains Matias Duarte, vice president of
design for Android. "We wanted to come up with a design
system that would help us actually unify and rationalize
across all the different screens that we're designing for —
laptops, phones watches, televisions, automobiles

4. Tangible Surfaces
UIs consist of surfaces (pieces of “digital paper”) arranged
at varying elevations, casting shadows on surfaces behind
them.
Shadows are used to communicate which surfaces are in
front of others, helping focus attention and establish
hierarchy
Shadows and surfaces are used in a consistent and
structured way. Each shadow indicates a new surface.
Surfaces have simple, single-color backgrounds
Cards:Cards are a common pattern for creating surfaces

5. A Bold, Print-Like Aesthetic
Typography , Color , Dynamic Color
Icons, photos/images, text, and other foreground elements are
colored “ink” on their surfaces. They don’t have shadows and
don’t use gradients.

6. Authentic Motion
Motion helps communicate what’s
happening in the UI, providing visual
continuity across app contexts and
states. Motion also adds delight
using smaller-scale transitions.
Motion isn’t employed simply
for motion’s sake.

7. Activity + Fragment Transitions
By declaring ‘shared elements’
that are common across two
screens you can create a
smooth transition between
the two states.

8. Ripple
ating from where you touched the screen are used to show touch

9. UI elements can appear using a circular
“reveal” animation.
Animations are used in more subtle,
delightful ways, such as to convey the
transition between icon states or text states.
Animations and transitions are fast—
generally under 300ms.

10. Adaptive Design (and UI Patterns)
Card View
Tabs
Navigation Menu