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
   

   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