Cinematic UX Design

Website Interfaces Inspired by Film David Kelleher

NEPHP 2014www.davidk.net

https://joind.in/talk/view/11482

About Me

http://youtu.be/PBQyzNO_dtk

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