Design Tools - Closing the Gap Between Designer and Developer

005b3ccff562115ccb49c092038591b0?s=47 Taylor Ling
April 23, 2018

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.

005b3ccff562115ccb49c092038591b0?s=128

Taylor Ling

April 23, 2018
Tweet

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…

  4. None
  5. And now…

  6. None
  7. Why should you care?

  8. Designer Developer

  9. None
  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

  19. None
  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

  22. None
  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

  27. None
  28. None
  29. Scrim (20% black) Asset (Right align) Card (Use #64D4FF) Text

    Label
  30. None
  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

  40. None
  41. Export Generate 56dp 56dp

  42. None
  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

  45. None
  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

  49. None
  50. Import Into Export as Create interactive and animated mock up

    Video Gif PRD file APP file Create static mock up
  51. None
  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

  62. None
  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
  68. None
  69. Shape Shifter shapeshifter.design

  70. None
  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?

  84. None
  85. Taylor Ling @taylorling

  86. We are hiring! bit.ly/joinfabulous

  87. Thank you