In Between at Smashing Conf Whistler, 2014

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
December 11, 2014

In Between at Smashing Conf Whistler, 2014

Historically, the intermediary states of our sites have been neglected. The transition between the starting and ending points has been treated as an afterthought, one we begrudgingly fix because they’re there and they stick out like a sore thumb. But the web is maturing, and our roles are shifting as it does. Through careful choreography we can make sure that these intermediate states feel intentional. That they don’t break our users state of flow, but help to maintain it. The result will be more delightful experiences for our users—from start to finish and every step along the way.

Presented at Smashing Conf 2014 in Whistler, Canada on December 11th, 2014.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

December 11, 2014
Tweet

Transcript

  1. 1.

    In Between Images of Looney Tunes Courtesy Chuck Jones Center

    for Creativity. All rights reserved. http:/ /www.directedbychuckjones.tumblr.com/ December 11, 2014 at Smashing Conf 2014: Whistler ! Tim Kadlec
 @tkadlec tim@timkadlec.com
  2. 4.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 10.
  9. 11.
  10. 14.
  11. 19.
  12. 20.

    1. Story sketches ! ! ! ! ! 3. Character

    Layouts ! ! 2. Storyboard ! !
  13. 21.
  14. 22.
  15. 23.

    ! 2. Storyboard ! ! ! ! 3. Character Layouts

    ! ! ! ! 4. Extremes 1. Story sketches ! ! !
  16. 24.

    ! ! ! ! 5. In-Betweeners ! ! 3. Character

    Layouts ! ! 2. Storyboard ! ! 1. Story sketches ! ! ! ! ! ! 4. Extremes
  17. 25.
  18. 26.
  19. 27.

    “You must learn to respect that golden atom, that single

    frame of action, that 1/24 of a second, because the difference between lightning and the lightning bug may hinge on that single frame. Chuck Jones
  20. 28.

    “Just so; every point on a line is of equal

    importance. That is rule 1 of all great drawing. ! Chuck Jones
  21. 29.

    “Just so; every point on a line is of equal

    importance. That is rule 1 of all great drawing. ! There is no rule 2. Chuck Jones
  22. 31.
  23. 32.

    x y

  24. 35.
  25. 39.
  26. 47.
  27. 48.
  28. 49.
  29. 50.
  30. 51.

    “It’s solely intended to enhance the user’s perception of your

    app as quick to launch and immediately ready for use.
  31. 52.
  32. 53.
  33. 54.
  34. 56.
  35. 58.
  36. 60.
  37. 61.
  38. 62.
  39. 63.
  40. 64.
  41. 66.
  42. 67.
  43. 69.
  44. 70.
  45. 71.
  46. 73.
  47. 77.
  48. 80.
  49. 81.
  50. 82.

    `

  51. 83.

    `

  52. 86.

    “A rule of thumb: However long you think you need,

    half it. ! Rachel Nabors Award Winning Cartoonist
  53. 87.

    “A rule of thumb: However long you think you need,

    half it. ! Then half it again! Rachel Nabors Award Winning Cartoonist
  54. 88.

    “Confession: sometimes when we release an update, I tighten up

    an old transition by ~50ms. ! Result: "Wow, this new version feels faster." Cenny Bowles
 Design Manager at Twitter
  55. 90.

    “At the beginning of the film the director knows what

    is about to happen but the audience does not. The timing at the start of a film is, therefore, probably rather slow until the audience has been introduced to the location, the characters and the mood of the film. Timing for Animation, Second Edition
  56. 95.
  57. 96.
  58. 97.
  59. 98.
  60. 99.

    97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993

    97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338
  61. 104.
  62. 107.
  63. 108.
  64. 109.
  65. 110.
  66. 113.

    “My current advice to UX/IxD designers: learn motion design. !

    Rapidly becoming a required skill, and a huge multiplier for your work. Cenny Bowles
 Design Manager at Twitter
  67. 114.
  68. 122.

    thank you Images of Looney Tunes Courtesy Chuck Jones Center

    for Creativity. All rights reserved. http:/ /www.directedbychuckjones.tumblr.com/ Tim Kadlec
 @tkadlec tim@timkadlec.com