Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Time & Subject Movement
 Paypal >
Time & Subject Movement
 Paypal >
 Payments are fast
 Payments are effortless
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: li...
CSS3 Transform
@keyframes animationFrames{
0% {
transform: translate(0px,0px) ;
}
100% {
transform: translate(-154px,-119p...
CSS3 Animation Generator
 http://cssanimate.com/ >
jQuery Animation
<div id="clickme">Click here</div>
<img id= "cat" src="cat.png" style="position: relative;
left: 10px;">
...
Camera Movement
Camera Movements
 Pan: camera aims left or right
 Truck: camera moves left or right
 Tilt: camera aims up or down
 Ped...
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
...
Camera Movements
 Whiteboard >
Camera Movements
 Whiteboard >
 Company’s employees are intense
Camera Movements
Problems
 Pans add tension
 Pans did not reveal
new information
 Style not substance
Fixes
 Remove sl...
Virtual Camera Movement Code
<div id="clickme">Click here</div>
<div id="camera">
<div id="woman"><img src="woman.png" ......
Illusion of Depth
Transitions
Transitions
 Cut
 Fade, dissolve, superimpose
 Wipe, split screen
Transitions
 Livestream >
Transitions
 Livestream >
 Parallel editing: maintain continuity of single
narrative across multiple locations (silent f...
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( "slo...
Continuity
Continuity
 Matched Cut: Maintain illusion of
continuous space and time
 Jump Cut: Breaks illusion of continuous
space o...
Continuity
 Music Video Test >
Continuity
$( "#stopicon" ).click(function() {
$( "#filmicon" ).fadeIn( 1000 );
$( "#stopicon" ).fadeOut( 1000 );
// slide...
Jump Cuts
 Traffic #1
 Traffic #2
 Annabelle Movie >
Narrative
Narrative
 Hollow Documentary >
More Options
<canvas> animations
http://www.html5canvastutorials.com/advanced/
html5-canvas-animation-stage/
create.js c...
Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
joind.in/talk/view/13316 www.davidk.net
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

Cinematic UX Design

Download to read offline

Modern website design has expanded beyond the traditional page model. "The movies" are a source of inspiration for a new generation of websites such as interactive music videos. Discover the cinematic language used by filmmakers to deliver emotional experiences, and see code that makes it work. The examples, including JQuery effects, CSS3 animations, and the HTML5 Canvas, will demonstrate how to deliver content for maximum emotional impact.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Cinematic UX Design

  1. 1. Cinematic UX Design Website Interfaces Inspired by Film David Kelleher joind.in/talk/view/13316 www.davidk.net
  2. 2. Concepts  Time  Movement  Transitions  Continuity  Narrative
  3. 3. Example  http://prezi.com/business-8 >  http://prezi.com/ >
  4. 4. Time & Subject Movement
  5. 5. Time & Subject Movement  Saturday Night Fever (artofthetitle.com) >
  6. 6. Time & Subject Movement  Saturday Night Fever (artofthetitle.com) >  Fast movement, tilted angles add energy  Low Angle empowers subject
  7. 7. Time & Subject Movement  Paypal >
  8. 8. Time & Subject Movement  Paypal >  Payments are fast  Payments are effortless
  9. 9. Time & Subject Movement Problems  Low contrast text  Not mobile friendly Fixes “Shoot for the edit”  Make responsive
  10. 10. CSS3 Transform .element-animation { animation-name: animationFrames; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 50% 50%; }
  11. 11. CSS3 Transform @keyframes animationFrames{ 0% { transform: translate(0px,0px) ; } 100% { transform: translate(-154px,-119px) ; } }
  12. 12. CSS3 Animation Generator  http://cssanimate.com/ >
  13. 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. 14. Camera Movement
  15. 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. 16. Camera Movements Camera movements can:  Show context (establishing shot)  Reveal Information  Focus Attention
  17. 17. Camera Movements  The Conversation (artofthetitle.com)
  18. 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. 19. Camera Movements  Whiteboard >
  20. 20. Camera Movements  Whiteboard >  Company’s employees are intense
  21. 21. Camera Movements Problems  Pans add tension  Pans did not reveal new information  Style not substance Fixes  Remove slow zooms  Low angle shots
  22. 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. 23. Illusion of Depth
  24. 24. Transitions
  25. 25. Transitions  Cut  Fade, dissolve, superimpose  Wipe, split screen
  26. 26. Transitions  Livestream >
  27. 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. 28. Transitions  Livestream > Fix:  Split screen: share multiple points of view, requires active engagement and evaluation
  29. 29. Transitions Cuts: Animation using JQuery $( "div#man" ).replaceWith( "<img src="woman.png">" );
  30. 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. 31. Continuity
  32. 32. Continuity  Matched Cut: Maintain illusion of continuous space and time  Jump Cut: Breaks illusion of continuous space or time
  33. 33. Continuity  Music Video Test >
  34. 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. 35. Jump Cuts  Traffic #1  Traffic #2  Annabelle Movie >
  36. 36. Narrative
  37. 37. Narrative  Hollow Documentary >
  38. 38. More Options <canvas> animations http://www.html5canvastutorials.com/advanced/ html5-canvas-animation-stage/ create.js code library for canvas
  39. 39. Cinematic UX Design Website Interfaces Inspired by Film David Kelleher joind.in/talk/view/13316 www.davidk.net

Modern website design has expanded beyond the traditional page model. "The movies" are a source of inspiration for a new generation of websites such as interactive music videos. Discover the cinematic language used by filmmakers to deliver emotional experiences, and see code that makes it work. The examples, including JQuery effects, CSS3 animations, and the HTML5 Canvas, will demonstrate how to deliver content for maximum emotional impact.

Views

Total views

768

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

9

Shares

0

Comments

0

Likes

0

×