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

Design and Android

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
Tweet

More Decks by Kevin Grant

Other Decks in Design

Transcript

  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. “ 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. 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
  12. “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/
  13. 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
  14. 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.”
  15. – 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”
  16. W H AT I S M AT E R I

    A L D E S I G N ?
  17. PA P E R Tangible Surfaces inspired by the world

    of print design, with properties that extend beyond it’s physical representation.
  18. 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?
  19. 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
  20. B O L D C O LO R S Color

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

    “The design of system icons is simple, modern, friendly, and sometimes quirky.”
  22. 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.
  23. I M A G E RY Imagery is more than

    decoration. It’s a powerful tool to help you communicate and differentiate your product.
  24. R O U N D AVATA R S • Vine

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

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

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

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

    • Instagram
  29. • 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
  30. I S M AT E R I A L D

    E S I G N N E C E S S A RY ?
  31. • 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.
  32. 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)
  33. N E W P I E C E S •

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

    LO P E R “Material Design means we get to rebuild the app, right?”
  35. 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
  36. 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?
  37. 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.
  38. 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
  39. 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
  40. 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
  41. 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
  42. C O M P L E X T R A

    N S IT I O N S In Lollipop
  43. 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
  44. 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
  45. R E V E A L T R A N

    S IT I O N S
  46. 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
  47. 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/
  48. 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
  49. – M A R K B O U LTO N

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