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/

1. Digital Marketing Webinar
Material Design Done Right
November, 6, 2015| Robin Dhanwani, Founder, Parallel Labs

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. Why Material Design
Need for Consistency across Platforms
Gmail.com
(Project Kennedy)
Gmail for Android
(Holo)

4. Why Material Design
Need for Consistency across Platforms
What about your Gmail on Cars, TV,Wearables, Mobile phones?

5. Skeumorphism is dying and Flat design is the Trend
Why Material Design

6. Key Principles
Material is the metaphor Bold, graphic, intentional Motion provides meaning

7. Pitfalls to Avoid
Principles vs Guidelines UI Kits and Stock Elements Trap of Design Patterns

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. UI and Icon Kits, Stock Images,
Color Palette, Material Icon Font

10. Forced Design Patterns
Floating Action Button (FAB) Cards Activity Bars

11. Does this Screen need a FAB ?

12. Google “Keep” dropped FAB
Old New

13. This is what Card style is supposed to be.

14. But, It didn't work for Facebook.
Old New

15. Medium dropped it too…
Old New

16. Trello - Lists inside Cards

17. Navigation Patterns
Flipboard Twitter Inbox

18. Navigation Patterns
Boomer Shazam Housing

19. Expressing your Brand using
Material Design

20. Skype FAB - Use of Brand Elements

21. Google Calendar
Use of Material Principles for a Calendar like feel & interactions

22. Slack
Use of color to have a unique brand connect

23. Use of depth and Z Axis

24. Design of Tabs

25. Devil is in the Details

26. Development // Design
Implementation Parallax of RedBus App

27. Optical Alignment on Todoist App

28. FAB on Quikr App
There shouldn’t be a text along with the icon. Its
almost un readable.

29. Symmetric Motion for Animations

30. Case Studies

31. Takeaways by crafting Material Design into Todoist
Source : Todoist Blog

33. Takeaway #1
Research and Iterate Continuously
Iterations on its scheduler

34. Takeaway #2
Inspiration, Not Rules
Custom palette and approach to navigation with multiple levels

35. Takeaway #3
Not just a makeover
Use of gestures to mark a task as done & FAB to quick add

36. Takeaway #4
Motion is critical
Use of meaningful animations for immersive experience

37. Takeaway #5
Not just for Phones
Creating a uniform experience cross web, mobile, desktop and wearables

38. Lessons by Trello Team
Source : Trello Blog

39. Saying Bye to Navigation Drawer

40. Fine Design changes on Boards & Lists

41. FAB for creating new Board

42. Activity Bar to switch between Organizations

43. Swipe to switch between Boards

44. Inspirations
Winners of Google Material Design Awards

45. Adaptive Layouts

46. Crafted Simplicity

47. Elegant Typography

48. Delightful Animations

49. Seamless Browsing

50. Take Aways

51. 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.

52. Experience over Conventions
If need be, definitely consider breaking conventions for the sake of better
experience.

53. 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.

54. Make a Statement
Material Design is all about being expressive. Be bold with use of imagery,
iconography, custom illustrations.

55. Express your Brand
Use custom typefaces, visual styles and color palettes that
connect with your brand

56. Have Fun in the Process
Create a experience that is vibrant and interact would be
fun and exiting.

57. Questions & Answers

58. Resources
http://www.google.com/design/spec/material-design/introduction.html
http://www.materialup.com/
https://ui8.net/products/material-ui-kit

59. Found It Useful?
Join upcoming Digital Marketing Webinar live!
http://www.digitalvidya.com/webinars/