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

Design and Android

Ee3dd818b98fa0ecaafd5afb17475b57?s=47 Kevin Grant
November 07, 2014

Design and Android

Fundamentals of Design, Material Design, and being a Design leader in your Android Development.


Kevin Grant

November 07, 2014


  1. D E S I G N & A N D

    R O I D A N I M AT I O N A N D M AT E R I A L D E S I G N I N A N D R O I D
  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 • 4.2 star rating • Continuous Feature and Design upgrades in Tumblr Android for two years • 10,000,000 - 50,000,00 • 4.4 star rating.
  3. OV E R V I E W • On Being

    a Conformist • Overloaded “Design” • Material Design Principles • Is Material Design necessary? • 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. I was once like many of you

  6. I was a (design guidelines) conformist

  7. “ 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?”
  8. “If Google wanted us to be able to do that,

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

    then just do the best you can.”
  10. 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.
  11. But thats it. End of story. There’s no memorable pieces

    left, because there were none.
  12. 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.
  13. W H AT D O YO U M E A

    N BY D E S I G N ?
  14. “I’m not a good designer, I can’t draw.”

  15. • Visual Design • Interaction Design • Product Design T

    Y P E S O F D E S I G N
  16. “Does it look good?” V I S U A L

    D E S I G N
  17. • Typography • Colors • Graphics • Cohesive look and

    feel V I S U A L D E S I G N
  18. V I S U A L D E S I

    G N • Pen and Paper • Photoshop / Gimp • Sketch • Adobe Illustrator • Adobe After Effects Tools of a visual designer
  19. “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/
  20. • Information Architecture • Intuitive • Navigation • Transitions •

    Animations I N T E R A C T I O N D E S I G N
  21. I N T E R A C T I O

    N D E S I G N • Pen / Paper • Omnigraffle • Basalmiq • Origami / Quartz Composer • Invision • Research Tools of an interaction designer
  22. “Is this valuable?” P R O D U C T

    D E S I G N
  23. • Valuable • Useful • Makes sense • Vision P

    R O D U C T D E S I G N
  24. Design can mean many things. You don’t have to fill

    all of the roles yourself.
  25. L E S S O N 1 - Pay attention

  26. TO D AY C A L E N D A

    R – M E “This just looks like the calendar app that Google is inevitably going to make.”
  27. – Z A C K S U LTA N “No

    way - Google could never make this. Look at how they are displaying the information, this is more in line with the Mac calendar”
  28. W H AT I S M AT E R I

    A L D E S I G N ?
  29. C R O S S P L AT F O

    R M
  30. PA P E R Tangible Surfaces inspired by the world

    of print design, with properties that extend beyond it’s physical representation.
  31. R E S P O N S I V E

    I NT E R A CT I O N S Interactions encourages deeper exploration of an app: what will happen if I touch this? And then this?
  32. M E A N I N G F U L

    T R A N S IT I O N S • Pen / Paper Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure
  33. B O L D C O LO R S Color

    is inspired by bold color statements juxtaposed with muted environments
  34. I C O N O G R A P HY

    “The design of system icons is simple, modern, friendly, and sometimes quirky.”
  35. D E L I G HT F U L D

    E TA I L S Small details inform the user and imbue of the purpose of the action, as well as create a sense of superb craftsmanship.
  36. I M A G E RY Imagery is more than

    decoration. It’s a powerful tool to help you communicate and differentiate your product.
  37. What if I told you that Material Design isn’t new

  38. What if I told you it’s been under our noses

    this whole time
  39. PA P E R ? • Etsy • Pinterest •

  40. R O U N D AVATA R S • Vine

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

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

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

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

    • Instagram
  45. None
  46. You can create your own design patterns. If they’re good,

    others will follow
  47. “Dang, you’re right”

  48. • 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 B E I N G A D E S I G N L E A D E R
  49. I S M AT E R I A L D

    E S I G N N E C E S S A RY ?
  50. • 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.
  51. 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)
  52. N E W P I E C E S •

    Dynamic Shadows • Activity Transitions • Reveal Transitions • RecyclerView • Ripple States • more than I even know
  53. Material design is a gift, don’t take it for granted

    L E S S O N 2 -
  54. W H AT C A N I D O TO

    DAY ?
  55. – E A G E R D E V E

    LO P E R “Material Design means we get to rebuild the app, right?”
  56. None
  57. P R E PA R I N G F O

    R LO L L I P O P • 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
  58. “Then what?”

  59. A P P C O M PAT ( A CT

    I O N B A R S U P P O RT L I B R A RY ) • Toolbar?
  60. 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.
  61. 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
  62. J U M P A N I M ATO R

    • It’s not alway easy • This is a pain • Makes perfect sense to the user • Completely unintuitive in code
  63. 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
  64. 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
  65. C O M P L E X T R A

    N S IT I O N S In Lollipop
  66. C O M P L E X T R A

    N S IT I O N S In everything else (Compat) • No Render Thread • Have to choreograph more • Pass view positions through intent extras • Have to manage more state http://graphics-geek.blogspot.ca/2013/06/devbytes-custom-activity-animations.html
  67. http://graphics-geek.blogspot.ca/2013/06/devbytes-custom-activity-animations.html

  68. http://graphics-geek.blogspot.ca/2013/06/devbytes-custom-activity-animations.html • Calculate the transition • Animate to rest (zero)

  69. T W O R E S T S TAT E

    S ? • Define both rest states • Create state machine • Modify LayoutParams between states • Always animate to rest (zero) http://graphics-geek.blogspot.ca/2012/01/curved-motion-in-android.html
  70. R E V E A L T R A N

    S IT I O N S
  71. R E V E A L T R A N

    S IT I O N S C O M PAT ? https://github.com/markushi/android-ui ! • Backport of Reveal Animation • Hamburger / Arrow Animation ! Caveats • APIs are very different from 
 Lollipop versions • No RenderThread
  72. 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 by Lucas Rocha http://lucasr.org/2014/09/08/introducing-dspec/
  73. E V E N M O R E A N

    I M AT I O N S https://speakerdeck.com/dallasgutauckis/android-animations Extensive animation api coverage from Dallas Gutauckis

  75. There’s plenty of work to do L E S S

    O N 3 -
  76. Being a conformist leads to forgotten design

  77. Design is more than a pretty picture

  78. The guidelines were inspired 
 by people like us

  79. The guidelines were crafted to 
 make our lives better

  80. I can make my app better today

  81. – M A R K B O U LTO N

    “Conformity and efficiency have a price. And that price is design.”
  82. 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