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. 4.
  2. 6.
  3. 9.
  4. 16.

    mdpi (1x) 24dp × 24dp 20sp 24dp 56dp × 56dp

    Helps in specs handoff and assets management
  5. 19.
  6. 20.

    ✓ Screen designs in proper sizes (360x640 as base) ✓

    A more consistent design with design templates, symbols, shared styles etc. Visual Design
  7. 22.
  8. 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
  9. 27.
  10. 28.
  11. 30.
  12. 34.
  13. 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
  14. 38.
  15. 39.
  16. 40.
  17. 42.
  18. 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
  19. 45.
  20. 47.

    Principle for Mac Simple Interaction Complex Interaction Sketch, Adobe XD,

    Invision, Marvel, Atomic, Principle, Kite Compositor, Framer
  21. 49.
  22. 50.

    Import Into Export as Create interactive and animated mock up

    Video Gif PRD file APP file Create static mock up
  23. 51.
  24. 56.

    Delay for 100ms Animate in 300ms Scale from 0.8 to

    1.0 Move up 30dp Conversion to Code
  25. 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
  26. 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
  27. 62.
  28. 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
  29. 64.

    Export SVG Create Illustrations Import SVG, Create AI Export AI

    Import AI, Animate Export Bodymovin Json/AVD file
  30. 66.

    Creating Animation in AE Make sure they are vectors Easily

    scalable as needed, and smaller size
  31. 67.

    Creating Animation in AE Not all AE features are supported

    Make sure to test on the mobile Expression https://www.lottiefiles.com/preview
  32. 68.
  33. 70.
  34. 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
  35. 73.

    Get the designer to provide you with everything (or at

    least most of the thing) you need for development
  36. 74.

    Communicate with the designer to ensure that both are speaking

    the same language (e.g. dp, sp, FAB, snackbar, ripple etc.)
  37. 76.

    Provide input to designer about what’s possible, and suggest alternative

    if something looks infeasible within the constraints
  38. 81.
  39. 84.
  40. 87.