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:
Interaction Design Documents: Creating flowcharts and wireframes to map out the user journey and navigation structure.
Animation Prototyping: Designing micro animations (e.g., button effects, loading indicators) and macro animations (e.g., transitions, introductions) using tools like Figma.
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
Comments
Post a Comment