A short overview on Googles material design.

1. Google’s Material Design
An Overview

2. Timelines
“Material” Design
Sample UI
Overview

3. 3
“ Should you use Material Design on iOS? ”
It would certainly break conventions.

4. 4
Overview
1 Introduced with Lollipop, can be used from Android version 2.1 onwards via appcompat lib
2Design based on paper and ink (Quantum Paper)
3 A design which is not restricted only to mobile, but to all including web.
4Interfaces are three-dimensional constructions, composed of layers of “physical” components
5 In addition to X and Y properties, material design uses Z properties

5. 5
Overview
Making an app to look similarly on multiple devices is a really difficult
task for developers, and material design plays well as a set of
guidelines that make this task easier.

6. 6
START
Overview – Major Events
2011
Gmail was redesigned
with flatter buttons and a
healthy serving of margin
and whitespace
2012
Introduction of layered
cards and even more
white spaces and well
designed typographic
hierarchies.
June 25, 2014
Consolidated all additions
after 2011 to a new
standard,
the Material Design

7. 7
Difference with previous version

8. 8
What is “Material”?
Material Design is the visual language Google created to synchronize web design efforts and make sites
scalable across all major platforms and devices.
It allows to create a consistent user experience across all devices and screen sizes: smartphones,
desktop, tablets, television, watches, cars and etc.
The main takeaways of Material Design are that it’s grounded in tactile reality, yet open to imagination
and innovation.

9. 9

10. 10
“Material” Design - Principles
Tactile Surface Print Design Meaningful
Animation
Adaptive
Design

11. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
11
Layers stacked, arranged at
different heights and casts
shadows on the top of each
other

12. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
12
A “container” which cast a
shadow.
Google’s Material Design
philosophy strives for
“clean” design and
simplicity.
No need for textures or light
and shade image gradients.
Surface

13. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
13
Basically indicates the
relative height/position of an
object in a stacked layer.
Shadow plays an important
role in determining the
depth of an object.
Depth

14. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
14
Depth should be meaningful
Take care of the movements
Its not necessary to use FAB
Use of dialog boxes

15. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
15

16. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
16

17. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
17
In Material Design, surface is
compared to a digital or quantum
paper. Everything placed in the
digital paper is digital ink.

18. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
18
important functions
. Font style & Composition.
.Structure of Content.
Material design recommends
using Roboto font.
Typography

19. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
19
Color is an important means
of expression.
Palette library can be used to
extract colors for the app.
Standard color palette
consists of;
- Main
- Accent
Colors

20. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
20
Main Colors – used for large
areas – action bars, darker
variation for status bar etc.
Accent Colors – used for –
point controls, indicators,
buttons, strips etc. – used to
attract users attention to key
elements like FAB etc.

21. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
21
List View Card View

22. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
22
Material design encourages developers and designers to use photos and illustrations.
Pictures are recommended to use without frames (bleed).
Status bar is even made transparent so as not to interfere.

23. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
23
Active movement catches
users eye. By using animations
we manage users attention.
Laws of physics greatly used
in conceptualizing material
design animations.

24. 24

25. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
25
“Animation with abrupt starts and stops or rapid changes in direction appears
unnatural and can be an unexpected and unpleasant disruption for the user.”
Some animations which need to be avoided:
. Animations that appear from the center of the screen, breaking the relationship with the input.
. Avoid linear motion
. Avoid symmetric acceleration / deceleration
. Do not speed-up when enter and accelerate when leaving
. Avoid hard cuts and rather use easing or smooth transition effects.
. When using multiple animated blocks, avoid using disorderly motion. Rather try to have all the blocks in same
order.

26. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
26

27. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
27
Adaptive design is how we
can apply all the above
mentioned principles in all
form factors.

28. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
28
Indents

29. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
29
Whiteframes

30. T A C T I L E S U R F A C E P R I N T D E S I G N M E A N I N G F U L A N I M A T I O N A D A P T I V E D E S I G N
30
Dimensions

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39

40. Thank you
Questions?