The Space Between at Beyond Tellerand Berlin, 2014

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
November 03, 2014

The Space Between at Beyond Tellerand Berlin, 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 Beyond Tellerand Berlin, 2014 in Berlin, Germany on November 3rd, 2014.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

November 03, 2014
Tweet

Transcript

  1. 1.

    The Space Between Images of Looney Tunes Courtesy Chuck Jones

    Center for Creativity. All rights reserved. http:/ /www.directedbychuckjones.tumblr.com/ November 3, 2014 at BTConf, Berlin ! Tim Kadlec
 @tkadlec tim@timkadlec.com
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 13.
  7. 14.

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

    Layouts ! ! 2. Storyboard ! !
  8. 15.
  9. 16.
  10. 17.

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

    ! ! ! ! 4. Extremes 1. Story sketches ! ! !
  11. 18.

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

    Layouts ! ! 2. Storyboard ! ! 1. Story sketches ! ! ! ! ! ! 4. Extremes
  12. 19.
  13. 20.
  14. 21.

    “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
  15. 22.

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

    importance. That is rule 1 of all great drawing. ! Chuck Jones
  16. 23.

    “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
  17. 25.
  18. 26.

    x y

  19. 29.
  20. 30.
  21. 31.
  22. 35.
  23. 43.
  24. 44.
  25. 45.
  26. 46.
  27. 47.

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

    app as quick to launch and immediately ready for use.
  28. 48.
  29. 49.
  30. 50.
  31. 53.
  32. 55.
  33. 56.
  34. 57.
  35. 58.
  36. 59.
  37. 61.
  38. 62.
  39. 63.
  40. 65.
  41. 66.
  42. 67.
  43. 69.
  44. 70.
  45. 74.
  46. 77.
  47. 78.
  48. 79.

    `

  49. 80.

    `

  50. 83.

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

    half it. ! Rachel Nabors Award Winning Cartoonist
  51. 84.

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

    half it. ! Then half it again! Rachel Nabors Award Winning Cartoonist
  52. 85.

    “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
  53. 91.
  54. 92.
  55. 93.
  56. 94.
  57. 95.

    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
  58. 100.
  59. 103.
  60. 104.
  61. 105.
  62. 107.

    “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
  63. 108.
  64. 116.

    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