LIGHTS! CAMERA! INTERACTION!
What Designers Can Learn From Filmmakers
Why film?
Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?
Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?
Sound
Ed...
Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?
Actors
S...
Who is the director?
The Filmmaking Process
Screenplay & Script  Storyboards & Direction 
Raw Footage  Final Edited Film
The Software Design Process
Task Flows  Sketches, Wireframes & Content 
Prototype & Visual Design  Final Developed Prod...
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 Sheets
Scene-by-Scene Outline
• Plot Points
• Actions
• Effect on the Audience
Can we use beat sheets in design?
Beat Sheets
Annotated Task Flows
• Emotional state of the user
• Emotional goals of the system
To Be Replaced
Story vs. Storytelling
Story vs. Storytelling
Events 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ène
All 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?
Static
Media
Interaction
Cinematic
Media
We are
here.
Motion has meaning.
Written by: Bill Scott & Theresa Neil
Transitions
• Show relationships
between elements
• Cause & effect
• Direct attentio...
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 Video
Vi...
Slow In & Slow Out
Squash & Stretch
Anticipation
Staging
Straight Ahead Action
& Pose-to-pose
Arcs
Secondary Action
Timing...
Anticipation
Straight Ahead Action
& Pose-to-pose
Arcs
Secondary Action
Solid Drawing
Appeal
Squash & Stretch
Staging
Slow...
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.
Motion
Early 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 attentio...
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 Camera
Control 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
anoth...
Can we employ rack focus and
other camera oriented
techniques in digital design?
Parting Thoughts
Cinematic
Storytelling
Jennifer Vas Sijll
http://amzn.com/0321725522
The Illusion
of Life
Frank Thomas and Ollie
Johnston
...
Reframing UX Design
Peter Merholz
http://www.peterme.com/2012/09/04/reframing-ux-design/
Thinking Like a Storyteller
Cindy...
Thanks!
Get in touch:
@adamconnor
aconnor@madpow.com
madpow.com
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Upcoming SlideShare
Loading in...5
×

Lights! Camera! Interaction! What Designers Can Learn From Filmmakers

52,305

Published on

I began college as a film student. I’ve always loved storytelling, particularly visual storytelling in the forms of film and animation. Well-made films show us that they can drive engagement, communicate in subtle ways, change attitudes, and inspire us to try to change our lives.

Films succeed in evoking responses and engaging audiences only with a combination of well-written narrative and effective storytelling technique. It’s the filmmaker’s job to put this together. To do so they’ve developed processes, tools and techniques that allow them to focus attention, emphasize information, foreshadow and produce the many elements that together comprise a well-told story.

We’re responsible for creating products that aren’t just easy to use, but that people appreciate using. It stands to reason that the methods used in films to communicate with and engage audiences can serve as inspiration for designers.

With this presentation, we'’ll revisit the topic of using stories in design and expand on the technical aspects used in film to communicate. We’ll look at some tools used in film such as: cinematic patterns, beat sheets, and storyboards. We’ll consider why they’re used and how we might look to them for inspiration.

Published in: Design, Technology, Business
5 Comments
61 Likes
Statistics
Notes
No Downloads
Views
Total Views
52,305
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
243
Comments
5
Likes
61
Embeds 0
No embeds

No notes for slide

