Advanced Interactive Design Task2
Advanced Interactive Design - Task 1
15/10/2024 - 11/11/2025 (Week 5 - Week 8)
WangJiheng / 0378904
Bachelor of Design (Hons) in Creative Media Advanced Interactive Design - Task 2
TABLE OF CONTENTS
Lectures
Instructions
Task 2
Feedback
Reflections
Lectures
Week 5
In Week 5, Mr. Shamsul guided us through creating graphics and motion paths in Adobe Animate. We started by crafting a spider with basic shapes and then acquired the skill to animate its legs for natural movement.
Fig 1-1
Having completed the basic body animation, the teacher walked us through making a motion path that allowed the spider to crawl seamlessly along the pre-drawn route.
Fig 1-2
We gained insight into integrating Classic Tween and motion guides to manage direction and rhythm in animation through this exercise. This experience also taught me how to synchronize character movement with path orientation, enhancing the animation’s lifeliness and dynamism.
Week 6
During this week’s session, Mr. Shamsul introduced us to fresh animation methods in Adobe Animate, concentrating on simple motion creation via layers and keyframes. He demonstrated the gradual appearance of text and objects through timeline management and motion tweening. Our in-class practice centered on a text animation: we started by creating a blue background, followed by adding two separate text elements — “enter” and “welcome.”
Fig 1-3
INSTRUCTIONS
Task 2
Task 2：Interaction Design Planning and Prototype
Description：
Students are required to refine their visual design and initiate planning for the interactive elements and features of their website. Unlike traditional static websites, interactive designs incorporating animations must include not only layout visuals but also animation examples or references. Students may either create original animations or reference existing user-facing animations to illustrate their intended design concepts.
Requirements：
Walkthrough Video: Present the design plan and showcase relevant animation examples and/or references (Compulsory).
E-portfolio Online Post: Publish reflective content as part of your learning record, including links to all resources used in developing the plan (e.g., Figma links, Miro links, etc.).
Design Concept Description
In the movie Inside Out, the colored memory balls symbolize different emotions.
Fig 2-1 Reference Image "Mood Colorful Balls"
Fig 2-2 Design Effect
Fig 2-3 Semi-3D Soft Sphere UI "Adjusted Inner Shadow"
The interface is divided into five main sections: Home, Music, Character, Self Care, and Shop.
Reference Links:
Emotion Shop
1. Home
Fig 3-1 Home page
The main page displays the character images downloaded from the website and arranges them together.
The layout includes a deliberately designed "red grid" section. This is because of the character Embarrassment. He is a timid, shy character who is afraid to communicate with others. Therefore, on the page, he is placed at a certain "distance" from the other four characters to reflect his personality traits.
2. Music page
Fig 4-1 Music page
Fig 4-2 Music page
This section continues your original "Emotion Sound Track" concept.
Each emotion has its own representative color and corresponding song, and the colored buttons symbolize different emotional states.
3. Character Page
Fig 5-1 reference image
Fig 5-2 My Character page
The character homepage design is inspired by the official character covers of the movie.
Each character's background features an irregularly shaped design, which not only continues the visual style of the movie but also adds detail and fun to the page.
Fig 5-3
When a user clicks on a character's profile page, they are taken to a separate page featuring that character's signature colors to emphasize their emotional traits and personality.
Furthermore, the font used for each character's name is chosen to reflect their personality.
4. Self care
This section is inspired by the original Questionnaire concept.
Because the original questionnaire design involved complex branches and results pages, I changed it to a "Self Care" model to simplify the process.
Fig 6-1
Fig 6-2
Fig 6-3
The page begins with just one question:
"How are you feeling?"
Users can choose from five emotions (Joy, Sadness, Anxiety, Envy, Embarrassment), and the system will provide different "comfort and encouragement" based on the selection.
Compared to questionnaire-style interaction, this design is more like a "self-reflection" experience, allowing users to find resonance and support when they are feeling down.
5. Shop page
Fig 7-1
Fig 7-2
Fig 7-3
To maintain the simplicity of the overall structure, the store section is designed as a single-page layout where users can purchase related merchandise.
Figma Link
Presentation Video
Feedback
Week 5
This week, Teacher Hamimi taught us "Graphic Symbols" in Adobe Animate and showed us how to use them step by step to create a simple motion sequence on the main timeline. But what impressed me the most was his demonstration – he drew a simple object, turned it into a symbol, and then used the "Classic Tween" method to create a movement effect, and the process was very intuitive. Later, when we did the spider animation exercise, the teacher kept reminding us to organize the layers neatly, remember to turn on the "Object Drawing Mode" button, and copy the elements with better methods to save time. These little tips are very helpful.
Week 6
Week 6 was all about creating HTML5 Canvas projects. Teacher Hamimi had us practice a few basic animation methods: countdowns, text masks, and wireframe animations. He especially impressed upon us that "frame intervals should be consistent, this is what smooths out the animation rhythm". Mask layers to create clean visual transitions is another technique I genuinely learned how to do this week.
Week 7
Teacher Hamimi discussed "interactive animation control" this week. The key is Action Layers and Button Symbols in Adobe Animate. He explained in detail how to use the stop() action to stop animation loops, and how to add "click" and "hover" interaction effects to buttons to play the next scene.
Reflections
I improved my design thinking and technical aspects little by little with repetitive trial-and-error and feedback. With Mr. Hamimi’s help, my project Inside Out 2 Interactive Story Website gradually developed from an indistinct original concept to a complete interactive website. During this task, I came to truly understand how to incorporate layout design, dynamic animation, and usability: such as organizing the interface with the concept of "Headquarters" and the various emotion-themed scenes in the movie so that the users can easily follow the character’s journey to learn about the story.
Comments
Post a Comment