Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ANDROID DESIGN GUIDELINES &
BEST PRACTICES
- Rohit Bhat ( UI/UX Designer @ MoEngage )
32
DESIGN DESIGN GUIDELINES (L) DON’T !
1
32
DESIGN GUIDELINES (L) DON’T !
DESIGN
1
DESIGN
GUIDELINES
DESIGN
UI UX INTERACTION
DPI vs PX
2.0x (96px)
1.5x (72px)
1.0x (48px)
BASE 48px
0.75x
(36px)
xhdpi
hdpi
mdpi
ldpi
Inch = pixel / dpi
DESIGN
GUIDELINES (L)
2
MATERIAL DESIGNMATERIAL DESIGN
MATERIAL DESIGNNatural lighting and shadow
Elements have depth
An Emphasis on User actions
MATERIAL DESIGN
Meaningful moti...
a. AUTHENTIC MOTION
ANIMATION
DO
b c
a. AUTHENTIC MOTION
ANIMATION
DON’T
b c
b. RESPONSIVE INTERACTION
ANIMATION
DON’T
a
SURFACE REACTION MATERIAL RESPONSE RADIAL ACTION
c d
DON’TDO
c. MEANIGFUL TRANSITION
ANIMATION
b
VISUAL CONTINUITY
da
DON’TDO
c. MEANIGFUL TRANSITION
ANIMATION
b
CONSISTENT
COREOGRAPHY
da
d. DELIGHTFUL DETAIL
ANIMATION
b c
ACTIONS THAT DELIGHT THE USER
AND BRING THEM JOY !
a. COLOR
STYLE
Bold color statements juxtaposed
with muted environments
Accent color are used for your primary
action butt...
b. ICONOGRAPHY
STYLE
PERPENDICULAR
Bold &
Geometric
ROUNDED ICONS
Consistency
c. IMAGERY
STYLE
PERPENDICULAR
PHOTOGRAPHIC
+
NO TO STOCK
DON’TDO
d. TYPOGRAPHY
STYLE
The all New
ROBOTO
RROBOTO
OLD NEW
a. PRINCIPLE
LAYOUT
PAPERCRAFT
In material design, every pixel drawn by an application resides
on a sheet of paper.
a. PRINCIPLE
LAYOUT
PAPER TOOL BAR DON’TDO
a. PRINCIPLE
LAYOUT
DIMENTIONALITY (SHADOW)
Shadows consist of two layers: a top shadow for depth and a
bottom shadow for ...
b. METRICS AND KEYLINE
LAYOUT
TOUCH TARGET SIZE
c. STRUCTURE
LAYOUT
ACTION BAR
APP BAR
FLOATING ACTION BUTTON
c. STRUCTURE
LAYOUT
NEW APP BAR !!
c. STRUCTURE
LAYOUT
MENUS
Overlaps the
App Bar
Not An Extension
Of App Bar
a. BOTTOM SHEETS
COMPONENTS
Should slide up
from the edge of
the device
b. BUTTONS
COMPONENTS
Floating Action
Button (FAB)
Raised button Flat Button
b. BUTTONS
COMPONENTS
Buttons in action
c. CARDS
COMPONENTS
Rounded corner ( 2dp )
Use Only when
necessary don’t mix-up
with list
Good option for
responsive layout
d. DIALOGS
COMPONENTS
Preferably use flat
button
Do Not use FAB
e. DIVIDERS
COMPONENTS
FULL BLEED INSET
Use inset dividers
when anchoring
full bleed dividers
for sections
f. GRID
COMPONENTS
GRID TILES IN CELL
Lists: Optimized for
reading comprehension.
Used for homogeneous
data type, typicall...
g. LISTS
COMPONENTS
LIST
TILES
IN ROW
Used for homogeneous
data type OR sets of data
types
h. SUB HEADER
COMPONENTS
LIST GRID
Should be Left Aligned
48dp, 16dp (left)
i. SWITCHES
COMPONENTS
RADIO SWITCHCHECKBOX
j. TABS
COMPONENTS
Extended App bar
+ Tab bar
Inset search
+ App bar + Tab bar
Default App bar
+ Tab bar
j. TABS
COMPONENTS
Default App bar
+Scrollable Tab bar
BEAUTIFUL TAB
INTERACTION
k. NOTIFICATIONS
COMPONENTS
DON’T
3
UI ELEMENTS OF OTHER OS
Don’t merge UI elements of other OS into Android
DESIGN PRINCIPLE
No to SKEUOMORPHISM
Yes to MATERIAL DESIGN
LOGO
No gradients OR exact depiction of real
world objects (li...
NO SPLASH SCREEN
It’s preferred not to use the splash screen
Load directly the app screen on open
LOGO
APP ICON
NOT PREFFERED
Should make you
feel like you are
viewing it from the
top
PREFFERED
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 ex...
THANK YOU
ROHIT BHAT
rohit@moengage.com
MoEngage
www.moengage.com
Design guidelines announced in I/O 2014. Material Design by Google by Betaglide
Upcoming SlideShare
Loading in …5
×

Design guidelines announced in I/O 2014. Material Design by Google by Betaglide

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.

Design guidelines announced in I/O 2014. Material Design by Google by Betaglide

  1. 1. ANDROID DESIGN GUIDELINES & BEST PRACTICES - Rohit Bhat ( UI/UX Designer @ MoEngage )
  2. 2. 32 DESIGN DESIGN GUIDELINES (L) DON’T ! 1
  3. 3. 32 DESIGN GUIDELINES (L) DON’T ! DESIGN 1
  4. 4. DESIGN GUIDELINES DESIGN UI UX INTERACTION
  5. 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. 6. DESIGN GUIDELINES (L) 2
  7. 7. MATERIAL DESIGNMATERIAL DESIGN
  8. 8. MATERIAL DESIGNNatural lighting and shadow Elements have depth An Emphasis on User actions MATERIAL DESIGN Meaningful motions !
  9. 9. a. AUTHENTIC MOTION ANIMATION DO b c
  10. 10. a. AUTHENTIC MOTION ANIMATION DON’T b c
  11. 11. b. RESPONSIVE INTERACTION ANIMATION DON’T a SURFACE REACTION MATERIAL RESPONSE RADIAL ACTION c d
  12. 12. DON’TDO c. MEANIGFUL TRANSITION ANIMATION b VISUAL CONTINUITY da
  13. 13. DON’TDO c. MEANIGFUL TRANSITION ANIMATION b CONSISTENT COREOGRAPHY da
  14. 14. d. DELIGHTFUL DETAIL ANIMATION b c ACTIONS THAT DELIGHT THE USER AND BRING THEM JOY !
  15. 15. 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.
  16. 16. b. ICONOGRAPHY STYLE PERPENDICULAR Bold & Geometric ROUNDED ICONS Consistency
  17. 17. c. IMAGERY STYLE PERPENDICULAR PHOTOGRAPHIC + NO TO STOCK DON’TDO
  18. 18. d. TYPOGRAPHY STYLE The all New ROBOTO RROBOTO OLD NEW
  19. 19. a. PRINCIPLE LAYOUT PAPERCRAFT In material design, every pixel drawn by an application resides on a sheet of paper.
  20. 20. a. PRINCIPLE LAYOUT PAPER TOOL BAR DON’TDO
  21. 21. a. PRINCIPLE LAYOUT DIMENTIONALITY (SHADOW) Shadows consist of two layers: a top shadow for depth and a bottom shadow for definition.
  22. 22. b. METRICS AND KEYLINE LAYOUT TOUCH TARGET SIZE
  23. 23. c. STRUCTURE LAYOUT ACTION BAR APP BAR FLOATING ACTION BUTTON
  24. 24. c. STRUCTURE LAYOUT NEW APP BAR !!
  25. 25. c. STRUCTURE LAYOUT MENUS Overlaps the App Bar Not An Extension Of App Bar
  26. 26. a. BOTTOM SHEETS COMPONENTS Should slide up from the edge of the device
  27. 27. b. BUTTONS COMPONENTS Floating Action Button (FAB) Raised button Flat Button
  28. 28. b. BUTTONS COMPONENTS Buttons in action
  29. 29. c. CARDS COMPONENTS Rounded corner ( 2dp ) Use Only when necessary don’t mix-up with list Good option for responsive layout
  30. 30. d. DIALOGS COMPONENTS Preferably use flat button Do Not use FAB
  31. 31. e. DIVIDERS COMPONENTS FULL BLEED INSET Use inset dividers when anchoring full bleed dividers for sections
  32. 32. 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.
  33. 33. g. LISTS COMPONENTS LIST TILES IN ROW Used for homogeneous data type OR sets of data types
  34. 34. h. SUB HEADER COMPONENTS LIST GRID Should be Left Aligned 48dp, 16dp (left)
  35. 35. i. SWITCHES COMPONENTS RADIO SWITCHCHECKBOX
  36. 36. j. TABS COMPONENTS Extended App bar + Tab bar Inset search + App bar + Tab bar Default App bar + Tab bar
  37. 37. j. TABS COMPONENTS Default App bar +Scrollable Tab bar BEAUTIFUL TAB INTERACTION
  38. 38. k. NOTIFICATIONS COMPONENTS
  39. 39. DON’T 3
  40. 40. UI ELEMENTS OF OTHER OS Don’t merge UI elements of other OS into Android
  41. 41. DESIGN PRINCIPLE No to SKEUOMORPHISM Yes to MATERIAL DESIGN LOGO No gradients OR exact depiction of real world objects (like leather or stitch)
  42. 42. NO SPLASH SCREEN It’s preferred not to use the splash screen Load directly the app screen on open LOGO
  43. 43. APP ICON NOT PREFFERED Should make you feel like you are viewing it from the top PREFFERED
  44. 44. 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
  45. 45. THANK YOU ROHIT BHAT rohit@moengage.com MoEngage www.moengage.com

×