Languages
Pages
Legal
LIGHTS! CAMERA! INTERACTION!What Designers Can Learn From Filmmakers
Why film?
Organization & OrchestrationHow do you coordinate something with so many
moving parts to achieve desired effect?
Organization & OrchestrationHow do you coordinate something with so many
moving parts to achieve desired effect?
Sound
Editing
InterfaceDesign
VisualDesign
Content
IxDUsability &
Human Factors
Organization & OrchestrationHow do you coordinate something with so many
moving parts to achieve desired effect?
ActorsSound
Dialogue
Action
Scenery& Sets
Editing
Cinematography
Who is the director?
The Filmmaking ProcessScreenplay & Script Storyboards & Direction
Raw Footage Final Edited Film
The Software Design ProcessTask Flows Sketches, Wireframes & Content
Prototype & Visual Design Final Developed Product
How do we keep an understanding of emotion and feel in mind
throughout the design process?
Big Fish | Tim Burton | 2003
An abomination called Twilight | Multiple Perpetrators | 2008-2012
Scenarios
Scenes
Martin Hardee, Cisco, http://blogs.cisco.com/socialmedia/serious-ux-design-using-comics/
Beat Sheets
Beat SheetsScene-by-Scene Outline• Plot Points• Actions• Effect on the Audience
Can we use beat sheets in design?
Beat SheetsAnnotated Task Flows• Emotional state of the user• Emotional goals of the system
To Be Replaced
Story vs. Storytelling
Story vs. StorytellingEvents vs. Structure
Pacing
How do we control pace in digital design?
From The Fleischer Story by Leslie Cabarga
Foreground
Midground
Background
Virtual Water | Angela Morelli | http://www.angelamorelli.com/water/
Mise en ScèneAll of the tools, other than dialogue, used by a
filmmaker to tell a story.
Sweeney Todd | Tim Burton | 2007
Is there mise en scène in digital products and websites?
StaticMedia Interaction
CinematicMedia
We arehere.
Motion has meaning.
Written by: Bill Scott & Theresa Neil
Transitions• Show relationships
between elements
• Cause & effect
• Direct attention
• Support brand personality
When adding motion to design elements, think of them as if they
are physical objects.
“Anything we can do to make something digital appear as a physical object is delightful.”
Adam Lisagor | Sandwich VideoVideo as User Experience at UX Week 2011
Slow In & Slow Out
Squash & Stretch
Anticipation
Staging
Straight Ahead Action & Pose-to-pose
Arcs
Secondary Action
Timing
Exaggeration
Solid Drawing
Follow Through & Overlapping Action
Appeal
Anticipation
Straight Ahead Action & Pose-to-pose
Arcs
Secondary Action
Solid Drawing
Appeal
Squash & Stretch
Staging
Slow In & Slow Out
Timing
Exaggeration
Follow Through & Overlapping Action
Squash & Stretch,Arcs, Easing
Follow Through & Overlapping Action
Physical objects move in physical spaces.
Anything that appears or happens on screen can either further the
story or recontextualize it.
Motion has more meaning.
MotionEarly filmmakers didn’t have sound, dialogue or color.
They had to find other ways to communicate.
The bad guy enters from the right.
Top to Bottom: Anticipation & Inevitability
Bottom to Top: Struggle & Otherworldliness
Written by: Bill Scott& Theresa Neil
Transitions• Show relationships
between elements
• Cause & effect
• Direct attention
• Support brand personality
• Communicate the character of your design or design elements
Motion is an additive design treatment.
How do we develop, practice, and explore our use of motion in
designs.
Film has playbacks and test-footage.
Designers have prototyping.
The CameraControl of the camera means control of the eye.
Rack Focus• Little to no camera
movement
• No complex action in the scene
• Camera shifts focus from one element to another within the frame
Can we employ rack focus and other camera oriented
techniques in digital design?
Parting Thoughts
Cinematic StorytellingJennifer Vas Sijllhttp://amzn.com/0321725522
The Illusionof Life
Frank Thomas and Ollie Johnston
http://amzn.com/0786860707
Directing the Story
Francis Glebashttp://amzn.com/0240810767
Designing Web InterfacesBill Scott and Theresa Neilhttp://amzn.com/0596516258
Reframing UX DesignPeter Merholzhttp://www.peterme.com/2012/09/04/reframing-ux-design/
Thinking Like a StorytellerCindy Chastainhttps://vimeo.com/9686849
Video as User ExperienceAdam Lisagorhttps://vimeo.com/30107169
Filmmaking and Design: More than just analogousAdam Connorhttp://toobigtotweet.tumblr.com/post/31461951405/filmmaking-and-design-more-than-just-analogous
Software is a movie, not a buildingTim McCoyhttp://www.cooper.com/journal/2009/03/feedback_loops.html
Cinematic Interaction DesignSarah Allenhttp://www.slideshare.net/sarah.allen/cinematic-interaction-design
Thanks!Get in touch:@adamconnor
madpow.com
Top Related