The document discusses various topics related to design including color theory, typography, psychology of design, animation principles, and user testing. It provides information on color wheels, primary/secondary/tertiary colors, analogous and complementary color schemes. It discusses readable typography with a maximum of 2 fonts, one serif for headers and one sans-serif for body text. It outlines 12 principles of animation and links to resources explaining each principle. It also discusses using animation principles and emotional design when developing apps and prototypes. Finally, it emphasizes the importance of user testing to gather feedback.

1. Week 7
PART 1 COLOR PRIMER

2. Color Wheel

3. Primary Colors

4. Secondary Colors

5. Tertiary Colors

6. Analogous Colors

7. Complementary Colors

8. Split Complementary Colors

9. Site that can help
• http://www.colourlovers.com/
• https://color.adobe.com/

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. Psychology of Typography
• http://psychology.wichita.edu/surl/usabilitynews/81/PersonalityofFonts.asp

12. Psychology of Typography

13. Psychology of Typography

14. Psychology of Typography

15. Psychology of Typography

16. Psychology of Typography

17. Psychology of Typography

18. Psychology of Typography

19. Psychology of Typography

20. Psychology of Typography

21. Psychology of Typography

22. Emotional Design
• http://tristanedwards.me/sweetalert

23. Emotional Design
• Successful User interactions should influence product behavior
• Pinterest, Instagram, Facebook, twitter

24. Emotional Design
• Sensory Experience, Curiosity, visual imagery, pattern Recognition, Recognition over
recall
• Points Levels, Appropriate Challenge

25. It was not Usability that makes it great.

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. Week 7
PART 2 ANIMATION

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Quick Video
https://vimeo.com/49092833

43. Animation Principles Influence Robotics

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 robot’s head. This results in machine-like
behavior that − in contrast to life-like behavior − can not be naturally interpreted.
Early day’s 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. Early Animation on the Web
• Dancing baby
• Under construction
• Mail Me
• Animation without interaction
wasted space

46. Jacob Nielson Says No

47. The Golden Age of Flash?
http://www.thefwa.com/flash10/gabo.html

48. The Golden Age of Flash?
http://www.gavinowers.com/web/design1/index.html

49. Jacob Nielson Says No

50. So…

51. Jacob Likes

52. Rise of the Planet of the Apps

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. As Apps took over the scene Motion became the
core part of any interaction

55. Gesture and Motion
• iPhone's accelerometer popularized a new human-device interface

56. Gesture and Motion
• Consoles brought physical motion into the virtual space

57. Physical Models for Gestural Interfaces

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. 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. 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. 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. 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. 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. 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. 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. Without motion there can be no interaction.

67. Part 3: User Sessions

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. It’s
“real”

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 don’t even
answer questions, they create new ones.

70. Paper Prototype
• https://www.youtube.com/watch?v=T4o8niW5LfQ

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. More Tools!
• Key Note— http://keynotopia.com/
• Game Salad— http://gamesalad.com/
• http://www.netlabtoolkit.org/

73. What Tool Should You Use?
• Whatever tool helps you get your idea across

74. The Hazard of Frameworks, trends and templates
• The Long scroll
• Kindle, iPad, iPhone limit dimensions
• The Hamburger Button

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. 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