• Like
Android Design: Beyond the Guidelines
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Android Design: Beyond the Guidelines

  • 1,093 views
Published

With Android Design guidelines becoming more robust and easier to implement, it's easy to have your application's design lost in a homogenized sea of "Holo Themed" user interfaces. …

With Android Design guidelines becoming more robust and easier to implement, it's easy to have your application's design lost in a homogenized sea of "Holo Themed" user interfaces.

When is it ok to break away from the Design Guidelines? In this session, we will examine and showcase examples where developers have "thought outside the box" and implemented beautiful interfaces and animations that create captivating and unique experiences for their users.

We will also discuss how to achieve some of these design features in your own applications by looking at common patterns for a variety of designs that will leave your users delightfully surprised and help you push the boundaries of Android's paradigms in the future.

Note: Most images are animated gifs, but unfortunately will not animate in this format.

Published in Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,093
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
24
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. BEYOND THE GUIDELINES Creating character and identity in your Android applications Kevin Grant Thursday, November 7, 13
  • 2. Thursday, November 7, 13
  • 3. Thursday, November 7, 13
  • 4. It’s still awesome Thursday, November 7, 13
  • 5. It’s still awesome tumblr.com/jobs Thursday, November 7, 13
  • 6. Thursday, November 7, 13
  • 7. Thursday, November 7, 13
  • 8. Problem All basic apps look the same Thursday, November 7, 13
  • 9. Problem All basic apps look the same Thursday, November 7, 13
  • 10. All holo apps look the same Thursday, November 7, 13
  • 11. All holo apps look the same ‣ Default styles are easy to implement Thursday, November 7, 13
  • 12. All holo apps look the same ‣ Default styles are easy to implement ‣ ActionBar is really hard to customize Thursday, November 7, 13
  • 13. All holo apps look the same ‣ Default styles are easy to implement ‣ ActionBar is really hard to customize ‣ Deviation isn’t encouraged Thursday, November 7, 13
  • 14. New York Times News Weak Branding (these could all be the same) Circa Thursday, November 7, 13 Currents
  • 15. News Strong Branding Flipboard Thursday, November 7, 13 Pulse
  • 16. Users wants results, not rules Thursday, November 7, 13
  • 17. Users wants results, not rules Thursday, November 7, 13
  • 18. Users wants results, not rules ‣ Creativity is rewarded Thursday, November 7, 13
  • 19. Users wants results, not rules ‣ Creativity is rewarded ‣ “Generally fit” into ecosystem is enough Thursday, November 7, 13
  • 20. Users wants results, not rules ‣ Creativity is rewarded ‣ “Generally fit” into ecosystem is enough ‣ Don’t listen to Android design trolls Thursday, November 7, 13
  • 21. “Don’t port your iOS design to android” Thursday, November 7, 13
  • 22. “Don’t port your iOS design to android” This doesn’t mean design should not be a priority Thursday, November 7, 13
  • 23. Going to cover 3 topics today Thursday, November 7, 13
  • 24. Going to cover 3 topics today ‣ Say YES to your designers Thursday, November 7, 13
  • 25. Going to cover 3 topics today ‣ Say YES to your designers ‣ Make your applications WHIMSICAL Thursday, November 7, 13
  • 26. Going to cover 3 topics today ‣ Say YES to your designers ‣ Make your applications WHIMSICAL ‣ Be a DESIGN LEADER Thursday, November 7, 13
  • 27. Section 1 SAYING YES Designers send payments to kevingrant5@gmail.com Thursday, November 7, 13
  • 28. Section 1 SAYING YES PROBABLY DO THAT Designers send payments to kevingrant5@gmail.com Thursday, November 7, 13
  • 29. Thursday, November 7, 13
  • 30. Wouldn’t it be great if... Thursday, November 7, 13
  • 31. Wouldn’t it be great if... What do you think about... Thursday, November 7, 13
  • 32. Wouldn’t it be great if... What do you think about... How hard would it be to... Thursday, November 7, 13
  • 33. Thursday, November 7, 13
  • 34. Don’t be that guy Thursday, November 7, 13
  • 35. Don’t be that guy ‣ Designers aren’t here to ruin the product or everyone’s lives (just yours) Thursday, November 7, 13
  • 36. Don’t be that guy ‣ Designers aren’t here to ruin the product or everyone’s lives (just yours) ‣ Most of the time, they’re requests are reasonable, it just requires extra work Thursday, November 7, 13
  • 37. Don’t be that guy ‣ Designers aren’t here to ruin the product or everyone’s lives (just yours) ‣ Most of the time, they’re requests are reasonable, it just requires extra work ‣ If your designer asks you to move a pixel, YOU ASK HOW HIGH. Thursday, November 7, 13
  • 38. Example Can we increase the padding between the home icon and the back carrot? Thursday, November 7, 13
  • 39. Example Can we increase the padding between the home icon and the back carrot? No Ugh, Google designed it this way for a reason Thursday, November 7, 13
  • 40. Example Can we increase the padding between the home icon and the back carrot? No Ugh, Google designed it this way for a reason Thursday, November 7, 13 Yes! I’m sure there’s something we can do, I’ll get back to you
  • 41. Example Can we change the text color of a action button based on it’s state? E.G. FOLLOW should be white, UNFOLLOW should be gray. Thursday, November 7, 13
  • 42. Example Can we change the text color of a action button based on it’s state? E.G. FOLLOW should be white, UNFOLLOW should be gray. No You can’t really change the color of action bar text programmatically. Thursday, November 7, 13
  • 43. Example Can we change the text color of a action button based on it’s state? E.G. FOLLOW should be white, UNFOLLOW should be gray. No You can’t really change the color of action bar text programmatically. Thursday, November 7, 13 Yes! Sure! It’s not as straightforward as just changing the color, but we can create a custom view and use that instead.
  • 44. Example Can we add a cool flippy animation to our dialogs to make them feel like cards? Thursday, November 7, 13
  • 45. Example Can we add a cool flippy animation to our dialogs to make them feel like cards? No Unfortunately, animating dialogs isn’t supported very well and there isn’t much we can do. Thursday, November 7, 13
  • 46. Example Can we add a cool flippy animation to our dialogs to make them feel like cards? No Unfortunately, animating dialogs isn’t supported very well and there isn’t much we can do. Thursday, November 7, 13 Yes! Hmm that could be tricky!, We can style an Activity to look like a dialog and use Activity Transitions
  • 47. Note to Designers Thursday, November 7, 13
  • 48. Note to Designers ‣ We probably say no too often Thursday, November 7, 13
  • 49. Note to Designers ‣ We probably say no too often ‣ Don’t hate on your developers! It’s not their fault! (Random fun stuff isn’t well supported) Thursday, November 7, 13
  • 50. Note to Designers ‣ We probably say no too often ‣ Don’t hate on your developers! It’s not their fault! (Random fun stuff isn’t well supported) ‣ We’re afraid to work on things that have unpredictable deadlines Thursday, November 7, 13
  • 51. Note to Designers ‣ We probably say no too often ‣ Don’t hate on your developers! It’s not their fault! (Random fun stuff isn’t well supported) ‣ We’re afraid to work on things that have unpredictable deadlines ‣ Work with your project managers to make sure that developers feel comfortable making design risks that might end up not being used Thursday, November 7, 13
  • 52. Case Study - Trending Tag Can we have these little boxes, and inside the boxes, new posts come in from the left and right, kind of like the Windows live tiles? Thursday, November 7, 13
  • 53. (me) Thursday, November 7, 13
  • 54. Architecture Thursday, November 7, 13
  • 55. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) Thursday, November 7, 13
  • 56. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List Thursday, November 7, 13
  • 57. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher Thursday, November 7, 13
  • 58. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views Thursday, November 7, 13
  • 59. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state Thursday, November 7, 13
  • 60. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag Thursday, November 7, 13
  • 61. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag ‣ 7 types of child views Thursday, November 7, 13
  • 62. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag ‣ 7 types of child views ‣ Stateless Thursday, November 7, 13
  • 63. Architecture ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag ‣ 7 types of child views ‣ Stateless ‣ Manages it’s own design Thursday, November 7, 13
  • 64. Issues Always animating Thursday, November 7, 13
  • 65. Issues Always animating ‣ Since main screen is a ViewPager, the Animations were always running Thursday, November 7, 13
  • 66. Issues Always animating ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations Thursday, November 7, 13
  • 67. Issues Always animating ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations ‣ Header Views are never recycled Thursday, November 7, 13
  • 68. Issues Always animating ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations ‣ Header Views are never recycled ‣ always animating even if not visible Thursday, November 7, 13
  • 69. Issues Always animating ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations ‣ Header Views are never recycled ‣ always animating even if not visible ‣ Hurts scroll performance Thursday, November 7, 13
  • 70. The code sucks Thursday, November 7, 13
  • 71. The code sucks Doesn’t matter, still works Thursday, November 7, 13
  • 72. Section 2 Whimsy Thursday, November 7, 13
  • 73. Creative block? Thursday, November 7, 13
  • 74. Get drunk. Thursday, November 7, 13
  • 75. There is nothing fun about holo Thursday, November 7, 13
  • 76. There is nothing fun about holo Your app should be fun Thursday, November 7, 13
  • 77. Use Colors Vine Thursday, November 7, 13 Rdio
  • 78. Do unexpected things Yelp Thursday, November 7, 13
  • 79. Do unexpected things Yelp Thursday, November 7, 13 Foursquare (iOS, but it’s still awesome)
  • 80. Add meaningful animations Pinterest Thursday, November 7, 13 Circa
  • 81. Add meaningful animations Pinterest Thursday, November 7, 13 Circa
  • 82. Add meaningful animations Pinterest (Check out 4.4 ListViewWindowCompat) Thursday, November 7, 13 Circa
  • 83. Add meaningless animations Snapchat Thursday, November 7, 13
  • 84. Why? its fun. We like to be delighted Thursday, November 7, 13
  • 85. Screen Action Items Thursday, November 7, 13
  • 86. Screen Action Items - Actionable items outside of the ActionBar Thursday, November 7, 13
  • 87. Screen Action Items - Actionable items outside of the ActionBar - Unique experience of blending your passive content Thursday, November 7, 13
  • 88. Screen Action Items - Actionable items outside of the ActionBar - Unique experience of blending your passive content - Provide unique branding Thursday, November 7, 13
  • 89. Screen Action Items - Actionable items outside of the ActionBar - Unique experience of blending your passive content - Provide unique branding - Great place to have “fun” Thursday, November 7, 13
  • 90. How’d we do it? Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: Thursday, November 7, 13
  • 91. How’d we do it? Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? Thursday, November 7, 13
  • 92. How’d we do it? Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? - Hide on select or scroll? Thursday, November 7, 13
  • 93. How’d we do it? Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? - Hide on select or scroll? - Every Activity (or fragment)? Thursday, November 7, 13
  • 94. How’d we do it? Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? - Hide on select or scroll? - Every Activity (or fragment)? - Moveable? Thursday, November 7, 13
  • 95. How’d we do it? Thursday, November 7, 13
  • 96. How’d we do it? - Create Views Dynamically Thursday, November 7, 13
  • 97. How’d we do it? - Create Views Dynamically - Add Views to DecorView for maximum flexibility Thursday, November 7, 13
  • 98. How’d we do it? - Create Views Dynamically - Add Views to DecorView for maximum flexibility (getWindow().getDecorView()) Thursday, November 7, 13
  • 99. How’d we do it? - Create Views Dynamically - Add Views to DecorView for maximum flexibility (getWindow().getDecorView()) - If targeting API < 11, position using left / top margins Thursday, November 7, 13
  • 100. How’d we do it? - Create Views Dynamically - Add Views to DecorView for maximum flexibility (getWindow().getDecorView()) - If targeting API < 11, position using left / top margins - If targeting API >= 11, can position using setX / setY or using animators Thursday, November 7, 13
  • 101. What can I do today? Thursday, November 7, 13
  • 102. What can I do today? Add fun press states! Thursday, November 7, 13
  • 103. Growing Press State Thursday, November 7, 13
  • 104. Growing Press State Mileage may vary based on how you want to detect “move outside” Thursday, November 7, 13
  • 105. Growing Press State continued Thursday, November 7, 13
  • 106. Growing Press State continued Use more than 2 values Thursday, November 7, 13
  • 107. Growing Press State continued Use more than 2 values Use Different interpolators Thursday, November 7, 13
  • 108. Thursday, November 7, 13
  • 109. What can I do today? Cooler Transitions Thursday, November 7, 13
  • 110. What can I do today? Dialog Themed Activitys and Popup Components to reduce Navigation Remorse Facebook Thursday, November 7, 13 Tumblr
  • 111. What can I do today? Action Animations make me feel special Google+ Thursday, November 7, 13 Tumblr
  • 112. Section 3 BE A DESIGN LEADER Don’t be a follower Thursday, November 7, 13
  • 113. Everything we have started as someones idea Thursday, November 7, 13
  • 114. Everything we have started as someones idea ‣ ViewPager Thursday, November 7, 13
  • 115. Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom Thursday, November 7, 13
  • 116. Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom ‣ Slide to dismiss list-items Thursday, November 7, 13
  • 117. Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom ‣ Slide to dismiss list-items ‣ Pretty much everything Thursday, November 7, 13
  • 118. Navigation Drawer Remember when this was socially unacceptable? Thursday, November 7, 13
  • 119. Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer Thursday, November 7, 13
  • 120. Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer ‣ Sloppy Design Thursday, November 7, 13
  • 121. Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer ‣ Sloppy Design ‣ Doing it wrong Thursday, November 7, 13
  • 122. Now it’s a leading navigation style Thursday, November 7, 13
  • 123. Now it’s a leading navigation style ESPN ScoreCenter Thursday, November 7, 13
  • 124. Now it’s a leading navigation style ESPN ScoreCenter Thursday, November 7, 13 Foursquare
  • 125. Now it’s a leading navigation style ESPN ScoreCenter Thursday, November 7, 13 Foursquare Facebook
  • 126. Now it’s a leading navigation style ESPN ScoreCenter Thursday, November 7, 13 Foursquare Facebook Spotify
  • 127. In Every Google App Thursday, November 7, 13
  • 128. In Every Google App Thursday, November 7, 13
  • 129. But what if I want to change it a bit Thursday, November 7, 13
  • 130. But what if I want to change it a bit Generates a lot of rage Thursday, November 7, 13
  • 131. But what if I want to change it a bit Generates a lot of rage Thursday, November 7, 13
  • 132. Until Google does it, then it’s fine Thursday, November 7, 13
  • 133. Until Google does it, then it’s fine Thursday, November 7, 13
  • 134. Pull To Refresh Remember when this was considered bad design for Android? Thursday, November 7, 13
  • 135. Now it’s a behavior all users expect Twitter Foursquare Path show images of all the apps Text Thursday, November 7, 13
  • 136. Now it’s a behavior all users expect Twitter Foursquare Path (the booger) show images of all the apps Text Thursday, November 7, 13
  • 137. And Google added it into all of their products No official support yet =( Gmail Thursday, November 7, 13 Google+ Drive
  • 138. How does Chrome even fit in? Thursday, November 7, 13
  • 139. How does Chrome even fit in? I dunno, but it’s awesome Thursday, November 7, 13
  • 140. What does this all mean? Thursday, November 7, 13
  • 141. What does this all mean? Do something awesome Thursday, November 7, 13
  • 142. What does this all mean? Do something awesome (but don’t use lens flares) Thursday, November 7, 13
  • 143. Swipe Back (stolen from iOS7) Thursday, November 7, 13
  • 144. Thursday, November 7, 13
  • 145. iOS != Bad Thursday, November 7, 13
  • 146. iOS != Bad Even though I like to pretend it does Thursday, November 7, 13
  • 147. Thursday, November 7, 13
  • 148. Design for a tiny hand. Thursday, November 7, 13
  • 149. Design for a tiny hand. Thursday, November 7, 13
  • 150. Design for a tiny hand. - Up Button too far away Thursday, November 7, 13
  • 151. Design for a tiny hand. - Up Button too far away - Back button provides no context Thursday, November 7, 13
  • 152. Design for a tiny hand. - Up Button too far away - Back button provides no context - Why not? Thursday, November 7, 13
  • 153. Swipe Back Thursday, November 7, 13
  • 154. How’d we do it Thursday, November 7, 13
  • 155. How’d we do it Before launching any activity, capture the bitmap of the current window and save it in image cache. Thursday, November 7, 13
  • 156. How’d we do it Before launching any activity, capture the bitmap of the current window and save it in image cache. Override setContentView in the receiving activity and set the bitmap on an ImageView behind the activity, on the DecorView Thursday, November 7, 13
  • 157. How’d we do it Before launching any activity, capture the bitmap of the current window and save it in image cache. Override setContentView in the receiving activity and set the bitmap on an ImageView behind the activity, on the DecorView Open source coming soon! Thursday, November 7, 13
  • 158. Whatever you do: Be consistent Thursday, November 7, 13
  • 159. We Took our cues from Android... Thursday, November 7, 13
  • 160. And went a bit further Thursday, November 7, 13
  • 161. Wrapping up Thursday, November 7, 13
  • 162. Wrapping up ‣ Say YES, it’s what makes our shit awesome Thursday, November 7, 13
  • 163. Wrapping up ‣ Say YES, it’s what makes our shit awesome ‣ Be WHIMSICAL! Thursday, November 7, 13
  • 164. Wrapping up ‣ Say YES, it’s what makes our shit awesome ‣ Be WHIMSICAL! ‣ Be a DESIGN LEADER and push beyond the guidelines Thursday, November 7, 13
  • 165. “Good applications follow the guidelines, better applications challenge them.” Thursday, November 7, 13
  • 166. Thank you! kevingrant@tumblr.com kevinthebigapple.tumblr.com @kevingrant5 Thursday, November 7, 13