1. 1. Week 7 PART 1 COLOR PRIMER
2. 2. Color Wheel
3. 3. Primary Colors
4. 4. Secondary Colors
5. 5. Tertiary Colors
6. 6. Analogous Colors
7. 7. Complementary Colors
8. 8. Split Complementary Colors
9. 9. Site that can help http://www.colourlovers.com/ https://color.adobe.com/
10. 10. Readable Typography http://www.pearsonified.com/typography/ Simplify for strong hierarchy Use at max 2 fonts. Serif for Headers and sans-serif for the body
11. 11. Psychology of Typography http://psychology.wichita.edu/surl/usabilitynews/81/PersonalityofFonts.asp
12. 12. Psychology of Typography
13. 13. Psychology of Typography
14. 14. Psychology of Typography
15. 15. Psychology of Typography
16. 16. Psychology of Typography
17. 17. Psychology of Typography
18. 18. Psychology of Typography
19. 19. Psychology of Typography
20. 20. Psychology of Typography
21. 21. Psychology of Typography
22. 22. Emotional Design http://tristanedwards.me/sweetalert
23. 23. Emotional Design Successful User interactions should influence product behavior Pinterest, Instagram, Facebook, twitter
24. 24. Emotional Design Sensory Experience, Curiosity, visual imagery, pattern Recognition, Recognition over recall Points Levels, Appropriate Challenge
25. 25. It was not Usability that makes it great.
26. 26. How to increase motivation with Psychology UI needs to get out of the way of the Momentum Reduce friction Reputation, Points, Awards, Levels, Scarcity Cognitive Seduction: Fun, Humor, Playfulness, Surprise Game Mechanics: Frictionless, Agency, Influence, Appropriate Challenge Social Psychology: Persuasion, Choice, Status, Awards
27. 27. Week 7 PART 2 ANIMATION
28. 28. Animation Offers a medium of story telling and visual entertainment which can bring pleasure and information to people of all ages everywhere in the world. WALT DISNEY
29. 29. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal
30. 30. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
31. 31. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
32. 32. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
33. 33. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
34. 34. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
35. 35. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
36. 36. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
37. 37. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
38. 38. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
39. 39. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
40. 40. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
41. 41. 12 Animation Principles 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal http://the12principles.tumblr.com/
42. 42. Quick Video https://vimeo.com/49092833
43. 43. Animation Principles Influence Robotics
44. 44. Illusion of Life Traditionally, feedback loops control the movement of the body parts. For instance, an object tracking behavior is created by a feedback loop between the estimated object position from a camera and the servos of the robots head. This results in machine-like behavior that in contrast to life-like behavior can not be naturally interpreted. Early days animators dealt with a similar problem: creating the illusion of life of characters on paper, such that the audience understands what the character is doing and thinking. --A.J.N. van Breemen , Bringing Robots To Life: Applying Principles Of Animation To Robots
45. 45. Early Animation on the Web Dancing baby Under construction Mail Me Animation without interaction wasted space
46. 46. Jacob Nielson Says No
47. 47. The Golden Age of Flash? http://www.thefwa.com/flash10/gabo.html
48. 48. The Golden Age of Flash? http://www.gavinowers.com/web/design1/index.html
49. 49. Jacob Nielson Says No
50. 50. So
51. 51. Jacob Likes
52. 52. Rise of the Planet of the Apps
53. 53. "It's unbelievable. Here's some album art... no matter what you like, it looks pretty doggone gorgeous. ... with onscreen controls. I was giving the demo to someone a little while ago, and I finished the demo and I said what do you think? They said 'You had me at scrolling.'" MACWORLD 2007: STEVE JOBS KEYNOTE
54. 54. As Apps took over the scene Motion became the core part of any interaction
55. 55. Gesture and Motion iPhone's accelerometer popularized a new human-device interface
56. 56. Gesture and Motion Consoles brought physical motion into the virtual space
57. 57. Physical Models for Gestural Interfaces
58. 58. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
59. 59. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
60. 60. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
61. 61. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
62. 62. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
63. 63. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
64. 64. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
65. 65. Animation Principles Applied to Apps 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arc 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal CAPPTIVATE.co
66. 66. Without motion there can be no interaction.
67. 67. Part 3: User Sessions
68. 68. So why should we be so impressed by prototyping? They deliver a tangible 3D summary of all involved design issues (shape, function, materials, product personality,) which gives the designer a chance to solve several problems in one design iteration. Prototypes help designers and engineers balance between rationality and intuition. A prototype can help you receive feedback that involves ergonomics, shape, function, production at the same time. A prototype can help you manage the complexity of design. It provides you with constant feedback for all your senses. Its real
69. 69. Physical modeling Good prototypes invite you to experiment and play with them. They provoke reactions. How you play them is more important than how good the prototypes are. Prototypes help you think out loud, start conversations. Early prototypes dont even answer questions, they create new ones.
70. 70. Paper Prototype https://www.youtube.com/watch?v=T4o8niW5LfQ
71. 71. Ready? Fire! Aim. As designers know, a design process is not necessarily a sequential process. Things can happen in parallel. Gathering information, detailing your set of demands, generating concepts can happen in parallel.
72. 72. More Tools! Key Note http://keynotopia.com/ Game Salad http://gamesalad.com/ http://www.netlabtoolkit.org/
73. 73. What Tool Should You Use? Whatever tool helps you get your idea across
74. 74. The Hazard of Frameworks, trends and templates The Long scroll Kindle, iPad, iPhone limit dimensions The Hamburger Button
75. 75. Two Content Layout with Table First bullet point here Second bullet point here Third bullet point here Group 1 Group 2 Class 1 82 95 Class 2 76 88 Class 3 84 90
76. 76. Title and Content Layout with SmartArt Step 1 Title Task description Task description Step 2 Title Task description Task description Step 3 Title Task description Task description