cinematic ux design
TRANSCRIPT
Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
joind.in/talk/view/13316 www.davidk.net
Concepts
Time Movement Transitions Continuity Narrative
Example
http://prezi.com/business-8 > http://prezi.com/ >
Time & Subject Movement
Time & Subject Movement
Saturday Night Fever (artofthetitle.com) >
Time & Subject Movement
Saturday Night Fever (artofthetitle.com) >
Fast movement, tilted angles add energy Low Angle empowers subject
Time & Subject Movement
Problems
Low contrast text Not mobile friendly
Fixes
“Shoot for the edit” Make responsive
CSS3 Transform
.element-animation {
animation-name: animationFrames;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
transform-origin: 50% 50%;
}
CSS3 Transform
@keyframes animationFrames{
0% {
transform: translate(0px,0px) ;
}
100% {
transform: translate(-154px,-119px) ;
}
}
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. });});
Camera Movement
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
Camera Movements
Camera movements can: Show context (establishing shot) Reveal Information Focus Attention
Camera Movements
The Conversation (artofthetitle.com)
Camera Movements
The Conversation (artofthetitle.com)
Wide shot establishes context High Angle diminishes subjects Slow zoom builds tension Long take: no edits, adds authenticity
Camera Movements
Problems
Pans add tension Pans did not reveal
new information Style not substance
Fixes
Remove slow zooms
Low angle shots
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
Illusion of Depth
Transitions
Transitions
Cut Fade, dissolve, superimpose Wipe, split screen
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)
Transitions
Livestream >
Fix:
Split screen: share multiple points of view,
requires active engagement and evaluation
Transitions
Cuts: Animation using JQuery
$( "div#man" ).replaceWith( "<img src="woman.png">" );
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.
Continuity
Continuity
Matched Cut: Maintain illusion of continuous space and time
Jump Cut: Breaks illusion of continuous space or time
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 websitevar video = document.getElementsByTagName("video")[0];video.currentTime = 360;
});
Narrative
More Options
<canvas> animationshttp://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
create.js code library for canvas
Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
joind.in/talk/view/13316 www.davidk.net