Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design: What The Big Wigs On Wall Stre...

Kevin Grant
October 09, 2014

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.

Kevin Grant

October 09, 2014
Tweet

More Decks by Kevin Grant

Other Decks in Design

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. O N B E I N G A C O

    N F O R M I S T
  5. “ 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?”
  6. “If Google wanted us to be able to do that,

    
 it would work that way” – M E
  7. – D E S I G N E R “Alright,

    then just do the best you can.”
  8. 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.
  9. 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.
  10. W H AT D O YO U M E A

    N BY D E S I G N ?
  11. “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/
  12. W H AT D O N ' T T H

    E Y WA NT M E TO K N O W ?
  13. • Floating Action Button • Round Avatars I S T

    H I S M AT E R I A L D E S I G N ?
  14. • Accent Colors • Colored Status Bar I S T

    H I S M AT E R I A L D E S I G N ?
  15. • Grids • Cards I S T H I S

    M AT E R I A L D E S I G N ?
  16. • Aluminum • Lines I S T H I S

    M AT E R I A L D E S I G N ?
  17. C A R D L AYO U T • Etsy

    • Pinterest • Google+
  18. R O U N D AVATA R S • Vine

    • Pinterest • Instagram
  19. S C E N E T R A N S

    IT I O N S • Tumblr
  20. A C C E NT C O LO R S

    • Pocket Casts
  21. F LOAT I N G A CT I O N

    B U T TO N • Path • Tumblr • Foursquare* • (Chatheads?) *removed in latest designs
  22. B A C K A R R O W S

    • Instagram
  23. • 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
  24. B U T W HY M AT E R I

    A L S T H E N ?
  25. • 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.
  26. 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)
  27. N E W P I E C E S •

    Dynamic Shadows • Activity Transitions • Reveal Transitions • RecyclerView • Ripple States • more than I even know
  28. – E A G E R D E V E

    LO P E R “Material Design means we get to rebuild the app, right?”
  29. 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
  30. 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
  31. 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.
  32. 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!
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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/
  39. – M A R K B O U LTO N

    “Conformity and efficiency have a price. And that price is design.”
  40. T H A N K YO U [email protected] @kevingrant5 kevinthebigapple.tumblr.com

    https://speakerdeck.com/kevingrant https://github.com/kevinthecity http://ww.tumblr.com/jobs