Material Design: What The Big Wigs On Wall Street Don't Want You To Know

Material design is a beautiful new design language from Google to help make our apps better. But how new is it really? And where did all of it come from? Answers and more inside.

Given at the inaugural Droidcon NYC 2014.

Transcript

1. W H AT T H E B I G W I G S O N WA L L S T R E E T D O NT WA NT YO U TO K N O W M AT E R I A L D E S I G N
2. K E V I N G R A NT • Android Development since 2009 • Degree in Computer Science from the University of Nevada. • Learned Android framework fundamentals from Android Framework developers from JayWay and Sony (Ericsson) in Malmö • Co-Authored Beginning Android - Develop and Design with Chris Haseman • Re-Built an existing application (name cannot be disclosed) • 10,000,000 - 50,000,000 downloads bracket • 4.2 star rating • Continuous Feature and Design upgrades in Tumblr Android for two years • 10,000,000 - 50,000,00 downloads bracket • 4.4 star rating.
3. D E M A N D I N G A N S W E R S • Some stats! • On Being a Conformist • What do you mean, design? • What don’t they want me to know? • Why Materials? • What can I do today?
4. S O M E S TAT S !
5. Min SDK 15 (More Gingerbread than ICS, cool?)
6. – M E “The best time to be an Android Developer is now”
7. O N B E I N G A C O N F O R M I S T
8. I was once like many of you
9. I was a (design guidelines) conformist
10. What is a conformist?
11. “ N O P E ” “Can we change the color of the menu?” “ N O P E ” “Can we change the size of the ActionBar?” “ N O P E ” “Can we animate this text it?” “ N O P E ” “Can we modify this dialog?”
12. “If Google wanted us to be able to do that, 
 it would work that way” – M E
13. – D E S I G N E R “Alright, then just do the best you can.”
14. I G OT W H AT I ( T H O U G HT ) WA NT E D • Adhered to guidelines • Application was quick, responsive • Worked across all devices • Revered as an application that finally adopted the holo guidelines.
15. But thats it. End of story. There’s no memorable pieces left, because there were none.
16. Part of the problem, is I didn’t know what design was. I didn’t know why I needed it. I thought design was there to get in my way, to give me a hard time.
17. W H AT D O YO U M E A N BY D E S I G N ?
18. “I’m not a good designer, I can’t draw.”
19. • Visual Design • Interaction Design • Product Design T Y P E S O F D E S I G N
20. “Does it look good?” V I S U A L D E S I G N
21. • Typography • Colors • Graphics • Cohesive look and feel V I S U A L D E S I G N
22. “Does it make sense?” I N T E R A C T I O N D E S I G N http://skiilight.com/digital/2014/08/wireframes-for-non-designers/
23. • Intuitive • Navigation • Transitions • Animations I N T E R A C T I O N D E S I G N
24. “Is this valuable?” P R O D U C T D E S I G N
25. • Valuable • Useful • Makes sense • Vision P R O D U C T D E S I G N
26. Design can mean many things. You don’t have to fill all of the roles yourself.
27. W H AT D O N ' T T H E Y WA NT M E TO K N O W ?
28. • Floating Action Button • Round Avatars I S T H I S M AT E R I A L D E S I G N ?
29. • Accent Colors • Colored Status Bar I S T H I S M AT E R I A L D E S I G N ?
30. • Grids • Cards I S T H I S M AT E R I A L D E S I G N ?
31. • Aluminum • Lines I S T H I S M AT E R I A L D E S I G N ?
32. What if I told you that Material Design isn’t new
33. What if I told you it’s been under our noses this whole time
34. C A R D L AYO U T • Etsy • Pinterest • Google+
35. R O U N D AVATA R S • Vine • Pinterest • Instagram
36. S C E N E T R A N S IT I O N S • Tumblr
37. A C C E NT C O LO R S • Pocket Casts
38. F LOAT I N G A CT I O N B U T TO N • Path • Tumblr • Foursquare* • (Chatheads?) *removed in latest designs
39. B A C K A R R O W S • Instagram
41. “Dang, you’re right”
42. • Literally hundreds of hours of development • Lots of FTK (face to keyboard) • Solutions didn’t work on all platforms • Criticized and ridiculed for being different
43. You can create your own design patterns. If they’re good, others will follow
44. B U T W HY M AT E R I A L S T H E N ?
45. • All of these apps are beautiful individually. • But these apps pushed #holo to the limit. • Many of us are teams of one or two • We have neither the time nor resources to 
 make our apps that good.
46. G O O G L E H A S T H E T I M E (theres way more on the Android team than this)
47. N E W P I E C E S • Dynamic Shadows • Activity Transitions • Reveal Transitions • RecyclerView • Ripple States • more than I even know
48. Material design is a gift, don’t take it for granted
49. W H AT C A N I D O TO DAY ?
50. – E A G E R D E V E LO P E R “Material Design means we get to rebuild the app, right?”
52. P R E PA R I N G F O R L • Material design DOES NOT require you 
 to rebuild your app • Good time to clean up your ActionBar and Adapter code to prepare for ToolBar and RecyclerView • Many things things can be modified by
 changing the theme • You don’t have to change everything all at once
53. “Should I start my L update now?”
54. IT D E P E N D S • L API Development is still pretty tough • Only runs on L devices • Best paradigm is to run a separate flavor 
 (see Google I/O 2014 app) • Support Libraries not really useable yet 
 (unless Roman announced them right before me) • There’s lots of other stuff you can work on
55. A D D S O M E D E L I G HT • Delight is not an L feature • You need to do more of this in the future. • Start thinkings like an animator.
56. B E N E F IT S • Total Reblogs in the App doubled • Users who found it Reblogged 
 twice as much • We’ve never advertised this feature!
57. W H AT S I M P O RTA NT • Take some design risks • Find key elements of your product and put them in the spotlight. • Experiment, iterate, stay fresh
58. B E N E F IT S • Original posts remained mostly the same • Generated a lot of press strictly for 
 our design • Installs jumped 40% on release day • Gained a tremendous amount of experience
 in developing complex animations
59. IT S N OT A LWAY S E A S Y • This is a pain • Makes perfect sense to the user • Completely unintuitive in code
60. Attach view Decor View Send broadcast on Animation End Calculate and run Animated path BroadcastReceiver On receive broadcast, run scale animation https://github.com/kevinthecity/JumpAnimator *YMMV
61. S P I C E U P YO U R T R A N S IT I O N S • Default transitions are clunky and offer no context • You can change them • Pretty easily clunky intuitive
62. C L E A N U P YO U R M A R G I N S • Material design isn’t only margins • But there are some, you can work on them now • there is no magic 
 “fix my margins” api Check out dspec just released by Lucas Rocha http://lucasr.org/2014/09/08/introducing-dspec/
63. GET INSPIRED
64. There’s plenty of work to do
65. Being a conformist leads to forgotten design
66. Design is more than a pretty picture
67. The guidelines were inspired 
 by people like us
68. The guidelines were crafted to 
 make our lives better
69. I can make my app better today
70. – M A R K B O U LTO N “Conformity and efficiency have a price. And that price is design.”
71. T H A N K YO U kevingrant@tumblr.com @kevingrant5 kevinthebigapple.tumblr.com https://speakerdeck.com/kevingrant https://github.com/kevinthecity http://ww.tumblr.com/jobs