Advanced Interactive Design - Assignment 2

on

Interaction Design Planning & Prototype

Date: 6 June 2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

This week I focused on Task 2: Interaction Design Planning & Prototype. After finalizing my website concept — a thematic interactive experience inspired by the Tron universe — I started planning the animation flow and user interactions for each section. I’ve compiled everything into a proposal slide deck and walkthrough video, which are now uploaded to my e-portfolio.

A major design influence for my animations and transitions is DonProd. I really admire how they bring energy and fluid motion into every page, and I aimed to replicate that immersive feel in my project.

💡 Page-by-Page Interaction Plan:

  • 🔹 Welcome Page
    The site opens with a light bike racing toward a futuristic city at night. As the user scrolls, the bike animates forward, syncing with the scroll speed, and once it reaches the glowing city backdrop, the screen smoothly transitions into the About Movie page — acting like a cinematic start experience.

  • 🔹 About Movie Page
    This section features two trailer previews (for Tron and Tron: Legacy). Hovering on either preview increases its opacity and reveals the title and description more clearly. A timeline showcasing Tron’s cinematic history fades in from left to right as users scroll, creating a seamless, informative flow.

  • 🔹 Explore Elements Page
    At the top of the page, a 3D model spins 360° continuously. Below, users can click on different element tabs (like Light Cycle, Identity Disc, etc.) or use navigation arrows to swap between objects. Each transition is smooth and interactive. A secondary section introduces key characters from the Tron universe, with images and bios fading in as the user scrolls.

  • 🔹 Music Page
    This section opens with a large visual frame featuring the currently playing soundtrack. A glowing bloom effect pulses when music plays, adding life to the UI. Beneath it, other soundtracks are displayed as selectable tiles — clicking one will animate it into the main frame with smooth transitions. At the bottom, I’ve included a section highlighting Daft Punk’s past collaborations (since they composed Tron: Legacy’s score), with hover effects increasing the video and text opacity for a more dynamic feel.

  • 🔹 Visual Download Page
    Visitors can browse official visuals and artworks. When an image is selected, it expands into a larger view (near-fullscreen) for detailed inspection before download. Hovering reveals the image title and adds a subtle glow effect to enhance the browsing experience.

This assignment really helped me think beyond just layout and visuals — I had to consider how users move through the experience and how animations could enhance the storytelling. Drawing inspiration from DonProd’s style allowed me to maintain a high level of motion and energy across all pages, which fits perfectly with the Tron theme.

Presentation For Animation Proposal

Figma Prototype Link

Canva proposal slide




Comments

Post a Comment