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

992 views

Published on

Websites have expanded design beyond the tranditional 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.

Published in: Design
  • Be the first to comment

Cinematic UX Design

  1. 1. Cinematic UX Design Website Interfaces Inspired by Film David Kelleher NEPHP 2014 www.davidk.net https://joind.in/talk/view/11482
  2. 2. About Me http://youtu.be/PBQyzNO_dtk
  3. 3. Motion Pictures 1. A series of pictures on a strip of film, taken at regular intervals in rapid succession by a special camera, intended to capture the image of objects in motion. - GNU Collaborative International Dictionary Concepts • Composition • Camera Lenses • Lighting • Time • Movement • Depth • Transitions • Narrative • Continuity
  4. 4. Cinematic Interfaces  Large “hero units” and full screen background images and videos  Substantial motion graphics and animated content  Tells a story or conveys emotions using the language of film
  5. 5. Cinematic Interface Examples http://whiteboard.is/  Poor Contrast  Distracting Movements  Creepy Videos  No Interface Clues  No Brand Story http://contrastrebellion.com/  Excellent Contrast  Subtle Animation  Purposeful Motion  Useful interface Clues  Clear Narrative Structure
  6. 6. Art of the Title  http://www.artofthetitle.com/title/the-conversation/ Long take and slow movements gradually builds tension, high angle diminishes subject  http://www.artofthetitle.com/title/saturday-night-fever/ Montage cuts and fast movements add dynamic energy, low angle empowers subject
  7. 7. Camera Angle Low angle empowers subject High angle diminishes subject Self-Portrait, Margaret Bourke-White
  8. 8. Camera Angle Low angle empowers subject High angle diminishes subject The Americans, Robert Frank
  9. 9. Aspect Ratio Square = intimate Panoramic = epic I Love Lucy
  10. 10. Aspect Ratio Square = intimate Panoramic = epic 2001
  11. 11. Balance Balanced conveys calmness Unbalanced conveys tension Identical Twins, Diane Arbus
  12. 12. Balance Balanced conveys calmness Unbalanced conveys tension Austin, Garry Winogrand
  13. 13. Focal Length Telephoto lens compresses space Wide angle lens exaggerates space
  14. 14. Lighting Contrast High contrast is dramatic and powerful Low contrast is warm and cheerful
  15. 15. Movement and Time  Subject Movement and Tracking Shots: Animation using JQuery <div id="clickme">Click here</div> <img id="man" src="man.png" alt="" width="100" height="123" style="position: relative; left: 10px;"> $( "#clickme" ).click(function() { $( "#man" ).animate({left: "+=50"}, 5000, function() { // Animation complete. }); });
  16. 16. Movement and Time  Camera Movement: Animation using JQuery 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 to zoom in or out Dolly: camera moves forward or back
  17. 17. Movement and Time  Camera Movements: Animation using JQuery <div id="clickme">Click here</div> <div id="camera"> <img id="man" src="man.png" ... > <img id= "woman" src="woman.png" ... > </div> Camera movements are done by animating a wrapper div around the scene’s content. Move the div’s position to simulate truck and pedestal shots.
  18. 18. Illusion of Depth
  19. 19. Art of the Title  http://www.artofthetitle.com/title/the-lego-movie/ Real stop motion animation demonstrates the concept of motion parallax.
  20. 20. Transitions  Cuts: Animation using JQuery $( "div#man" ).replaceWith( "<img src="woman.png">" );
  21. 21. Transitions  Fades (passage of time): 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.
  22. 22. Narrative  http://hollowdocumentary.com/ Cinematic techniques show changes in the community over time
  23. 23. Continuity  http://therussianembassy.com/ Transitions occur very quickly and interface controls are available immediately
  24. 24. 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; });
  25. 25. David Kelleher  Please Rate the talk https://joind.in/talk/view/11482  Contact Me http://davidk.net

×