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

56,420
-1

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
62 Likes
Statistics
Notes
No Downloads
Views
Total Views
56,420
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
250
Comments
5
Likes
62
Embeds 0
No embeds

No notes for slide

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

  1. LIGHTS! CAMERA! INTERACTION! What Designers Can Learn From Filmmakers
  2. Why film?
  3. Organization & Orchestration How do you coordinate something with so many moving parts to achieve desired effect?
  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. 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. Who is the director?
  7. The Filmmaking Process Screenplay & Script  Storyboards & Direction  Raw Footage  Final Edited Film
  8. The Software Design Process Task Flows  Sketches, Wireframes & Content  Prototype & Visual Design  Final Developed Product
  9. How do we keep an understanding of emotion and feel in mind throughout the design process?
  10. Big Fish | Tim Burton | 2003
  11. An abomination called Twilight | Multiple Perpetrators | 2008-2012
  12. Scenarios
  13. Scenes
  14. Martin Hardee, Cisco, http://blogs.cisco.com/socialmedia/serious-ux-design-using-comics/
  15. Beat Sheets
  16. Beat Sheets Scene-by-Scene Outline • Plot Points • Actions • Effect on the Audience
  17. Can we use beat sheets in design?
  18. Beat Sheets Annotated Task Flows • Emotional state of the user • Emotional goals of the system To Be Replaced
  19. Story vs. Storytelling
  20. Story vs. Storytelling Events vs. Structure
  21. Pacing
  22. How do we control pace in digital design?
  23. From The Fleischer Story by Leslie Cabarga  Foreground Midground Background
  24. Virtual Water | Angela Morelli | http://www.angelamorelli.com/water/
  25. Mise en Scène All of the tools, other than dialogue, used by a filmmaker to tell a story.
  26. Sweeney Todd | Tim Burton | 2007
  27. Is there mise en scène in digital products and websites?
  28. Static Media Interaction Cinematic Media We are here.
  29. Motion has meaning.
  30. Written by: Bill Scott & Theresa Neil Transitions • Show relationships between elements • Cause & effect • Direct attention • Support brand personality
  31. When adding motion to design elements, think of them as if they are physical objects.
  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. 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. 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. Squash & Stretch, Arcs, Easing Follow Through & Overlapping Action
  36. Physical objects move in physical spaces.
  37. Anything that appears or happens on screen can either further the story or recontextualize it.
  38. Motion has more meaning.
  39. Motion Early filmmakers didn’t have sound, dialogue or color. They had to find other ways to communicate.
  40. The bad guy enters from the right.
  41. Top to Bottom: Anticipation & Inevitability Bottom to Top: Struggle & Otherworldliness
  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. Motion is an additive design treatment.
  44. How do we develop, practice, and explore our use of motion in designs.
  45. Film has playbacks and test-footage. Designers have prototyping.
  46. The Camera Control of the camera means control of the eye.
  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. Can we employ rack focus and other camera oriented techniques in digital design?
  49. Parting Thoughts
  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. 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. Thanks! Get in touch: @adamconnor aconnor@madpow.com madpow.com

×