Slide 1

Material Design

1

Introduction

Material Design is a visual language that is created to synthesize the principles of good design along with the development and possibility of technology and science. The design is created in simple, clear and for people to understand.The technology is now approved by Google.

GoalsCreate a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all rst-class input methods.

2

Material is the metaphor

Material is a metaphor of a rationalized space and a system of motion grounded by reality.

Layers are the main division for UI development by materialize

Inspired by ink and paper the material design takes these classic principles of print design bringing it to life; the materials take energy from the user, from their finger, mouse click and touch and uses it to transform and animate3

Next Generation 3D User Interface

A very cool implementation of Z Depth

light, surface and movement convey objects in moving, interact and exist in space in relation to each other

The z-depth controls how paper can behave and not flip over.

Importance of Layers

Dimensionality affords interaction; Every device has a physical z-depth; the distance b/w the front and the back of the device that rests on the palm of your hand. The z-depth controls how paper can behave and not flip over. Generally the paper is presented square moving to the users eye; firstly the paper casts a shadow based on its position within its z and when two pieces of paper slightly overlap i.e. one in front that has lighting source and the one behind getting a shadow making sure the shadow isnt something thats drawn from ink that comes out; this is the result of the physical relationship of the lightning model that the system gives you. 5

Some Amazing Features

Typography , Grids-Space , Color , depth effects such as lightening and shadows. Emphases on user actions makes core functionality immediately apparent and provides waypoints for the user.

Motion Is What All Needed Material Design implements all what you dream of

Click on these animated pictures repeatedly while slide show.7

Not A Big Deal Mind me With Material Design such implementation are easier than ever.

Pause and then speak8

Touch Is The Best SenseThe new design has a responsive interaction that encourages user to have deeper exploration of an application.

Delightful Details

Hierarchical timing and Responsive interaction

Double click on these pics to replay the animation.10

Available Resources

Imagery, cards, responsive grids ,featuring icons color pallet and many more.

Objective Of Workshop Covering basics of material design application of the Materialize-CSS.