Lights! Camera! Interaction! What Designers Can Learn From Filmmakers

  1. 1. LIGHTS! CAMERA! INTERACTION! What Designers Can Learn From Filmmakers
  2. 2. Why film?
  3. 3. Organization & Orchestration How do you coordinate something with so many moving parts to achieve desired effect?
  4. 4. Organization & Orchestration How do you coordinate something with so many moving parts to achieve desired effect? Sound Editing Interface Design Visual Design Content IxD Usability & Human Factors
  5. 5. Organization & Orchestration How do you coordinate something with so many moving parts to achieve desired effect? Actors Sound Dialogue Action Scenery & Sets Editing Cinematography
  6. 6. Who is the director?
  7. 7. The Filmmaking Process Screenplay & Script  Storyboards & Direction  Raw Footage  Final Edited Film
  8. 8. The Software Design Process Task Flows  Sketches, Wireframes & Content  Prototype & Visual Design  Final Developed Product
  9. 9. How do we keep an understanding of emotion and feel in mind throughout the design process?
  10. 10. Big Fish | Tim Burton | 2003
  11. 11. An abomination called Twilight | Multiple Perpetrators | 2008-2012
  12. 12. Scenarios
  13. 13. Scenes
  14. 14. Martin Hardee, Cisco, http://blogs.cisco.com/socialmedia/serious-ux-design-using-comics/
  15. 15. Beat Sheets
  16. 16. Beat Sheets Scene-by-Scene Outline • Plot Points • Actions • Effect on the Audience
  17. 17. Can we use beat sheets in design?
  18. 18. Beat Sheets Annotated Task Flows • Emotional state of the user • Emotional goals of the system To Be Replaced
  19. 19. Story vs. Storytelling
  20. 20. Story vs. Storytelling Events vs. Structure
  21. 21. Pacing
  22. 22. How do we control pace in digital design?
  23. 23. From The Fleischer Story by Leslie Cabarga  Foreground Midground Background
  24. 24. Virtual Water | Angela Morelli | http://www.angelamorelli.com/water/
  25. 25. Mise en Scène All of the tools, other than dialogue, used by a filmmaker to tell a story.
  26. 26. Sweeney Todd | Tim Burton | 2007
  27. 27. Is there mise en scène in digital products and websites?
  28. 28. Static Media Interaction Cinematic Media We are here.
  29. 29. Motion has meaning.
  30. 30. Written by: Bill Scott & Theresa Neil Transitions • Show relationships between elements • Cause & effect • Direct attention • Support brand personality
  31. 31. When adding motion to design elements, think of them as if they are physical objects.
  32. 32. “Anything we can do to make something digital appear as a physical object is delightful.” Adam Lisagor | Sandwich Video Video as User Experience at UX Week 2011
  33. 33. 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
  34. 34. 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
  35. 35. Squash & Stretch, Arcs, Easing Follow Through & Overlapping Action
  36. 36. Physical objects move in physical spaces.
  37. 37. Anything that appears or happens on screen can either further the story or recontextualize it.
  38. 38. Motion has more meaning.
  39. 39. Motion Early filmmakers didn’t have sound, dialogue or color. They had to find other ways to communicate.
  40. 40. The bad guy enters from the right.
  41. 41. Top to Bottom: Anticipation & Inevitability Bottom to Top: Struggle & Otherworldliness
  42. 42. 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
  43. 43. Motion is an additive design treatment.
  44. 44. How do we develop, practice, and explore our use of motion in designs.
  45. 45. Film has playbacks and test-footage. Designers have prototyping.
  46. 46. The Camera Control of the camera means control of the eye.
  47. 47. Rack Focus • Little to no camera movement • No complex action in the scene • Camera shifts focus from one element to another within the frame
  48. 48. Can we employ rack focus and other camera oriented techniques in digital design?
  49. 49. Parting Thoughts
  50. 50. Cinematic Storytelling Jennifer Vas Sijll http://amzn.com/0321725522 The Illusion of Life Frank Thomas and Ollie Johnston http://amzn.com/0786860707 Directing the Story Francis Glebas http://amzn.com/0240810767 Designing Web Interfaces Bill Scott and Theresa Neil http://amzn.com/0596516258
  51. 51. Reframing UX Design Peter Merholz http://www.peterme.com/2012/09/04/reframing-ux-design/ Thinking Like a Storyteller Cindy Chastain https://vimeo.com/9686849 Video as User Experience Adam Lisagor https://vimeo.com/30107169 Filmmaking and Design: More than just analogous Adam Connor http://toobigtotweet.tumblr.com/post/31461951405/filmmaking-and-design-more-than-just-analogous Software is a movie, not a building Tim McCoy http://www.cooper.com/journal/2009/03/feedback_loops.html Cinematic Interaction Design Sarah Allen http://www.slideshare.net/sarah.allen/cinematic-interaction-design
  52. 52. Thanks! Get in touch: @adamconnor aconnor@madpow.com madpow.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×