Google has created "Material Design" as a unified visual language that works across platforms and devices. In this session Sultan Shalakhti, senior UX & Interaction designer (ex-Yahoo), talks about the syntax, principles, elements, and more of this new language, this presentation is part of Amman Android Developers Group (AMMxDROID) and aimed at (independent) mobile developers/designers and enthusiasts.

1. Google Material Design
Sultan Shalakhti
27
February
2015
twi1er@sultan0254
1
Designed
for

2. 27
February
2015
twi1er@sultan0254
2
A brief history of Android
From a design perspective

3. 27
February
2015
twi1er@sultan0254
3
Oct. 22,2008
T-Mobile G1 is launched

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

5. 27
February
2015
twi1er@sultan0254
5
Oct. 26,2009
The droids arrive

6. 27
February
2015
twi1er@sultan0254
6
Dec. 6,2010
Google acquires Matias Duarte

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

8. 27
February
2015
twi1er@sultan0254
8
Oct. 8,2011
#yoloholo

9. 27
February
2015
twi1er@sultan0254
9
July 9,2012
Jelly bean brings actions to notifications, Google Now

10. 27
February
2015
twi1er@sultan0254
10
Oct. 31,2013
Loosing the fat

11. 27
February
2015
twi1er@sultan0254
11
June 25,2014
Android L preview

12. 27
February
2015
twi1er@sultan0254
12
What is Material Design?

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

14. 27
February
2015
twi1er@sultan0254
14
What is the difference in
Material Design?

15. 27
February
2015
twi1er@sultan0254
15
Inspired
by
paper

16. 27
February
2015
twi1er@sultan0254
16
The classic principles of
good design

17. 27
February
2015
twi1er@sultan0254
17
Animation, Responsive interaction,
Meaningful transitions, Delightful details
http://youtu.be/Q8TXgCzxEnw

18. 27
February
2015
twi1er@sultan0254
18
Style

19. 27
February
2015
twi1er@sultan0254
19
Color Palette

20. 27
February
2015
twi1er@sultan0254
20
UI color application

21. 27
February
2015
twi1er@sultan0254
21
Roboto and Noto Fonts

22. 27
February
2015
twi1er@sultan0254
22
Typographic
scale
&
basic
styles

23. 27
February
2015
twi1er@sultan0254
23
Color
and
Contrast

24. 27
February
2015
twi1er@sultan0254
24
Icons
get
more
abstract

25. 27
February
2015
twi1er@sultan0254
25
Imagery

26. 27
February
2015
twi1er@sultan0254
26
Give
more
space
to
Image

27. 27
February
2015
twi1er@sultan0254
27
Stay
away
from
stock

28. 27
February
2015
twi1er@sultan0254
28
Focus
on
main

29. 27
February
2015
twi1er@sultan0254
29
Responsive
layout
for
all
devices

30. 27
February
2015
twi1er@sultan0254
30
Metrics
and
Grids

31. 27
February
2015
twi1er@sultan0254
31
Clean
Dialogs

32. 27
February
2015
twi1er@sultan0254
32
Card
view

33. 27
February
2015
twi1er@sultan0254
33
www.google.com/design/
spec/material-­‐design
Don't miss

34. 27
February
2015
twi1er@sultan0254
34
Q&A
Ask
me
anyCme,
scan
the
bellow
QR
www.dubacreaCve.com/ask

35. 27
February
2015
twi1er@sultan0254
35
That’s
it
Folks!
Sultan
ShalakhC
Thank
you
J