Application Design Task 2 | Interaction Design Proposal and Planning

22/10/2024 - 12/11/2024 (Week 5 - Week 8)
Zhao GuanMei / 0363166
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Planning & Prototype

---

INDEX

Lecture 3: Micro-Interaction

Lecture 4: GSAP Tutorial

Task 2: Interaction Design Proposal and Planning

App Flow Map

Final Task 2: Interaction Design Proposal and Planning

---

INSTRUCTIONS

---

Task 2: Interaction Design Proposal and Planning

Interaction Design Documents

• Flowcharts: Visualize the user journey through the app (steps, actions, decisions).
• Wireframes: Layout major screens (buttons, navigation, content sections).

Animation Prototyping

• Micro Animations (small-scale):
  • Button effects (e.g., color change, shadow, scaling).
  • Hover animations (touch feedback like bounce or scale).
  • Loading indicators (spinning icons, progress bars).
  • Feedback messages (success or error animations).
• Macro Animations (large-scale):
  • Screen transitions (sliding, fading, scaling effects).
  • Animated introductions (logo reveal, feature showcase).
• Tools: Figma for micro animations, Adobe After Effects for macro animations.

Visual and Written Explanation

• Visual Presentation: Show prototypes with animations, e.g., GIFs, annotated screens.
• Written Explanation: Explain how animations enhance usability and aesthetics (e.g., feedback, smooth transitions).

Flowcharts:

---

Reflection

---