The document discusses motion and interaction design, covering topics like why interaction design is important, the five dimensions of interaction design, what motion design and motion studies are, and how motion and animation can be used. It provides an overview and excerpt of a course that teaches these topics in more depth related to tools like Expression Blend and user interface design.

1. Expression Blend Motion
& Interaction Design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

2. Overview:
Motion and Interaction
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

3. Overview:
Motion and Interaction
• Why Interaction/Motion Design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

4. Overview:
Motion and Interaction
• Why Interaction/Motion Design
• More implementation then concept
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

5. Overview:
Motion and Interaction
• Why Interaction/Motion Design
• More implementation then concept
• Motion Design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

6. Overview:
Motion and Interaction
• Why Interaction/Motion Design
• More implementation then concept
• Motion Design
• Motion Studies
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

7. Why Interaction/Motion
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

8. Why Interaction/Motion
• Design of Interaction
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

9. Why Interaction/Motion
• Design of Interaction
• More related to experience design or ux
design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

10. Why Interaction/Motion
• Design of Interaction
• More related to experience design or ux
design
• Broad topic sometimes misconstrued
as motion design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

11. Why Interaction/Motion
• Design of Interaction
• More related to experience design or ux
design
• Broad topic sometimes misconstrued
as motion design
• All the reasons for IxD is UXD
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

12. Why Interaction/Motion
• Design of Interaction
• More related to experience design or ux
design
• Broad topic sometimes misconstrued
as motion design
• All the reasons for IxD is UXD
• Ease of use, discoverability, adoption etc
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

13. Five Dimensions of Interaction
Design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

14. Five Dimensions of Interaction
Design
• Words (defines interactions)
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

15. Five Dimensions of Interaction
Design
• Words (defines interactions)
• Visual Representations
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

16. Five Dimensions of Interaction
Design
• Words (defines interactions)
• Visual Representations
• Physical Objects or Space
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

17. Five Dimensions of Interaction
Design
• Words (defines interactions)
• Visual Representations
• Physical Objects or Space
• Time
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

18. Five Dimensions of Interaction
Design
• Words (defines interactions)
• Visual Representations
• Physical Objects or Space
• Time
• Behavior
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

19. Five Dimensions of Interaction
Design
• Words (defines interactions)
• Visual Representations
• Physical Objects or Space
• Time
• Behavior
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

20. Five Dimensions of Interaction
Design
• Words (defines interactions)
• Visual Representations
• Physical Objects or Space
• Time
• Behavior
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

21. Five Dimensions of Interaction
Design
• Words (defines interactions)
• Visual Representations
• Physical Objects or Space
• Time
• Behavior
• (originally from book ‘Designing Interactions’ by Gillian Crampton Smith)
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

22. Motion Design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

23. Motion Design
• The part of Graphic Design related to
Motion and animation
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

24. Motion Design
• The part of Graphic Design related to
Motion and animation
• More narrow then IxD
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

25. Motion Design
• The part of Graphic Design related to
Motion and animation
• More narrow then IxD
• Def: Art of the composition and
choreography of motion and animation
inside a digital experience or media
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

26. Motion Design
• The part of Graphic Design related to
Motion and animation
• More narrow then IxD
• Def: Art of the composition and
choreography of motion and animation
inside a digital experience or media
• In ms world typically executed via
animation
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

27. Motion Studies
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

28. Motion Studies
• A U.I. or visual representation of a U.I.
element showing a potential motion or
animation that a user would see.
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

29. Motion Studies
• A U.I. or visual representation of a U.I.
element showing a potential motion or
animation that a user would see.
• Helps us visualize elements of UI
design
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

30. Motion Studies
• A U.I. or visual representation of a U.I.
element showing a potential motion or
animation that a user would see.
• Helps us visualize elements of UI
design
• Important in UX Design in crafting
experience
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

31. Motion Studies
• A U.I. or visual representation of a U.I.
element showing a potential motion or
animation that a user would see.
• Helps us visualize elements of UI
design
• Important in UX Design in crafting
experience
• Expression Blend Sketchflow
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

32. Motion Study Types and
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

33. Motion Study Types and
• Small single elements
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

34. Motion Study Types and
• Small single elements
• UI elements, icons, buttons etc
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

35. Motion Study Types and
• Small single elements
• UI elements, icons, buttons etc
• Pages and Screens
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

36. Motion Study Types and
• Small single elements
• UI elements, icons, buttons etc
• Pages and Screens
• Wireframes/Sketchflow
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

37. Motion and Animation
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

38. Motion and Animation
• Applies to WPF, XAML, Windows 8,
Windows Phone, and just about
anything else
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

39. Motion and Animation
• Applies to WPF, XAML, Windows 8,
Windows Phone, and just about
anything else
• General in Blend
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

40. Motion and Animation
• Applies to WPF, XAML, Windows 8,
Windows Phone, and just about
anything else
• General in Blend
• Demo studies and user studies
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

41. Learn More!
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

42. Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company