Download to read offline
![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;
});](https://image.slidesharecdn.com/cinematicuxdesign-140906141643-phpapp01/75/Cinematic-UX-Design-24-2048.jpg)
Uploaded byDave Kelleher
Cinematic UX Design
The document discusses cinematic UX design for website interfaces, drawing parallels between film techniques and web design elements. It emphasizes the importance of composition, camera movements, and narrative structures to enhance user experience and storytelling. Various examples highlight effective and ineffective cinematic interfaces, showcasing the role of visual dynamics in engaging audiences.
More Related Content
Similar to Cinematic UX Design
Cinematic UX Design
- 1. Cinematic UX Design WebsiteInterfaces Inspired by Film David Kelleher NEPHP 2014 www.davidk.net https://joind.in/talk/view/11482
- 2.
- 3. Motion Pictures 1. Aseries 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 theTitle 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 angleempowers subject High angle diminishes subject Self-Portrait, Margaret Bourke-White
- 8. Camera Angle Low angleempowers 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 Unbalancedconveys tension Identical Twins, Diane Arbus
- 12. Balance Balanced conveys calmness Unbalancedconveys tension Austin, Garry Winogrand
- 13. Focal Length Telephoto lenscompresses space Wide angle lens exaggerates space
- 14. Lighting Contrast High contrastis 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.
- 19. Art of theTitle http://www.artofthetitle.com/title/the-lego-movie/ Real stop motion animation demonstrates the concept of motion parallax.
- 20. Transitions Cuts: Animationusing JQuery $( "div#man" ).replaceWith( "<img src="woman.png">" );
- 21. Transitions Fades (passageof 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 techniquesshow changes in the community over time
- 23. Continuity http://therussianembassy.com/ Transitions occurvery 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 PleaseRate the talk https://joind.in/talk/view/11482 Contact Me http://davidk.net