SlideShare a Scribd company logo
Cinematic UX Design
Website Interfaces Inspired by Film David Kelleher
NEPHP 2014 www.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 website
var 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

More Related Content

What's hot

Interactive Menu Technical Analysis
Interactive Menu Technical AnalysisInteractive Menu Technical Analysis
Interactive Menu Technical Analysis
thiswaynorthproductions
 
Session 1 a2 media
Session 1 a2 mediaSession 1 a2 media
Session 1 a2 media
ori3
 
Web Animations
Web AnimationsWeb Animations
Web Animations
bsuresh2
 
Teaser Trailer Editing
Teaser Trailer EditingTeaser Trailer Editing
Teaser Trailer Editing
chloechorlton
 
Cinematography
CinematographyCinematography
Cinematography
Jack Goodman
 
Evaluation 6
Evaluation 6Evaluation 6
Evaluation 6
hannahbennett98
 
Fotoflexer power point
Fotoflexer power pointFotoflexer power point
Fotoflexer power point
Ellia Pannett
 
FMX2013: Butterfly Effect
FMX2013: Butterfly EffectFMX2013: Butterfly Effect
FMX2013: Butterfly Effect
Renaldas Zioma
 
Equipment
EquipmentEquipment
Equipment
gorta002
 
Nathan
NathanNathan
Nathan
presention
 
Intro to cinema group 3 presentation
Intro to cinema  group 3 presentationIntro to cinema  group 3 presentation
Intro to cinema group 3 presentation
Rshuaib
 
GCSE Media Studies Revision Pack
GCSE Media Studies Revision Pack GCSE Media Studies Revision Pack
GCSE Media Studies Revision Pack
MissCTurner
 
Camera key terms
Camera key termsCamera key terms
Camera key terms
TWBSMedia
 
Evaluation 6
Evaluation 6Evaluation 6
Evaluation 6
JamesHooper1998
 
Tv drama revision_booklet
Tv drama revision_bookletTv drama revision_booklet
Tv drama revision_booklet
leannacatherina
 
Film Production Roles
Film  Production RolesFilm  Production Roles
Film Production Roles
guesta0da090
 
Moving Image Glossary
Moving Image GlossaryMoving Image Glossary
Moving Image Glossary
MissCTurner
 
Advanced Power Point 1
Advanced Power Point 1Advanced Power Point 1
Advanced Power Point 1
liwei1207zz
 
Basics cinematography
Basics cinematography Basics cinematography
Basics cinematography
Louise Sands
 
What have you learnt about technologies...
What have you learnt about technologies...What have you learnt about technologies...
What have you learnt about technologies...
Melissa Wild
 

What's hot (20)

Interactive Menu Technical Analysis
Interactive Menu Technical AnalysisInteractive Menu Technical Analysis
Interactive Menu Technical Analysis
 
Session 1 a2 media
Session 1 a2 mediaSession 1 a2 media
Session 1 a2 media
 
Web Animations
Web AnimationsWeb Animations
Web Animations
 
Teaser Trailer Editing
Teaser Trailer EditingTeaser Trailer Editing
Teaser Trailer Editing
 
Cinematography
CinematographyCinematography
Cinematography
 
Evaluation 6
Evaluation 6Evaluation 6
Evaluation 6
 
Fotoflexer power point
Fotoflexer power pointFotoflexer power point
Fotoflexer power point
 
FMX2013: Butterfly Effect
FMX2013: Butterfly EffectFMX2013: Butterfly Effect
FMX2013: Butterfly Effect
 
Equipment
EquipmentEquipment
Equipment
 
Nathan
NathanNathan
Nathan
 
Intro to cinema group 3 presentation
Intro to cinema  group 3 presentationIntro to cinema  group 3 presentation
Intro to cinema group 3 presentation
 
GCSE Media Studies Revision Pack
GCSE Media Studies Revision Pack GCSE Media Studies Revision Pack
GCSE Media Studies Revision Pack
 
Camera key terms
Camera key termsCamera key terms
Camera key terms
 
Evaluation 6
Evaluation 6Evaluation 6
Evaluation 6
 
Tv drama revision_booklet
Tv drama revision_bookletTv drama revision_booklet
Tv drama revision_booklet
 
Film Production Roles
Film  Production RolesFilm  Production Roles
Film Production Roles
 
Moving Image Glossary
Moving Image GlossaryMoving Image Glossary
Moving Image Glossary
 
Advanced Power Point 1
Advanced Power Point 1Advanced Power Point 1
Advanced Power Point 1
 
