Slide 1

Slide 1 text

Design Tools Closing the Gap Between Design and Development

Slide 2

Slide 2 text

What to expect as Android Developer from Designer For Design Handoffs

Slide 3

Slide 3 text

In the not so distant past…

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

And now…

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Why should you care?

Slide 8

Slide 8 text

Designer Developer

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Visual Design

Slide 11

Slide 11 text

Screen Mock Icons Illustrations

Slide 12

Slide 12 text

Adobe XD Framer Gravit Designer Figma

Slide 13

Slide 13 text

360pt 640pt

Slide 14

Slide 14 text

360pt 640pt

Slide 15

Slide 15 text

360pt 640pt mdpi (1x) Helps in specs handoff and assets management

Slide 16

Slide 16 text

mdpi (1x) 24dp × 24dp 20sp 24dp 56dp × 56dp Helps in specs handoff and assets management

Slide 17

Slide 17 text

360pt 640pt 411pt 731pt Nexus 5 Google Pixel

Slide 18

Slide 18 text

360pt 640pt 569pt 320pt Android Go Android

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

✓ Screen designs in proper sizes (360x640 as base) ✓ A more consistent design with design templates, symbols, shared styles etc. Visual Design

Slide 21

Slide 21 text

Design Assets

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

png/svg png/svg png/svg png/jpg png/jpg png/jpg png/jpg png/svg

Slide 24

Slide 24 text

png/svg png/svg png/svg png/jpg png/jpg png/jpg png/jpg png/svg

Slide 25

Slide 25 text

png, svg png, svg png, svg png, jpg png, jpg png, jpg png, jpg png, svg mdpi 1x hdpi 1.5x xhdpi 2x xxhdpi 3x xxxhdpi 4x SVG SVG 1x PNG

Slide 26

Slide 26 text

SVG SVG 1x mdpi 1x SVG/VD j.mp/vector-workflows

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Scrim (20% black) Asset (Right align) Card (Use #64D4FF) Text Label

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

.png ~46MB

Slide 32

Slide 32 text

.png Total ~46MB

Slide 33

Slide 33 text

ImageOptim Compression PNG 90, JPG 85 Conversion PNG to JPG .png Total ~46MB

Slide 34

Slide 34 text

ImageOptim Compression PNG 90, JPG 85 Conversion PNG to JPG .png Total ~46MB ~46MB ~20MB ~56.5%

Slide 35

Slide 35 text

ARGB_8888 RGB_565 Bitmap Configuration

Slide 36

Slide 36 text

✓ Usable design assets at proper sizes for different dpi. ✓ Assets are in appropriate format (jpg, png, svg) ✓ Assets usage are properly documented (e.g. how it should be placed, how it should be cropped) ✓ Assets are optimised Design Assets

Slide 37

Slide 37 text

Design Specs

Slide 38

Slide 38 text

Redlines

Slide 39

Slide 39 text

Redlines

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Export Generate 56dp 56dp

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

✓ Complete design specs with dp/sp values that can be used directly in development ✓ Easy communication on specific screens/spots if there is any spec change Design Specs

Slide 44

Slide 44 text

Interaction Design

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Screen Flow Diagram Sketch

Slide 47

Slide 47 text

Principle for Mac Simple Interaction Complex Interaction Sketch, Adobe XD, Invision, Marvel, Atomic, Principle, Kite Compositor, Framer

Slide 48

Slide 48 text

Principle for Mac

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Import Into Export as Create interactive and animated mock up Video Gif PRD file APP file Create static mock up

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Animation Specs

Slide 53

Slide 53 text

Animation Specs

Slide 54

Slide 54 text

Animation Specs

Slide 55

Slide 55 text

Animation Specs

Slide 56

Slide 56 text

Delay for 100ms Animate in 300ms Scale from 0.8 to 1.0 Move up 30dp Conversion to Code

Slide 57

Slide 57 text

Ease Out Ease In Ease Both (Standard) Easing curves Custom Cubic Bezier

Slide 58

Slide 58 text

Easing curves FastOutSlowIn LinearOutSlowIn FastOutLinearIn For objects that MOVE ACROSS the screen For objects that ENTER the screen For objects that EXIT the screen

Slide 59

Slide 59 text

Framer Kite Compositor Invision Studio (Closed Beta) Alternatives

Slide 60

Slide 60 text

✓ Screen flow diagram to explain the connection between screens ✓ A high quality interactive mock/video to show the interaction idea and the UI behaviour ✓ Ready to use Animation/Transition specs Interaction Design

Slide 61

Slide 61 text

Animation Design

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json and renders them natively on mobile and on the web. Lottie

Slide 64

Slide 64 text

Export SVG Create Illustrations Import SVG, Create AI Export AI Import AI, Animate Export Bodymovin Json/AVD file

Slide 65

Slide 65 text

Creating Animation in AE 230dp 230dp 230px 230px px = dp

Slide 66

Slide 66 text

Creating Animation in AE Make sure they are vectors Easily scalable as needed, and smaller size

Slide 67

Slide 67 text

Creating Animation in AE Not all AE features are supported Make sure to test on the mobile Expression https://www.lottiefiles.com/preview

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Shape Shifter shapeshifter.design

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

✓ A demo on how the animation should be used (video or the files using with preview app) ✓ A json/AVD file (designed in proper size) generated with bodymovin ✓ A clear narrative if the animation are linked to interactions/conditions (when to start, when to stop, when to repeat, which frames etc.) Animation Design

Slide 72

Slide 72 text

Hey Developer, Let’s

Slide 73

Slide 73 text

Get the designer to provide you with everything (or at least most of the thing) you need for development

Slide 74

Slide 74 text

Communicate with the designer to ensure that both are speaking the same language (e.g. dp, sp, FAB, snackbar, ripple etc.)

Slide 75

Slide 75 text

Ask if you have question related to the design. Avoid assumption.

Slide 76

Slide 76 text

Provide input to designer about what’s possible, and suggest alternative if something looks infeasible within the constraints

Slide 77

Slide 77 text

Understand that most of the designers doesn’t speak logic/code. Help designer to understand the constraints.

Slide 78

Slide 78 text

Try to avoid using jargon (a.k.a explain it like I am 5)

Slide 79

Slide 79 text

Understand the business goal / use case why certain things is designed

Slide 80

Slide 80 text

Observe and understand the beauty of design even if you are not going to design

Slide 81

Slide 81 text

Recap

Slide 82

Slide 82 text

Visual Design Design Assets Interaction Design Animation Design

Slide 83

Slide 83 text

What’s next?

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Taylor Ling @taylorling

Slide 86

Slide 86 text

We are hiring! bit.ly/joinfabulous

Slide 87

Slide 87 text

Thank you