Advanced Interactive Design - Task 2: Interaction Design Planning and Prototype

23.5.2024 - 13.6.2024 (Week 5 - Week 8)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Task 2: Interactive Design Planning and Prototype

---

INSTRUCTIONS

---

TASK 2 - PROTOTYPE

Instruction

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 are can build their animation or user reference animation to demonstrate the intended idea.

Definition: 

1. On Load Animation: Animation that occurs when the webpage initially loads.
2. In-Page Animation: Animation that takes place within a page of the website.
3. Off-Screen Animation: Animation that takes place as an element moves off the screen or fades out.

Loading Page

Explanation of the Page: 

When users first enter the website, they are introduced to a loading page designed with a futuristic theme. This sets the tone with a dynamically animated logo and a thematic loading interface. The centerpiece is the animated logo, situated above a loading bar that indicates the page's loading progress, enhancing user interactivity and engagement. Below this, a horizontally scrolling display features the album covers, showcasing the breadth of their discography.

On Load Animation: 

1. As the page starts loading, the central logo "aespa" begins as a small, dimly lit icon in the center of the screen.
2. The logo gradually glows brighter and expands outward, with a burst of light rays emitting from its core, simulating a pulse of energy.
3. This expansion aligns with the loading progress bar below, which fills synchronously with the logo's pulsation.
4. At the same time, a series of album covers begins automatically scrolling horizontally from left to right at the bottom of the screen, introducing the user to the artist's albums.

Off-Screen Animation: 

1. As the loading bar progressively reaches its endpoint, it signals the completion of the page load. Simultaneously, the horizontal scroll of album covers moves to its final position and stops, never to scroll again.
2. Post-loading, both the aespa logo and the loading bar undergo a subtle enlargement. Following this, the loading bar starts to fade out, decreasing in opacity and sinking towards the bottom of the screen until it completely fades out.
3. The central logo then enlarges, filling the entire screen, and seamlessly transforms into the Home Page, providing a smooth transition that captivates the user's attention.

Fig. 2.1 - Loading Page

Fig. 2.2 - Animated pages in Figma

Home Page

On Load Animation: 

1. Upon entering the home page, the scenic background image is the first to appear, enhancing the depth and providing a picturesque backdrop that complements the futuristic theme.
2. The Aespa logo, positioned at the top center, subtly transitions from complete transparency to full visibility, creating a smooth, welcoming effect.
3. The navigation bar elements fade in with a slight delay following the logo. The "Home" and "Profile" options slide in from the left, while "Albums" and "Merch" slide in from the right, guiding user focus across the navigation options systematically.
4. A neon circle materializes at the center, gradually shifting from transparent to fully visible, while simultaneously beginning a slow rotation to draw attention to the center.
5. Images of the members appear sequentially, each accompanied by a glitch effect animation, reinforcing the futuristic vibe. Following their appearance, neon lines extend toward their associated icons, which then illuminate one by one.

In-Page Animation:

1. Hovering over each member’s photo triggers the image to subtly enlarge. Concurrently, a neon light animates behind their profile line, starting from the inner edge and extending outward to their circle icon. This visual cue helps emphasize the focus on the selected member and encourages users to click on their icon.
2. Each member’s circle icon, which represents them with a unique symbol and color, becomes interactive. Clicking an icon transforms it into a panel that displays a video highlighting the member's special abilities.

Off-Screen Animation: 

1. As elements are dismissed or navigated away from, member images and icons disappear one by one with a glitch effect, maintaining the high-tech aesthetic.
2. The central neon circle fades from full visibility to transparency and rotating simultaneously.
3. The background image darkens, preparing the visual field for the next page display.

Fig. 3.1 - Home Page