Basics cinematography
Basics cinematography Basics cinematography
Basics cinematography
 
What have you learnt about technologies...
What have you learnt about technologies...What have you learnt about technologies...
What have you learnt about technologies...
 

Viewers also liked

1А в санатории
1А в санатории1А в санатории
1А в санатории
Виктор Борисов
 
Прощание с 1А классом
Прощание с 1А классомПрощание с 1А классом
Прощание с 1А классом
Виктор Борисов
 
งานวิทย์
งานวิทย์งานวิทย์
งานวิทย์
Bajamat
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
Dave Kelleher
 
ตัวอย่าง Copy
ตัวอย่าง   Copyตัวอย่าง   Copy
ตัวอย่าง CopyBajamat
 
งาน
งานงาน
งานBajamat
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX Testing
Dave Kelleher
 
เคร องใช_ไฟฟ_า (1)
เคร  องใช_ไฟฟ_า (1)เคร  องใช_ไฟฟ_า (1)
เคร องใช_ไฟฟ_า (1)Bajamat
 
งานนำเสนอ
งานนำเสนอ งานนำเสนอ
งานนำเสนอ Bajamat
 
manoj_new
manoj_newmanoj_new
manoj_new
Manoj Yadav
 
Semantic HTML5 and Microdata
Semantic HTML5 and MicrodataSemantic HTML5 and Microdata
Semantic HTML5 and Microdata
Dave Kelleher
 
Social Media in Rotary
Social Media in RotarySocial Media in Rotary
Social Media in Rotary
Mike Chapman
 
Seminar5
Seminar5Seminar5
Seminar5
Snehil Rastogi
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and Normalization
Dave Kelleher
 
Analysis and applications of artificial neural networks
Analysis and applications of artificial neural networksAnalysis and applications of artificial neural networks
Analysis and applications of artificial neural networks
Snehil Rastogi
 
งานนำเสนอ กลุ่ม
งานนำเสนอ กลุ่มงานนำเสนอ กลุ่ม
งานนำเสนอ กลุ่มBajamat
 
Debugging PHP Code
Debugging PHP CodeDebugging PHP Code
Debugging PHP Code
Dave Kelleher
 

Viewers also liked (17)

1А в санатории
1А в санатории1А в санатории
1А в санатории
 
Прощание с 1А классом
Прощание с 1А классомПрощание с 1А классом
Прощание с 1А классом
 
งานวิทย์
งานวิทย์งานวิทย์
งานวิทย์
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
 
ตัวอย่าง Copy
ตัวอย่าง   Copyตัวอย่าง   Copy
ตัวอย่าง Copy
 
งาน
งานงาน
งาน
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX Testing
 
เคร องใช_ไฟฟ_า (1)
เคร  องใช_ไฟฟ_า (1)เคร  องใช_ไฟฟ_า (1)
เคร องใช_ไฟฟ_า (1)
 
งานนำเสนอ
งานนำเสนอ งานนำเสนอ
งานนำเสนอ
 
manoj_new
manoj_newmanoj_new
manoj_new
 
Semantic HTML5 and Microdata
Semantic HTML5 and MicrodataSemantic HTML5 and Microdata
Semantic HTML5 and Microdata
 
Social Media in Rotary
Social Media in RotarySocial Media in Rotary
Social Media in Rotary
 
Seminar5
Seminar5Seminar5
Seminar5
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and Normalization
 
Analysis and applications of artificial neural networks
Analysis and applications of artificial neural networksAnalysis and applications of artificial neural networks
Analysis and applications of artificial neural networks
 
งานนำเสนอ กลุ่ม
งานนำเสนอ กลุ่มงานนำเสนอ กลุ่ม
งานนำเสนอ กลุ่ม
 
Debugging PHP Code
Debugging PHP CodeDebugging PHP Code
Debugging PHP Code
 

Similar to Cinematic UX Design

Animation
Animation Animation
Animation
Rajendran Jhansi
 
Animation
AnimationAnimation
Animation
Amit Kapoor
 
Motion capture in the media
Motion capture in the mediaMotion capture in the media
Motion capture in the media
lorenmazzon
 
Unit vi
Unit viUnit vi
Unit vi
swapnasalil
 
Animation theory pro forma (2)
Animation theory pro forma (2)Animation theory pro forma (2)
Animation theory pro forma (2)
HICKMAN98
 
Final assign22f
Final assign22fFinal assign22f
Final assign22f
jessicaCcartwright
 
History and development of animation assignment
History and development of animation assignmentHistory and development of animation assignment
History and development of animation assignment
EmmaTheUnicorn
 
TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2
Diyana Harithuddin
 
Chap18 19
Chap18 19Chap18 19
Chap18 19
dkd_woohoo
 
FILM COMMUNICATION - Understanding Aspects of Films
FILM COMMUNICATION - Understanding Aspects of FilmsFILM COMMUNICATION - Understanding Aspects of Films
FILM COMMUNICATION - Understanding Aspects of Films
M.V.L.U. COLLEGE
 
Editing introduction and history support
Editing introduction and history support Editing introduction and history support
Editing introduction and history support
Louise Sands
 
Presentación Audiovisual production (Junior University Campus School - Univer...
Presentación Audiovisual production (Junior University Campus School - Univer...Presentación Audiovisual production (Junior University Campus School - Univer...
Presentación Audiovisual production (Junior University Campus School - Univer...
Rsearcher - Professor - Producer
 
Advanced animation techniques
Advanced animation techniquesAdvanced animation techniques
Advanced animation techniques
Charles Flynt
 
Chapter 5 : ANIMATION
Chapter 5 : ANIMATIONChapter 5 : ANIMATION
Chapter 5 : ANIMATION
azira96
 
Camera key terms
Camera key termsCamera key terms
Camera key terms
twbsmediaconnell
 
Evauation Mini Movie
Evauation Mini MovieEvauation Mini Movie
Evauation Mini Movie
EmilyChallinor101
 
Mise en scene camera movement
Mise en scene camera movement Mise en scene camera movement
Mise en scene camera movement
Watashiwa Sakinah
 
Computer Generated Graphics
Computer Generated GraphicsComputer Generated Graphics
Computer Generated Graphics
Shubhrank Rastogi
 
Animation ict
Animation ictAnimation ict
Animation ict
Jotham Austria
 
Animation
AnimationAnimation
Animation
marwa_ma
 

Similar to Cinematic UX Design (20)

Animation
Animation Animation
Animation
 
Animation
AnimationAnimation
Animation
 
Motion capture in the media
Motion capture in the mediaMotion capture in the media
Motion capture in the media
 
Unit vi
Unit viUnit vi
Unit vi
 
Animation theory pro forma (2)
Animation theory pro forma (2)Animation theory pro forma (2)
Animation theory pro forma (2)
 
Final assign22f
Final assign22fFinal assign22f
Final assign22f
 
History and development of animation assignment
History and development of animation assignmentHistory and development of animation assignment
History and development of animation assignment
 
TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2
 
Chap18 19
Chap18 19Chap18 19
Chap18 19
 
FILM COMMUNICATION - Understanding Aspects of Films
FILM COMMUNICATION - Understanding Aspects of FilmsFILM COMMUNICATION - Understanding Aspects of Films
FILM COMMUNICATION - Understanding Aspects of Films
 
Editing introduction and history support
Editing introduction and history support Editing introduction and history support
Editing introduction and history support
 
Presentación Audiovisual production (Junior University Campus School - Univer...
Presentación Audiovisual production (Junior University Campus School - Univer...Presentación Audiovisual production (Junior University Campus School - Univer...
Presentación Audiovisual production (Junior University Campus School - Univer...
 
Advanced animation techniques
Advanced animation techniquesAdvanced animation techniques
Advanced animation techniques
 
Chapter 5 : ANIMATION
Chapter 5 : ANIMATIONChapter 5 : ANIMATION
Chapter 5 : ANIMATION
 
Camera key terms
Camera key termsCamera key terms
Camera key terms
 
Evauation Mini Movie
Evauation Mini MovieEvauation Mini Movie
Evauation Mini Movie
 
Mise en scene camera movement
Mise en scene camera movement Mise en scene camera movement
Mise en scene camera movement
 
Computer Generated Graphics
Computer Generated GraphicsComputer Generated Graphics
Computer Generated Graphics
 
Animation ict
Animation ictAnimation ict
Animation ict
 
Animation
AnimationAnimation
Animation
 

Recently uploaded

一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
tobbk6s8
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
10h6bbc4
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
oabn3692
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
EricHo305923
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
qa8dk1wm
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
twqryq79
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
zv943dhb
 
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
yk5hdsnr
 
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
lyurzi7r
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
batchelorerbm45967
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
RPWORLD Manufacturing
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
ubogumo
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 

Recently uploaded (20)

一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
 
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
 
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 

Cinematic UX Design

  • 1. Cinematic UX Design Website Interfaces Inspired by Film David Kelleher NEPHP 2014 www.davidk.net https://joind.in/talk/view/11482
  • 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.
  • 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