This document discusses cinematic UX design for websites, drawing inspiration from film techniques. It covers concepts like time, movement, transitions, continuity and narrative. Examples are given of how these concepts can be applied, such as using camera movements or animation. CSS3 and jQuery are demonstrated for implementing techniques like pans, tilts, zooms, fades and cuts. Problems with some examples are identified and fixes suggested to better achieve the goals of the cinematic techniques. Additional options like canvas animations are also briefly mentioned.

1. Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
joind.in/talk/view/13316 www.davidk.net

2. Concepts
 Time
 Movement
 Transitions
 Continuity
 Narrative

3. Example
 http://prezi.com/business-8 >
 http://prezi.com/ >

4. Time & Subject Movement

5. Time & Subject Movement
 Saturday Night Fever (artofthetitle.com) >

6. Time & Subject Movement
 Saturday Night Fever (artofthetitle.com) >
 Fast movement, tilted angles add energy
 Low Angle empowers subject

7. Time & Subject Movement
 Paypal >

8. Time & Subject Movement
 Paypal >
 Payments are fast
 Payments are effortless

9. Time & Subject Movement
Problems
 Low contrast text
 Not mobile friendly
Fixes
“Shoot for the edit”
 Make responsive

10. CSS3 Transform
.element-animation {
animation-name: animationFrames;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
transform-origin: 50% 50%;
}

11. CSS3 Transform
@keyframes animationFrames{
0% {
transform: translate(0px,0px) ;
}
100% {
transform: translate(-154px,-119px) ;
}
}

12. CSS3 Animation Generator
 http://cssanimate.com/ >

13. jQuery Animation
<div id="clickme">Click here</div>
<img id= "cat" src="cat.png" style="position: relative;
left: 10px;">
$( "#clickme" ).click(function() {
$( "#cat" ).animate({left: "+=50"}, 5000, function() {
// Animation complete.
});
});

14. Camera Movement

15. Camera Movements
 Pan: camera aims left or right
 Truck: camera moves left or right
 Tilt: camera aims up or down
 Pedestal: camera moves up or down
 Zoom: camera’s focal length changes
 Dolly: camera moves forward or back

16. Camera Movements
Camera movements can:
 Show context (establishing shot)
 Reveal Information
 Focus Attention

17. Camera Movements
 The Conversation (artofthetitle.com)

18. Camera Movements
 The Conversation (artofthetitle.com)
 Wide shot establishes context
 High Angle diminishes subjects
 Slow zoom builds tension
 Long take: no edits, adds authenticity

19. Camera Movements
 Whiteboard >

20. Camera Movements
 Whiteboard >
 Company’s employees are intense

21. Camera Movements
Problems
 Pans add tension
 Pans did not reveal
new information
 Style not substance
Fixes
 Remove slow zooms
 Low angle shots

22. Virtual Camera Movement Code
<div id="clickme">Click here</div>
<div id="camera">
<div id="woman"><img src="woman.png" ... ></div>
<div id="man"><img src="man.png" ... ></div>
</div>
Camera movements are done by animating a wrapper div around
the scene’s content:
 Pan = change “left” property
 Tilt = change “top” property value
 Zoom = change “scale-x, scale-y” property values

23. Illusion of Depth

24. Transitions

25. Transitions
 Cut
 Fade, dissolve, superimpose
 Wipe, split screen

26. Transitions
 Livestream >

27. Transitions
 Livestream >
 Parallel editing: maintain continuity of single
narrative across multiple locations (silent film
train tracks rescue)
 Montage editing: juxtapose clips to create
new meaning, emotional and dramatic
(1964 policitcal ad)

28. Transitions
 Livestream >
Fix:
 Split screen: share multiple points of view,
requires active engagement and evaluation

29. Transitions
Cuts: Animation using JQuery
$( "div#man" ).replaceWith( "<img src="woman.png">" );

30. Transitions
Fades: Animation using JQuery
$( "div:hidden:first" ).fadeIn( "slow" );
$( "div:visible:first" ).fadeOut( "slow" );
With a visible element lower in the z-index stack, the result is a dissolve.
A wipe can be accomplished by moving an element over one lower
in the z-index stack.

31. Continuity

32. Continuity
 Matched Cut: Maintain illusion of
continuous space and time
 Jump Cut: Breaks illusion of continuous
space or time

33. Continuity
 Music Video Test >

34. Continuity
$( "#stopicon" ).click(function() {
$( "#filmicon" ).fadeIn( 1000 );
$( "#stopicon" ).fadeOut( 1000 );
// slide logo
$( "#content" ).delay( 13000 ).animate({ "margin-left": "+=22rem " },
1000, function() {
$( ".socialcontent" ).fadeIn( 500 );
$( ".pagecontent" ).fadeIn( 500 );
});
// jump to end, video transitions back to main website
var video = document.getElementsByTagName("video")[0];
video.currentTime = 360;
});

35. Jump Cuts
 Traffic #1
 Traffic #2
 Annabelle Movie >

36. Narrative

37. Narrative
 Hollow Documentary >

38. More Options
<canvas> animations
http://www.html5canvastutorials.com/advanced/
html5-canvas-animation-stage/
create.js code library for canvas

39. Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
joind.in/talk/view/13316 www.davidk.net