Google Material DesignSultan Shalakhti

6 March 2015 twitter@sultan0254 1

Designed for

6 March 2015 twitter@sultan0254 2

A brief history of AndroidFrom a design perspective

6 March 2015 twitter@sultan0254 3

Oct. 22,2008T-Mobile G1 is launched

6 March 2015 twitter@sultan0254 4

Sep. 15,2009Introduced density independent pixels

http://www.dubacreative.com/post/110715811882/the-

difference-between-px-dp-dip-idpi-mdpi

6 March 2015 twitter@sultan0254 5

Oct. 26,2009The droids arrive

6 March 2015 twitter@sultan0254 6

Dec. 6,2010Google acquires Matias Duarte

6 March 2015 twitter@sultan0254 7

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

Android would soon look like

6 March 2015 twitter@sultan0254 8

Oct. 8,2011#yoloholo

6 March 2015 twitter@sultan0254 9

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

6 March 2015 twitter@sultan0254 10

Oct. 31,2013Loosing the fat

6 March 2015 twitter@sultan0254 11

June 25,2014Android L preview

6 March 2015 twitter@sultan0254 12

What is Material Design?

6 March 2015 twitter@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

6 March 2015 twitter@sultan0254 14

What is the difference in

Material Design?

6 March 2015 twitter@sultan0254 15

Inspired by paper

6 March 2015 twitter@sultan0254 16

The classic principles of

good design

6 March 2015 twitter@sultan0254 17

Animation, Responsive interaction,

Meaningful transitions, Delightful

details

6 March 2015 twitter@sultan0254 18

Style

6 March 2015 twitter@sultan0254 19

Color Palette

6 March 2015 twitter@sultan0254 20

UI color application

6 March 2015 twitter@sultan0254 21

Roboto and Noto Fonts

6 March 2015 twitter@sultan0254 22

Typographic scale & basic styles

6 March 2015 twitter@sultan0254 23

Color and Contrast

6 March 2015 twitter@sultan0254 24

Icons get more abstract

6 March 2015 twitter@sultan0254 25

Imagery

6 March 2015 twitter@sultan0254 26

Give more space to Image

6 March 2015 twitter@sultan0254 27

Stay away from stock

6 March 2015 twitter@sultan0254 28

Focus on main

6 March 2015 twitter@sultan0254 29

Responsive layout for all devices

6 March 2015 twitter@sultan0254 30

Metrics and Grids

6 March 2015 twitter@sultan0254 31

Clean Dialogs

6 March 2015 twitter@sultan0254 32

Card view

6 March 2015 twitter@sultan0254 33

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

Don't miss

6 March 2015 twitter@sultan0254 34

Q&AAsk me anytime, scan the bellow QR

www.dubacreative.com/ask

6 March 2015 twitter@sultan0254 35

That’s it Folks!Sultan Shalakhti

Thank you