Fig. 3.2 - Home Page ( After clicking Karina's icon)

Fig. 3.3 - Home Page ( After clicking Giselle's icon)

Fig. 3.4 - Animated pages in Figma

Profile Page

On Load Animation: 

1. As the page loads, the left panel featuring the profile images of the members slides in from the left side, stopping smoothly at its designated position.
2. The large profile image and accompanying details of the members fade in sequentially. This effect is enhanced by a subtle glitch and changes in opacity, creating a smooth and gradual unveiling of each character's details, adding to the sense of discovery.
3. Simultaneously, the avatar representation in the center rises from the bottom of the screen, accompanied by a soft, light purple beam effect that highlights its arrival. This enhances the futuristic and digital theme of the webpage.

In-Page Animation:

1. When user hovers over the profile images in the left panel, each image transforms to reveal their avatar, representing their second identity. This transition hints at the dual nature of each character.
2. The avatar representation positioned on the central continuous bouncing motion, making it appear lively and akin to a real-life show character.
3. Upon hovering over the large profile image encased in a neon blue frame, it transitions into a video. This seamless change from static image to motion adds an interactive layer that captures the user's interest.

Off-Screen Animation: 

1. As the user navigates to another page, all active elements, including profile details, avatars, and the image panel, simultaneously diminish in brightness before fading out. This coordinated animation ensures a clean and organized closure to the page.
2. The side panel slides out to the left.
3. The background image darkens, preparing the visual field for the next page display.

Fig. 4.1 - Member Profile Page (Karina)

Fig. 4.2 - Member Profile Page (NingNing)

Fig. 4.3 - Member Profile Page (Winter)

Fig. 4.4 - Member Profile Page (Giselle)

Fig. 4.5 - Animated pages in Figma

Album Page

On Load Animation: 

1. As the page loads, the album title "GIRLS" first appears in the center of the screen with a holographic effect, transitioning from small and transparent to large and fully visible, creating a vibrant and three-dimensional look that captures the futuristic theme.
2. The "GIRLS" logo then shrinks to fit the album cover and is positioned at the top of it. Simultaneously, the album cover fades into view with gradual opacity changes.
3. Following this, the vinyl record slides out from beneath the album cover, adding depth to the presentation.
4. The album's description, including the title and introductory paragraph, is revealed through a masking effect from bottom to top, enhancing the sense of unveiling.
5. The music playlist appears through a horizontal masking effect from left to right, synchronizing with the other elements to create a cohesive visual entry.

In-Page Animation:

1. While music plays, the vinyl rotates slowly, enhancing user engagement and adding a realistic touch to the digital interface.
2. The image atop the vinyl and the album cover changes in sync with the selected song, visually representing each track's unique identity.
3. Users can select songs from the playlist located on the left. Each song selection triggers a visual "fold" effect on the current cover image, where the page seems to fold into itself and then unfold to reveal the associated album artwork, maintaining a digital, modern aesthetic.
4. An interactive "Read More" button is located at the bottom left; clicking it directs users to the official website for further engagement.

Off-Screen Animation: 

1. When exiting the album page or transitioning to another page, the vinyl first slides back into its cover, mimicking the action of storing the vinyl in its case—a visually pleasing and logical end to the interaction.
2. The left side of the content (including the Cover, Vinyl and button) animates by sliding out of the screen to the left.
3. Following a slight delay, the right-side content (including the vinyl and album cover) continues the motion, sliding horizontally out to the right, ensuring a balanced and organized closure to the page.

Fig. 5.1 - Album Page

Fig. 5.2 - Animated pages in Figma

---

FINAL SUBMISSION

Prototype link: Figma-View-Link

Final Adv Interactive Design - Task 2 : Interaction Design Planning and Prototype

Presentation Slide Link: Canva-View-Link

Final Adv Interactive Design - Task 2 : Presentation Slide

Presentation Video Link: https://youtu.be/1sCZlE_XjDc

Final Adv Interactive Design - Task 2 :  Presentation Video

---

REFLECTION

For this task, I quite enjoyed the process, as the selected theme was something I was interested in. However, one thing I worry about is whether the animations I proposed for this task will work in Adobe Animate or if they will be difficult to create when it comes to the final project. This is my first time using Adobe Animate, and I'm not familiar with it, so when coming up with ideas for planning the animations on the website, I kept questioning whether they were too complex or too simple. Despite these concerns, I enjoyed the brainstorming process. I spent some time browsing online to find inspiration to create and improve the interactivity of the website.