Lights, Camera, Interaction: Design Inspiration From Filmmaking

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.

Transcript

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