Design and Android

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

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. 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 • Google+
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
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?”
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
74. GET INSPIRED
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