Design and Android - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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?

Slide 4

Slide 4 text

O N B E I N G A C O N F O R M I S T

Slide 5

Slide 5 text

I was once like many of you

Slide 6

Slide 6 text

I was a (design guidelines) conformist

Slide 7

Slide 7 text

“ 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?”

Slide 8

Slide 8 text

“If Google wanted us to be able to do that,   it would work that way” – M E

Slide 9

Slide 9 text

– D E S I G N E R “Alright, then just do the best you can.”

Slide 10

Slide 10 text

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 ﬁnally adopted the holo guidelines.

Slide 11

Slide 11 text

But thats it. End of story. There’s no memorable pieces left, because there were none.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

W H AT D O YO U M E A N BY D E S I G N ?

Slide 14

Slide 14 text

“I’m not a good designer, I can’t draw.”

Slide 15

Slide 15 text

• Visual Design • Interaction Design • Product Design T Y P E S O F D E S I G N

Slide 16

Slide 16 text

“Does it look good?” V I S U A L D E S I G N

Slide 17

Slide 17 text

• Typography • Colors • Graphics • Cohesive look and feel V I S U A L D E S I G N

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

“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/

Slide 20

Slide 20 text

• Information Architecture • Intuitive • Navigation • Transitions • Animations I N T E R A C T I O N D E S I G N

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

“Is this valuable?” P R O D U C T D E S I G N

Slide 23

Slide 23 text

• Valuable • Useful • Makes sense • Vision P R O D U C T D E S I G N

Slide 24

Slide 24 text

Design can mean many things. You don’t have to ﬁll all of the roles yourself.

Slide 25

Slide 25 text

L E S S O N 1 - Pay attention

Slide 26

Slide 26 text

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.”

Slide 27

Slide 27 text

– 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”

Slide 28

Slide 28 text

W H AT I S M AT E R I A L D E S I G N ?

Slide 29

Slide 29 text

C R O S S P L AT F O R M

Slide 30

Slide 30 text

PA P E R Tangible Surfaces inspired by the world of print design, with properties that extend beyond it’s physical representation.

Slide 31

Slide 31 text

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?

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

B O L D C O LO R S Color is inspired by bold color statements juxtaposed with muted environments

Slide 34

Slide 34 text

I C O N O G R A P HY “The design of system icons is simple, modern, friendly, and sometimes quirky.”

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

I M A G E RY Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product.

Slide 37

Slide 37 text

What if I told you that Material Design isn’t new

Slide 38

Slide 38 text

What if I told you it’s been under our noses this whole time

Slide 39

Slide 39 text

PA P E R ? • Etsy • Pinterest • Google+

Slide 40

Slide 40 text

R O U N D AVATA R S • Vine • Pinterest • Instagram

Slide 41

Slide 41 text

S C E N E T R A N S IT I O N S • Tumblr

Slide 42

Slide 42 text

A C C E NT C O LO R S • Pocket Casts

Slide 43

Slide 43 text

F LOAT I N G A CT I O N B U T TO N • Path • Tumblr • Foursquare* • (Chatheads?) *removed in latest designs

Slide 44

Slide 44 text

B A C K A R R O W S • Instagram

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

You can create your own design patterns. If they’re good, others will follow

Slide 47

Slide 47 text

“Dang, you’re right”

Slide 48

Slide 48 text

• 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

Slide 49

Slide 49 text

I S M AT E R I A L D E S I G N N E C E S S A RY ?

Slide 50

Slide 50 text

• 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.

Slide 51

Slide 51 text

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)

Slide 52

Slide 52 text

N E W P I E C E S • Dynamic Shadows • Activity Transitions • Reveal Transitions • RecyclerView • Ripple States • more than I even know

Slide 53

Slide 53 text

Material design is a gift, don’t take it for granted L E S S O N 2 -

Slide 54

Slide 54 text

W H AT C A N I D O TO DAY ?

Slide 55

Slide 55 text

– E A G E R D E V E LO P E R “Material Design means we get to rebuild the app, right?”

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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 modiﬁed by  changing the theme • You don’t have to change everything all at once

Slide 58

Slide 58 text

“Then what?”

Slide 59

Slide 59 text

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?

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

http://graphics-geek.blogspot.ca/2013/06/devbytes-custom-activity-animations.html

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

T W O R E S T S TAT E S ? • Deﬁne 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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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   “ﬁx my margins” api Check out dspec by Lucas Rocha http://lucasr.org/2014/09/08/introducing-dspec/

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

GET INSPIRED

Slide 75

Slide 75 text

There’s plenty of work to do L E S S O N 3 -

Slide 76

Slide 76 text

Being a conformist leads to forgotten design

Slide 77

Slide 77 text

Design is more than a pretty picture

Slide 78

Slide 78 text

The guidelines were inspired   by people like us

Slide 79

Slide 79 text

The guidelines were crafted to   make our lives better

Slide 80

Slide 80 text

I can make my app better today

Slide 81

Slide 81 text

– M A R K B O U LTO N “Conformity and efﬁciency have a price. And that price is design.”

Slide 82

Slide 82 text

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