Applying Filmmaking Tools andTechniques to Interaction Design
Why film?
OrchestrationHow do you coordinate something with so many    moving parts to achieve desired effect?
Orchestration    Actors   Dialogue   Scenery    Sound    Action
The Filmmaking ProcessScreenplay & Script > Storyboards & Design >      Raw Footage > Final Edited Film
Beat Sheets
Beat SheetsScene-by-Scene Outline• Plot Points• Actions• Effect on the Audience
Beat SheetsUse in interaction design?
The Software Design Process       Task Flows > Sketches / Wireframes >Prototype & Visual Designs > Final Developed Product
How do we keep emotion in theforefront of the design process?
To Be ReplacedBeat SheetsAnnotated Task Flows• Emotional state of the user• Emotional goals of the system
Communication
Mise en ScèneSet Design    Lighting  Staging       Acting    Costume
MotionHow does motion communicate?
MotionEarly filmmakers didn’t have sound, dialogue or color  Speech/title cards were used as little as possible
MotionThe bad guy enters on the right.
Motion: DiagonalsTop to Bottom: Inevitability, Anticipation        Bottom to Top: Struggle
The CameraControl of the camera means control of the eye.
Rack Focus        Little to no camera movement              No complex actionsCamera shifts focus from one element to anot...
Rack FocusUse in interaction design?
Where else can this go?
ThanksGet in touch:madpow.net        Give feedback and rate thisadam@madpow.net   talk on SpeakerRate:@adamconnor       ht...
Applying Filmmaking Tools and Techniques to Interaction Design
Applying Filmmaking Tools and Techniques to Interaction Design
Upcoming SlideShare
Loading in...5
×

Applying Filmmaking Tools and Techniques to Interaction Design

17,098

Published on

Note: You may be interested in the updated version of this talk, given at WebVisions Portland 2013: http://www.slideshare.net/adamconnor/designers-learnfromfilmmaking2

Slides from my talk at Interaction 11 in Boulder, CO.

Film examples for right-to-left motion on slide 17 are from Road to Perdition.

Film examples for Rack Focus on slide 21 are from The Graduate and Spider-Man.

As soon as video of the talk is posted, I'll add a link.

Published in: Design
6 Comments
51 Likes
Statistics
Notes
  • This is brilliant and beautiful. You might like a similar piece that uses film as a way of explaining where brands need to go.

    http://www.slideshare.net/scenariodna/culture-mapping-managing-brands-in-a-social-economy-6094993
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very creative - connecting films and ID. Look fwd to the video.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice stuff. I missed your talk at the conference, but I love the idea of using beat sheets.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There is definitely a common ground upon which filmmakers and interaction designers meet. I believe the image sequence is one root within that ground. I also think interaction design methods could guide filmmaking once it enters web waters.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Terrific presentation at IxD11. Thanks, Adam!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
17,098
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
265
Comments
6
Likes
51
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Applying Filmmaking Tools and Techniques to Interaction Design

    1. 1. Applying Filmmaking Tools andTechniques to Interaction Design
    2. 2. Why film?
    3. 3. OrchestrationHow do you coordinate something with so many moving parts to achieve desired effect?
    4. 4. Orchestration Actors Dialogue Scenery Sound Action
    5. 5. The Filmmaking ProcessScreenplay & Script > Storyboards & Design > Raw Footage > Final Edited Film
    6. 6. Beat Sheets
    7. 7. Beat SheetsScene-by-Scene Outline• Plot Points• Actions• Effect on the Audience
    8. 8. Beat SheetsUse in interaction design?
    9. 9. The Software Design Process Task Flows > Sketches / Wireframes >Prototype & Visual Designs > Final Developed Product
    10. 10. How do we keep emotion in theforefront of the design process?
    11. 11. To Be ReplacedBeat SheetsAnnotated Task Flows• Emotional state of the user• Emotional goals of the system
    12. 12. Communication
    13. 13. Mise en ScèneSet Design Lighting Staging Acting Costume
    14. 14. MotionHow does motion communicate?
    15. 15. MotionEarly filmmakers didn’t have sound, dialogue or color Speech/title cards were used as little as possible
    16. 16. MotionThe bad guy enters on the right.
    17. 17. Motion: DiagonalsTop to Bottom: Inevitability, Anticipation Bottom to Top: Struggle
    18. 18. The CameraControl of the camera means control of the eye.
    19. 19. Rack Focus Little to no camera movement No complex actionsCamera shifts focus from one element to another
    20. 20. Rack FocusUse in interaction design?
    21. 21. Where else can this go?
    22. 22. ThanksGet in touch:madpow.net Give feedback and rate thisadam@madpow.net talk on SpeakerRate:@adamconnor http://spkr8.com/t/5401
    1. A particular slide catching your eye?

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

    ×