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.

1. Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
NEPHP 2014 www.davidk.net
https://joind.in/talk/view/11482

2. About Me
http://youtu.be/PBQyzNO_dtk

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. 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. 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. 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. Camera Angle
Low angle empowers subject
High angle diminishes subject
Self-Portrait, Margaret Bourke-White

8. Camera Angle
Low angle empowers subject
High angle diminishes subject
The Americans, Robert Frank

9. Aspect Ratio
Square = intimate
Panoramic = epic
I Love Lucy

10. Aspect Ratio
Square = intimate
Panoramic = epic
2001

11. Balance
Balanced conveys calmness
Unbalanced conveys tension
Identical Twins, Diane Arbus

12. Balance
Balanced conveys calmness
Unbalanced conveys tension
Austin, Garry Winogrand

13. Focal Length
Telephoto lens compresses space
Wide angle lens exaggerates space

14. Lighting Contrast
High contrast is dramatic and powerful
Low contrast is warm and cheerful

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. 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. 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. Illusion of Depth

19. Art of the Title
 http://www.artofthetitle.com/title/the-lego-movie/
Real stop motion animation demonstrates the concept of motion parallax.

20. Transitions
 Cuts: Animation using JQuery
$( "div#man" ).replaceWith( "<img src="woman.png">" );

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. Narrative
 http://hollowdocumentary.com/
Cinematic techniques show changes in the community over time

23. Continuity
 http://therussianembassy.com/
Transitions occur very quickly and interface controls are available immediately

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. David Kelleher
 Please Rate the talk
https://joind.in/talk/view/11482
 Contact Me
http://davidk.net