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.

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

10,647 views

Published on

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

×