Advanced Interactive Design — Task 2

-

15.10. 2025 - 16.11.2025 (Week 5 - Week 8)

Lin chenyi/ 0367008

Graphic design/Bachelor of Design in Creative Media

Advanced Interactive Design  -  Task 2

INSTRUCTIONS 


LECTURE

Week 4: Principles of Animation and Basic Practice

This week, we learned about several basic animation principles and how to apply them using Adobe Animate. Shamsul guided us to create simple exercises like the rubber ball and bouncing ball animation, which helped us understand how timing and spacing affect movement. We also explored how to create shape tweening between keyframes and insert effects between frames to make transitions smoother. I learned the importance of using onion skin to check the positioning of each frame and maintain consistency.

The trajectory of the bouncing ball.


Week 5: Creating and Animating Symbols

In Week 5, we started learning how to draw and animate symbols. We used object drawing mode, created shapes, and converted them into

59" data-start="1240">graphic symbols. By double-clicking the symbol, we entered isolation mode, which allowed us to focus on the animation within that symbol.
We also practiced using motion guides to make objects, like a spider, follow a curved path. I learned how to align objects to the grid and use the “Orient to Path” setting so the object naturally follows the path direction.


Week 6: Countdown Animation

This week’s task was to create a countdown animation from 10 to 0 using motion tweening. I adjusted the timing between frames to make the transition between numbers smooth and rhythmic. Figure 1.4 shows my final result for the countdown animation.
Later, Shamsul introduced how to design a welcome page in Adobe Animate, teaching us how to combine text, background, and simple motion to create an engaging introduction screen.


Week 7: Interactive Button and Timeline Control

In Week 7, we learned how to control the timeline and create interactive buttons in Adobe Animate. By converting shapes into button symbols, we added different keyframes for states such as hover, down, and hit area. I learned that expanding the hit area makes the button easier to click.
We also added action scripts to stop or move the timeline. When the button is clicked, it disappears and transitions smoothly to another scene using a classic tween with an ease-out effect. Finally, I learned how to add labels to keyframes to manage navigation. Without assigning an instance name to the button, the action command won’t function properly — an important detail I’ll remember!



Task 2: Interaction Design Planning and Prototype

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements:
  • Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsary)
  • Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)

Week 5 - Week 8

Prototype section：


Website Structure and Navigation
The website follows this path: Loading Page → Home → Album & Music Videos → Interactive Section.

1. Loading Page
Users first see the loading page, designed with elements from Rosé’s album. A progress bar styled like the album artwork shows the loading animation. Once the page finishes loading, users can click the “Rosie” text in the center to enter the homepage.

2. Home Page
The homepage uses a mix of vintage red and album blue, creating a unique and immersive visual experience. The navigation bar has four options: About, Album, Music, and Subscribe.
The homepage is divided into five main sections, guiding users to explore different content.


3. About Section
In the About page, I used a vertical scrolling effect to tell Rosé’s personal and musical story. When users click “Learn More,” they enter a page titled “The Birth of ROSÉ’s Solo Journey”.
This page has three sub-sections:

  • Where It All Began: Introduces the start of Rosé’s music journey

  • Inside the Sound: Explains her unique music style

  • Her Voice, Her Truth: Shows how she expresses her true self through her voice


With scrolling and clicking interactions, users can fully immerse themselves in her growth and music philosophy.

4. Album Section
This section introduces Rosé’s first solo album, ROSIE.
I added arrow-click interactions to switch between pages:

  • Clicking Buy In goes to an external purchase link

  • Hovering over images enlarges them

  • Clicking images opens the album detail page


5. Music Section
The Music page links to Spotify. Users can click on the album cover to open Rosé’s music channel.

  • Clicking a song displays the embedded Spotify player

  • Users can listen to the album directly on the site without leaving, with a synchronized scroll and playback experience



6. Interactive Section
Clicking the central “Rosie” button on the homepage takes users to the interactive area.

  • Users can hover, scroll, or click to trigger animations and interactive effects



7. Music Video (MV) Section
At the bottom of the MV page, users are guided to click “SEE THE FILM” to explore more visual content.

  • This section showcases Rosé’s main songs and their music videos

  • Users can scroll through three songs and see video details

  • Each MV can be played directly, paired with text descriptions and visual effects for a full experience


 I plan to embed this in the music slider panel, allowing users to freely slide and click on the panel：


Final figma submission:


Website prototype link:






FEEDBACK:

Week 7:

The content is somewhat lacking. For example, the album section could include more information, such as Rosé's reasons for deciding to release the album and the inspiration behind its creation.

The layout needs improvement. The album's homepage is not visually appealing enough and requires a clearer structure and more prominent titles. Many other pages also need appropriate section titles to guide users.

Some pages lack navigation. A "back" button is needed to allow users to easily return to the previous page.


REFLECTION

Experience

In this project, I designed an interactive website and practiced using Adobe Animate. I learned basic animation skills such as shape tweening, motion guides, keyframes, and creating simple animations like countdown numbers and buttons.

Observations

I noticed that some website sections lacked content, especially the album page, which needs more information such as why Rosé released the album. Several pages also needed clearer titles and a back button for easier navigation. In AN, I observed that proper keyframes, labels, and instance names are essential for animations and interactive buttons to work correctly.

Findings

From these observations, I realized the importance of combining visual design with strong content development. A page becomes more effective when titles, descriptions, and navigation are clearly defined. I also found that small UI elements—such as headers, section labels, and return buttons—greatly enhance usability and help guide the audience through the site.






评论

发表评论

此博客中的热门博文