Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Embed Size (px)
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 of Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
- 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 Editing Interface Design Visual Design Content IxD Usability & Human Factors
- Organization & Orchestration How do you coordinate something with so many moving parts to achieve desired effect? Actors Sound Dialogue Action Scenery & Sets Editing Cinematography
- 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 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
- 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
- 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 Scne All of the tools, other than dialogue, used by a filmmaker to tell a story.
- Sweeney Todd | Tim Burton | 2007
- Is there mise en scne 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 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 Video Video 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.
- Motion Early filmmakers didnt 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 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 another within the frame
- 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 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
- 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
- Thanks! Get in touch: @adamconnor email@example.com madpow.com