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