Advanced Interactive Design - Task 1
22/04/2025 - 13/05/2025 (Week 1 - Week 4)
Reference Picture (Example)
My Outcome
WEEK 3
Ball Bouncing Exercise
Chong Wee Han 0368863
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1 - Thematic Interactive Website Proposal
JUMPLINK
LECTURES
WEEK 2
Mr. Shamsul introduced us to Adobe Animate to help us get familiar with its tools and functions. After the introduction, he assigned a small exercise where we had to recreate an image based on a reference he provided. This exercise helped us develop basic skills and become more comfortable using the software.
 |
| Figure 1.1 |
.jpg) |
| Figure 1.2 |
 |
| Figure 1.3 |
WEEK 3
This week, Mr. Shamsul introduced us to creating Shape Tween in motion graphics. We completed two exercises: the first was guided by Mr. Shamsul, while the second was a self-practice task where we used numbers. For the second exercise, we had to use the Break Apart function before applying the shape tween.
Rectangle to Round Exercise
 |
| Figure1.4 |
Number Countdown Exercise
 |
| Figure 1.5 |
WEEK 4
This week Mr. Shamsul introduced us to creating Classic Tween in motion graphics. We were also required to complete two exercises: the first one was a ball bouncing exercise that was guided by Mr. Shamsul, while the second was a self-practice task where we applied the same techniques from Exercise 1, but to complete a more complicated map exercise.
 |
| Figure 1.6 |
Map Exercise
 |
| Figure 1.7 |
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1nU-vNiCyCZStvR-zJIBMCMACyVCnYy-H/preview" width="640" height="480" allow="autoplay"></iframe>
TASK 1 - THEMATIC INTERACTIVE WEBSITE PROPOSAL
I had brainstormed with 3 ideas that I'm more interested in and also researched some inspirational websites that were introduced by Mr. Shamsul (https://thefwa.com/), including excellent work examples to inspire us in our thematic interactive website.
- IDEA 1 - Cosmetic Launch (Glossier / Rare Beauty)
- IDEA 2 - Movie Promotion (Inside Out)
- IDEA 3 - Artist Fan page (SZA)
After consulting with Mr. Shamsul, he suggested that I proceed with either IDEA 2 or IDEA 3, as IDEA 1 may lack sufficient content. The second and third ideas would provide a safer and more substantial direction.
I’ve decided to pursue IDEA 2 - A Movie Promotion Website for Inside Out. I’ve developed the initial wireframe and concept that mainly introduces the film and its emotional characters. The design will be vibrant and emotionally expressive, heavily inspired by Inside Out’s visual style—featuring rounded elements and a color palette that reflects each character’s unique emotion (Joy, Sadness, Anger, Fear, and Disgust).
.png) |
| Figure 2.1 |
After receiving feedback from Mr. Shamsul, he suggested that I shift the concept to focus more on introducing emotions rather than the movie itself. The goal is to guide users toward understanding the different types of emotions. He also recommended making the layout more playful and engaging.
So, I decided to change my topic to “Inside Emotions,” which mainly introduces what emotions are in a fun and visually engaging way. The project focuses on real-life emotional understanding, using characters from Pixar’s Inside Out to clearly explain each emotion, making it easier and more relatable for users to understand.
Below are my final wireframes :
.png) |
| Figure 2.2 |
SUBMISSION - TASK 1
FEEDBACK
WEEK 2
Make sure that you have 5 sections in your website. IDEA 1 didn't have much information, only images, choose to proceed to IDEA 2 or IDEA 3.
WEEK 3
No Feedback Given.
WEEK 4
The concept can be focused more on introducing emotions rather than the movie itself and also try to make the layout more playful and emotionally engaging.
REFLECTION
Throughout Task 1, I learned the importance of creating emotional connections with users rather than just presenting content when creating a website. I realized that people engage more when they can personally relate to emotions, especially through playful, visually dynamic layouts. After receiving feedback from Mr. Shamsul, I found out that this approach is particularly effective for abstract topics like emotions. The process of brainstorming and developing wireframes has been exciting, and I’m looking forward to seeing how the project evolves with the addition of interactive motion and animation.
Comments
Post a Comment