Design Tools - Closing the Gap Between Designer and Developer

Alternative Title: What to expect as a Android Developer from Designer for Design Handoffs

The talk is about all the tooling used by the speaker in designing UI and Interactions at Fabulous and how the handover happened between design and dev team to ensure best quality app implementation. It also talks about some of the common obstacles in efficient communication between designer and developer and how to address them for better communication.

This is mainly aimed as a sharing to the developers on what/how a usual designer used for designing, and what are some of the tools that can help in better communication between designer and developer.

Transcript

1. Design Tools Closing the Gap Between Design and Development
2. What to expect as Android Developer from Designer For Design Handoffs
3. In the not so distant past…
5. And now…
7. Why should you care?
8. Designer Developer
10. Visual Design
11. Screen Mock Icons Illustrations
12. Adobe XD Framer Gravit Designer Figma
13. 360pt 640pt
14. 360pt 640pt
15. 360pt 640pt mdpi (1x) Helps in specs handoff and assets management
16. mdpi (1x) 24dp × 24dp 20sp 24dp 56dp × 56dp Helps in specs handoff and assets management
17. 360pt 640pt 411pt 731pt Nexus 5 Google Pixel
18. 360pt 640pt 569pt 320pt Android Go Android
20. ✓ Screen designs in proper sizes (360x640 as base) ✓ A more consistent design with design templates, symbols, shared styles etc. Visual Design
21. Design Assets
23. png/svg png/svg png/svg png/jpg png/jpg png/jpg png/jpg png/svg
24. png/svg png/svg png/svg png/jpg png/jpg png/jpg png/jpg png/svg
25. 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
26. SVG SVG 1x mdpi 1x SVG/VD j.mp/vector-workflows
29. Scrim (20% black) Asset (Right align) Card (Use #64D4FF) Text Label
31. .png ~46MB
32. .png Total ~46MB
33. ImageOptim Compression PNG 90, JPG 85 Conversion PNG to JPG .png Total ~46MB
34. ImageOptim Compression PNG 90, JPG 85 Conversion PNG to JPG .png Total ~46MB ~46MB ~20MB ~56.5%
35. ARGB_8888 RGB_565 Bitmap Configuration
36. ✓ 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
37. Design Specs
38. Redlines
39. Redlines
41. Export Generate 56dp 56dp
43. ✓ 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
44. Interaction Design
46. Screen Flow Diagram Sketch
47. Principle for Mac Simple Interaction Complex Interaction Sketch, Adobe XD, Invision, Marvel, Atomic, Principle, Kite Compositor, Framer
48. Principle for Mac
50. Import Into Export as Create interactive and animated mock up Video Gif PRD file APP file Create static mock up
52. Animation Specs
53. Animation Specs
54. Animation Specs
55. Animation Specs
56. Delay for 100ms Animate in 300ms Scale from 0.8 to 1.0 Move up 30dp Conversion to Code
57. Ease Out Ease In Ease Both (Standard) Easing curves Custom Cubic Bezier
58. Easing curves FastOutSlowIn LinearOutSlowIn FastOutLinearIn For objects that MOVE ACROSS the screen For objects that ENTER the screen For objects that EXIT the screen
59. Framer Kite Compositor Invision Studio (Closed Beta) Alternatives
60. ✓ 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
61. Animation Design
63. 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
64. Export SVG Create Illustrations Import SVG, Create AI Export AI Import AI, Animate Export Bodymovin Json/AVD file
65. Creating Animation in AE 230dp 230dp 230px 230px px = dp
66. Creating Animation in AE Make sure they are vectors Easily scalable as needed, and smaller size
67. Creating Animation in AE Not all AE features are supported Make sure to test on the mobile Expression https://www.lottiefiles.com/preview
69. Shape Shifter shapeshifter.design
71. ✓ 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
72. Hey Developer, Let’s
73. Get the designer to provide you with everything (or at least most of the thing) you need for development
74. Communicate with the designer to ensure that both are speaking the same language (e.g. dp, sp, FAB, snackbar, ripple etc.)
75. Ask if you have question related to the design. Avoid assumption.
76. Provide input to designer about what’s possible, and suggest alternative if something looks infeasible within the constraints
77. Understand that most of the designers doesn’t speak logic/code. Help designer to understand the constraints.
78. Try to avoid using jargon (a.k.a explain it like I am 5)
79. Understand the business goal / use case why certain things is designed
80. Observe and understand the beauty of design even if you are not going to design
81. Recap
82. Visual Design Design Assets Interaction Design Animation Design
83. What’s next?
85. Taylor Ling @taylorling
86. We are hiring! bit.ly/joinfabulous
87. Thank you