Lights! Camera! Interaction! What Designers Can Learn From Filmmakers
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 53,744 views
Uploaded 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,......

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.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • ooooooo cuteee
    Are you sure you want to
    Your message goes here
  • @EdmundAzigiMS Sure. There are two: Linotype Univers and Serifa.
    Are you sure you want to
    Your message goes here
  • Hello Adam, awesome presentation! May I ask what type of font you used?
    Are you sure you want to
    Your message goes here
  • Good slides. Great presentation at July, 2013 Boston UxPA. Serves to raise many fundamental questions about the structure of online design - both conventional and possible. Page, room or frame? Index, navigation or narration? Document, space or time?
    Are you sure you want to
    Your message goes here
  • Loved this presentation at WebVisions. Thank you for sharing it.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
53,744
On Slideshare
52,735
From Embeds
1,009
Number of Embeds
22

Actions

Shares
Downloads
232
Comments
5
Likes
58

Embeds 1,009

https://twitter.com 329
http://seancrowe.tumblr.com 213
http://localhost 143
http://www.conseilsmarketing.com 135
http://lanyrd.com 71
http://faz.my 56
http://www.google.com 12
http://storify.com 10
http://translate.googleusercontent.com 10
https://www.rebelmouse.com 8
https://storify.com 5
http://sefatchowdhury.com 3
http://tabyinsidan.valtech.se 3
http://pinterest.com 2
http://kumo9design.tumblr.com 2
http://myroofingleads.com 1
http://presentationdocs.playableitems.demobo.com 1
http://paklloray.blogspot.com 1
http://tweetedtimes.com 1
http://intra.newriver.co.kr 1
http://epitest.taby.se 1
http://bing.dropmark.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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