Labels

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
Research
App Flow Map
Welcome page
Home
Payment
Package Tracking


Reflection
INSTRUCTIONS
Task 2: Interaction Design Proposal and Planning

Recap:

In this task, we are required to develop a detailed interaction design plan for a web-based mobile application. Includes:

  1. Interaction Design Documents: Creating flowcharts and wireframes to map out the user journey and navigation structure.

  2. Animation Prototyping: Designing micro animations (e.g., button effects, loading indicators) and macro animations (e.g., transitions, introductions) using tools like Figma.

  3. Visual and Written Explanation: Providing detailed explanations or presentations to demonstrate how these animations enhance usability and aesthetics, seamlessly integrating them into the overall design.


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


Labels:

Comments

Post a Comment