Google Material DesignSultan Shalakhti

27  February  2015   twi1er@sultan0254   1  

Designed  for  

27  February  2015   twi1er@sultan0254   2  

A brief history of Android From a design perspective

27  February  2015   twi1er@sultan0254   3  

Oct. 22,2008 T-Mobile G1 is launched

27  February  2015   twi1er@sultan0254   4  

Sep. 15,2009 Introduced density independent pixels

http://www.dubacreative.com/post/110715811882/the-difference-between-px-dp-dip-idpi-mdpi

27  February  2015   twi1er@sultan0254   5  

Oct. 26,2009 The droids arrive

27  February  2015   twi1er@sultan0254   6  

Dec. 6,2010 Google acquires Matias Duarte

27  February  2015   twi1er@sultan0254   7  

Feb. 22,2011 Honeycomp (Android 3.0) showed us a glimpse of what

Android would soon look like

27  February  2015   twi1er@sultan0254   8  

Oct. 8,2011 #yoloholo

27  February  2015   twi1er@sultan0254   9  

July 9,2012 Jelly bean brings actions to notifications, Google Now

27  February  2015   twi1er@sultan0254   10  

Oct. 31,2013 Loosing the fat

27  February  2015   twi1er@sultan0254   11  

June 25,2014 Android L preview

27  February  2015   twi1er@sultan0254   12  

What is Material Design?

27  February  2015   twi1er@sultan0254   13  

+ ● Universal platform design that functions across Android Wear, Android TV, Android Auto, and all of Google’s apps and services. ● Making the whole device feel unified. ● It’s all about everything animation, but flat at the same time. ● Elevation value to any UI surface to get 3D effects by virtual light sources and real time shadows

27  February  2015   twi1er@sultan0254   14  

What is the difference in Material Design?

27  February  2015   twi1er@sultan0254   15  

Inspired  by  paper  

27  February  2015   twi1er@sultan0254   16  

The classic principles of good design

27  February  2015   twi1er@sultan0254   17  

Animation, Responsive interaction, Meaningful transitions, Delightful details

http://youtu.be/Q8TXgCzxEnw

27  February  2015   twi1er@sultan0254   18  

Style

27  February  2015   twi1er@sultan0254   19  

Color Palette

27  February  2015   twi1er@sultan0254   20  

UI color application

27  February  2015   twi1er@sultan0254   21  

Roboto and Noto Fonts

27  February  2015   twi1er@sultan0254   22  

Typographic  scale  &  basic  styles  

27  February  2015   twi1er@sultan0254   23  

Color  and  Contrast  

27  February  2015   twi1er@sultan0254   24  

Icons  get  more  abstract  

27  February  2015   twi1er@sultan0254   25  

Imagery

27  February  2015   twi1er@sultan0254   26  

Give  more  space  to  Image  

27  February  2015   twi1er@sultan0254   27  

Stay  away  from  stock  

27  February  2015   twi1er@sultan0254   28  

Focus  on  main  

27  February  2015   twi1er@sultan0254   29  

Responsive  layout  for  all  devices  

27  February  2015   twi1er@sultan0254   30  

Metrics  and  Grids  

27  February  2015   twi1er@sultan0254   31  

Clean  Dialogs  

27  February  2015   twi1er@sultan0254   32  

Card  view  

27  February  2015   twi1er@sultan0254   33  

www.google.com/design/spec/material-­‐design  

Don't miss

27  February  2015   twi1er@sultan0254   34  

Q&A  Ask  me  anyCme,  scan  the  bellow  QR  

         

www.dubacreaCve.com/ask  

27  February  2015   twi1er@sultan0254   35  

That’s  it  Folks!    Sultan  ShalakhC  

 Thank  you  J