This presentation is a summary of what google introduced as new design guidelines at I/O 2014. The presentation goes through evolution of android design and how the idea of material design emerged. What new design aims to do and guiding principals of material design.

1. ANDROID DESIGN GUIDELINES &
BEST PRACTICES
- Rohit Bhat ( UI/UX Designer @ MoEngage )

2. 32
DESIGN DESIGN GUIDELINES (L) DON’T !
1

3. 32
DESIGN GUIDELINES (L) DON’T !
DESIGN
1

4. DESIGN
GUIDELINES
DESIGN
UI UX INTERACTION

5. DPI vs PX
2.0x (96px)
1.5x (72px)
1.0x (48px)
BASE 48px
0.75x
(36px)
xhdpi
hdpi
mdpi
ldpi
Inch = pixel / dpi

6. DESIGN
GUIDELINES (L)
2

7. MATERIAL DESIGNMATERIAL DESIGN

9. MATERIAL DESIGNNatural lighting and shadow
Elements have depth
An Emphasis on User actions
MATERIAL DESIGN
Meaningful motions !

10. a. AUTHENTIC MOTION
ANIMATION
DO
b c

11. a. AUTHENTIC MOTION
ANIMATION
DON’T
b c

12. b. RESPONSIVE INTERACTION
ANIMATION
DON’T
a
SURFACE REACTION MATERIAL RESPONSE RADIAL ACTION
c d

13. DON’TDO
c. MEANIGFUL TRANSITION
ANIMATION
b
VISUAL CONTINUITY
da

14. DON’TDO
c. MEANIGFUL TRANSITION
ANIMATION
b
CONSISTENT
COREOGRAPHY
da

15. d. DELIGHTFUL DETAIL
ANIMATION
b c
ACTIONS THAT DELIGHT THE USER
AND BRING THEM JOY !

16. a. COLOR
STYLE
Bold color statements juxtaposed
with muted environments
Accent color are used for your primary
action buttons as well as components
such as switchers or sliders.

17. b. ICONOGRAPHY
STYLE
PERPENDICULAR
Bold &
Geometric
ROUNDED ICONS
Consistency

18. c. IMAGERY
STYLE
PERPENDICULAR
PHOTOGRAPHIC
+
NO TO STOCK
DON’TDO

19. d. TYPOGRAPHY
STYLE
The all New
ROBOTO
RROBOTO
OLD NEW

20. a. PRINCIPLE
LAYOUT
PAPERCRAFT
In material design, every pixel drawn by an application resides
on a sheet of paper.

21. a. PRINCIPLE
LAYOUT
PAPER TOOL BAR DON’TDO

22. a. PRINCIPLE
LAYOUT
DIMENTIONALITY (SHADOW)
Shadows consist of two layers: a top shadow for depth and a
bottom shadow for definition.

23. b. METRICS AND KEYLINE
LAYOUT
TOUCH TARGET SIZE

24. c. STRUCTURE
LAYOUT
ACTION BAR
APP BAR
FLOATING ACTION BUTTON

25. c. STRUCTURE
LAYOUT
NEW APP BAR !!

26. c. STRUCTURE
LAYOUT
MENUS
Overlaps the
App Bar
Not An Extension
Of App Bar

27. a. BOTTOM SHEETS
COMPONENTS
Should slide up
from the edge of
the device

28. b. BUTTONS
COMPONENTS
Floating Action
Button (FAB)
Raised button Flat Button

29. b. BUTTONS
COMPONENTS
Buttons in action

30. c. CARDS
COMPONENTS
Rounded corner ( 2dp )
Use Only when
necessary don’t mix-up
with list
Good option for
responsive layout

31. d. DIALOGS
COMPONENTS
Preferably use flat
button
Do Not use FAB

32. e. DIVIDERS
COMPONENTS
FULL BLEED INSET
Use inset dividers
when anchoring
full bleed dividers
for sections

33. f. GRID
COMPONENTS
GRID TILES IN CELL
Lists: Optimized for
reading comprehension.
Used for homogeneous
data type, typically images.
Cards: Used for content
with inconsistent
formatting.

34. g. LISTS
COMPONENTS
LIST
TILES
IN ROW
Used for homogeneous
data type OR sets of data
types

35. h. SUB HEADER
COMPONENTS
LIST GRID
Should be Left Aligned
48dp, 16dp (left)

36. i. SWITCHES
COMPONENTS
RADIO SWITCHCHECKBOX

37. j. TABS
COMPONENTS
Extended App bar
+ Tab bar
Inset search
+ App bar + Tab bar
Default App bar
+ Tab bar

38. j. TABS
COMPONENTS
Default App bar
+Scrollable Tab bar
BEAUTIFUL TAB
INTERACTION

39. k. NOTIFICATIONS
COMPONENTS

40. DON’T
3

41. UI ELEMENTS OF OTHER OS
Don’t merge UI elements of other OS into Android

42. DESIGN PRINCIPLE
No to SKEUOMORPHISM
Yes to MATERIAL DESIGN
LOGO
No gradients OR exact depiction of real
world objects (like leather or stitch)

43. NO SPLASH SCREEN
It’s preferred not to use the splash screen
Load directly the app screen on open
LOGO

44. APP ICON
NOT PREFFERED
Should make you
feel like you are
viewing it from the
top
PREFFERED

45. RESPONSIVE
Try to make the app responsive so that it does look
great on tablets as well as on mobile
See to it that the experience is not affected

46. THANK YOU
ROHIT BHAT
rohit@moengage.com
MoEngage
www.moengage.com