Realtime UX Design & The Growing UX Developer - UX/DEV SUMMIT
Cinematic UX Design
-
Upload
dave-kelleher -
Category
Design
-
view
495 -
download
0
description
Transcript of Cinematic UX Design
Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
NEPHP 2014www.davidk.net
https://joind.in/talk/view/11482
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
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
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
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
Camera Angle
Low angle empowers subject
High angle diminishes subject
Self-Portrait, Margaret Bourke-White
Camera Angle
Low angle empowers subject
High angle diminishes subject
The Americans, Robert Frank
Aspect Ratio
Square = intimate
Panoramic = epic
I Love Lucy
Aspect Ratio
Square = intimate
Panoramic = epic
2001
Balance
Balanced conveys calmness
Unbalanced conveys tension
Identical Twins, Diane Arbus
Balance
Balanced conveys calmness
Unbalanced conveys tension
Austin, Garry Winogrand
Focal Length
Telephoto lens compresses space
Wide angle lens exaggerates space
Lighting Contrast
High contrast is dramatic and powerful
Low contrast is warm and cheerful
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. });});
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
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.
Illusion of Depth
Art of the Title
http://www.artofthetitle.com/title/the-lego-movie/ Real stop motion animation demonstrates the concept of motion parallax.
Transitions
Cuts: Animation using JQuery
$( "div#man" ).replaceWith( "<img src="woman.png">" );
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.
Narrative
http://hollowdocumentary.com/ Cinematic techniques show changes in the community over time
Continuity
http://therussianembassy.com/Transitions occur very quickly and interface controls are available immediately
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;
});
David Kelleher
Please Rate the talk
https://joind.in/talk/view/11482
Contact Me
http://davidk.net