This session we will introduce the elements and syntax of this language: structures, components, patterns and more. This session is created with developers in mind.

1. Google Material Design
Sultan Shalakhti
6 March 2015 twitter@sultan0254 1
Designed for

2. 6 March 2015 twitter@sultan0254 2
A brief history of Android
From a design perspective

3. 6 March 2015 twitter@sultan0254 3
Oct. 22,2008
T-Mobile G1 is launched

4. 6 March 2015 twitter@sultan0254 4
Sep. 15,2009
Introduced density independent pixels
http://www.dubacreative.com/post/110715811882/the-
difference-between-px-dp-dip-idpi-mdpi

5. 6 March 2015 twitter@sultan0254 5
Oct. 26,2009
The droids arrive

6. 6 March 2015 twitter@sultan0254 6
Dec. 6,2010
Google acquires Matias Duarte

7. 6 March 2015 twitter@sultan0254 7
Feb. 22,2011
Honeycomp (Android 3.0) showed us a glimpse of what
Android would soon look like

8. 6 March 2015 twitter@sultan0254 8
Oct. 8,2011
#yoloholo

9. 6 March 2015 twitter@sultan0254 9
July 9,2012
Jelly bean brings actions to notifications, Google Now

10. 6 March 2015 twitter@sultan0254 10
Oct. 31,2013
Loosing the fat

11. 6 March 2015 twitter@sultan0254 11
June 25,2014
Android L preview

12. 6 March 2015 twitter@sultan0254 12
What is Material Design?

13. 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

14. 6 March 2015 twitter@sultan0254 14
What is the difference in
Material Design?

15. 6 March 2015 twitter@sultan0254 15
Inspired by paper

16. 6 March 2015 twitter@sultan0254 16
The classic principles of
good design

17. 6 March 2015 twitter@sultan0254 17
Animation, Responsive interaction,
Meaningful transitions, Delightful
details

18. 6 March 2015 twitter@sultan0254 18
Style

19. 6 March 2015 twitter@sultan0254 19
Color Palette

20. 6 March 2015 twitter@sultan0254 20
UI color application

21. 6 March 2015 twitter@sultan0254 21
Roboto and Noto Fonts

22. 6 March 2015 twitter@sultan0254 22
Typographic scale & basic styles

23. 6 March 2015 twitter@sultan0254 23
Color and Contrast

24. 6 March 2015 twitter@sultan0254 24
Icons get more abstract

25. 6 March 2015 twitter@sultan0254 25
Imagery

26. 6 March 2015 twitter@sultan0254 26
Give more space to Image

27. 6 March 2015 twitter@sultan0254 27
Stay away from stock

28. 6 March 2015 twitter@sultan0254 28
Focus on main

29. 6 March 2015 twitter@sultan0254 29
Responsive layout for all devices

30. 6 March 2015 twitter@sultan0254 30
Metrics and Grids

31. 6 March 2015 twitter@sultan0254 31
Clean Dialogs

32. 6 March 2015 twitter@sultan0254 32
Card view

33. 6 March 2015 twitter@sultan0254 33
www.google.com/design/s
pec/material-design
Don't miss

34. 6 March 2015 twitter@sultan0254 34
Q&A
Ask me anytime, scan the bellow QR
www.dubacreative.com/ask

35. 6 March 2015 twitter@sultan0254 35
That’s it Folks!
Sultan Shalakhti
Thank you 