Applying Filmmaking Tools and Techniques to Interaction Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Applying Filmmaking Tools and Techniques to Interaction Design

on

  • 17,477 views

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

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.

Statistics

Views

Total Views
17,477
Views on SlideShare
14,723
Embed Views
2,754

Actions

Likes
51
Downloads
253
Comments
6

41 Embeds 2,754

http://brandnoise.typepad.com 1134
http://www.frankwatching.com 500
http://www.inventinginteractive.com 299
http://johnnyholland.org 281
http://redguy.fr 145
http://paper.li 101
http://blog.fabrique.nl 62
http://www.fabrique.nl 62
http://www.brandnoise.typepad.com 45
http://flobarre.tumblr.com 43
http://translate.googleusercontent.com 9
http://60gritbeard.com 8
http://flavors.me 8
http://johnny.bobkarreman.com 6
http://safe.tumblr.com 4
http://static.slidesharecdn.com 4
http://cnii-blog.blogspot.com 4
http://www.webbingplanner.it 3
http://cnii-blog.blogspot.com.es 3
http://ogilvyux.posterous.com 3
http://serve4impact.com 2
http://eso4c06.blogspot.com 2
http://www.linkedin.com 2
http://fredzimny.wordpress.com 2
url_unknown 2
http://literaryhack.com 2
http://ferreiraechagas.com.br 2
http://twitter.com 2
http://feeds.feedburner.com 2
http://voorheen.fabrique.nl 1
http://www.onlydoo.com 1
http://www.findthebest.com 1
http://dev.salget.net 1
http://cms.swan.ac.uk 1
http://servidor 1
http://www.educarex.es 1
http://a0.twimg.com 1
http://dev.expertvill.net 1
http://www.ferreiraechagas.com.br 1
http://johnny.local 1
http://tweetedtimes.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 6 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • Very creative - connecting films and ID. Look fwd to the video.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice stuff. I missed your talk at the conference, but I love the idea of using beat sheets.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • Terrific presentation at IxD11. Thanks, Adam!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

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