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.

Material Design Done Right

889 views

Published on

Care about how to leverage 'Material Design Done Right'. You will find this deck presented by the industry expert Robin Dhanwani, Founder, Parallel Labs during Webinar for Digital Vidya. Interested in attending similar Webinar Live? Register Now at http://www.digitalvidya.com/webinars/

Published in: Education
  • Be the first to comment

  • Be the first to like this

Material Design Done Right

  1. 1. Digital Marketing Webinar Material Design Done Right November, 6, 2015| Robin Dhanwani, Founder, Parallel Labs
  2. 2. What are we going to talk about? • Introduction to Material Design • Why Material Design • Pitfalls to Avoid • Expressing your Brand • Devil is the in Details • Case Studies • Inspiration • TakeAways • Q&A
  3. 3. Why Material Design Need for Consistency across Platforms Gmail.com (Project Kennedy) Gmail for Android (Holo)
  4. 4. Why Material Design Need for Consistency across Platforms What about your Gmail on Cars, TV,Wearables, Mobile phones?
  5. 5. Skeumorphism is dying and Flat design is the Trend Why Material Design
  6. 6. Key Principles Material is the metaphor Bold, graphic, intentional Motion provides meaning
  7. 7. Pitfalls to Avoid Principles vs Guidelines UI Kits and Stock Elements Trap of Design Patterns
  8. 8. Principles vs Guidelines Material as a Metaphor Use of Shadows Z-axis and Hierarchy Bold Imagery Meaningful Animations Typography Design Principles White Space Roboto Color Palette Floating Action Button Card Style Icon Sets Tab Styles Hamburger Menu Examples Dimensions Guidelines & Examples
  9. 9. UI and Icon Kits, Stock Images, Color Palette, Material Icon Font
  10. 10. Forced Design Patterns Floating Action Button (FAB) Cards Activity Bars
  11. 11. Does this Screen need a FAB ?
  12. 12. Google “Keep” dropped FAB Old New
  13. 13. This is what Card style is supposed to be.
  14. 14. But, It didn't work for Facebook. Old New
  15. 15. Medium dropped it too… Old New
  16. 16. Trello - Lists inside Cards
  17. 17. Navigation Patterns Flipboard Twitter Inbox
  18. 18. Navigation Patterns Boomer Shazam Housing
  19. 19. Expressing your Brand using Material Design
  20. 20. Skype FAB - Use of Brand Elements
  21. 21. Google Calendar Use of Material Principles for a Calendar like feel & interactions
  22. 22. Slack Use of color to have a unique brand connect
  23. 23. Use of depth and Z Axis
  24. 24. Design of Tabs
  25. 25. Devil is in the Details
  26. 26. Development // Design Implementation Parallax of RedBus App
  27. 27. Optical Alignment on Todoist App
  28. 28. FAB on Quikr App There shouldn’t be a text along with the icon. Its almost un readable.
  29. 29. Symmetric Motion for Animations
  30. 30. Case Studies
  31. 31. Takeaways by crafting Material Design into Todoist Source : Todoist Blog
  32. 32. Takeaway #1 Research and Iterate Continuously Iterations on its scheduler
  33. 33. Takeaway #2 Inspiration, Not Rules Custom palette and approach to navigation with multiple levels
  34. 34. Takeaway #3 Not just a makeover Use of gestures to mark a task as done & FAB to quick add
  35. 35. Takeaway #4 Motion is critical Use of meaningful animations for immersive experience
  36. 36. Takeaway #5 Not just for Phones Creating a uniform experience cross web, mobile, desktop and wearables
  37. 37. Lessons by Trello Team Source : Trello Blog
  38. 38. Saying Bye to Navigation Drawer
  39. 39. Fine Design changes on Boards & Lists
  40. 40. FAB for creating new Board
  41. 41. Activity Bar to switch between Organizations
  42. 42. Swipe to switch between Boards
  43. 43. Inspirations Winners of Google Material Design Awards
  44. 44. Adaptive Layouts
  45. 45. Crafted Simplicity
  46. 46. Elegant Typography
  47. 47. Delightful Animations
  48. 48. Seamless Browsing
  49. 49. Take Aways
  50. 50. Don’t follow Guidelines Blindly Make conscious choices based on purpose and audience of your app. What works for someone might not work for you.
  51. 51. Experience over Conventions If need be, definitely consider breaking conventions for the sake of better experience.
  52. 52. Get Developers on Board Developers have equal role of success in Material Design as designers have. Motivate them to get fine details like interactions, layout right to perfection.
  53. 53. Make a Statement Material Design is all about being expressive. Be bold with use of imagery, iconography, custom illustrations.
  54. 54. Express your Brand Use custom typefaces, visual styles and color palettes that connect with your brand
  55. 55. Have Fun in the Process Create a experience that is vibrant and interact would be fun and exiting.
  56. 56. Questions & Answers
  57. 57. Resources http://www.google.com/design/spec/material-design/introduction.html http://www.materialup.com/ https://ui8.net/products/material-ui-kit
  58. 58. Found It Useful? Join upcoming Digital Marketing Webinar live! http://www.digitalvidya.com/webinars/

×