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

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