$30 off During Our Annual Pro Sale. View Details »

Design Tools - Closing the Gap Between Designer and Developer

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.

Taylor Ling

April 23, 2018
Tweet

More Decks by Taylor Ling

Other Decks in Design

Transcript

  1. Design Tools
    Closing the Gap Between Design and
    Development

    View Slide

  2. What to expect as Android
    Developer from Designer
    For Design Handoffs

    View Slide

  3. In the not so distant past…

    View Slide

  4. View Slide

  5. And now…

    View Slide

  6. View Slide

  7. Why should you care?

    View Slide

  8. Designer Developer

    View Slide

  9. View Slide

  10. Visual Design

    View Slide

  11. Screen Mock
    Icons
    Illustrations

    View Slide

  12. Adobe XD Framer Gravit Designer Figma

    View Slide

  13. 360pt
    640pt

    View Slide

  14. 360pt
    640pt

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. 360pt
    640pt
    569pt
    320pt
    Android Go
    Android

    View Slide

  19. View Slide

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

    View Slide

  21. Design Assets

    View Slide

  22. View Slide

  23. png/svg
    png/svg
    png/svg
    png/jpg
    png/jpg
    png/jpg
    png/jpg
    png/svg

    View Slide

  24. png/svg
    png/svg
    png/svg
    png/jpg
    png/jpg
    png/jpg
    png/jpg
    png/svg

    View Slide

  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

    View Slide

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

    View Slide

  27. View Slide

  28. View Slide

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

    View Slide

  30. View Slide

  31. .png
    ~46MB

    View Slide

  32. .png
    Total ~46MB

    View Slide

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

    View Slide

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

    View Slide

  35. ARGB_8888 RGB_565
    Bitmap Configuration

    View Slide

  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

    View Slide

  37. Design Specs

    View Slide

  38. Redlines

    View Slide

  39. Redlines

    View Slide

  40. View Slide

  41. Export Generate
    56dp
    56dp

    View Slide

  42. View Slide

  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

    View Slide

  44. Interaction Design

    View Slide

  45. View Slide

  46. Screen Flow
    Diagram
    Sketch

    View Slide

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

    View Slide

  48. Principle for Mac

    View Slide

  49. View Slide

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

    View Slide

  51. View Slide

  52. Animation Specs

    View Slide

  53. Animation Specs

    View Slide

  54. Animation Specs

    View Slide

  55. Animation Specs

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  59. Framer Kite Compositor Invision Studio
    (Closed Beta)
    Alternatives

    View Slide

  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

    View Slide

  61. Animation Design

    View Slide

  62. View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. View Slide

  69. Shape Shifter
    shapeshifter.design

    View Slide

  70. View Slide

  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

    View Slide

  72. Hey Developer,
    Let’s

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. Recap

    View Slide

  82. Visual
    Design
    Design
    Assets
    Interaction
    Design
    Animation
    Design

    View Slide

  83. What’s next?

    View Slide

  84. View Slide

  85. Taylor Ling
    @taylorling

    View Slide

  86. We are hiring!
    bit.ly/joinfabulous

    View Slide

  87. Thank you

    View Slide