ADV INTERACTIVE DESIGN / ASMT 02

Naura / 0356798 / Interactive Spatial Design
DST60804 / Advance Interactive Design
Assignment 02: Interaction Design Planning and Prototype

__________________________________________________________

Instructions:

• As we move forward with our website projects, we’ll start working on both the visual design and planning the interactive features. Unlike static websites, interactive designs involve movement—so our plans should go beyond layout sketches. We need to think about how animations bring our ideas to life.
• When mapping out our ideas, let’s include:
• The visual layout of the website
• Animation examples or references that help explain our interactive intentions
• What we need to submit:
• Walkthrough Video
• E-Portfolio Post
• Reflect on your design thinking and process
• Include any links to tools or resources you used (e.g., Figma, Miro, etc.)

__________________________________________________________

Process Documentation

Loading Screen + Homepage:

To match the sci-fi-fantasy theme and Plave’s narrative of a corrupted virtual world, the transition from the loading page to the homepage should feel like stepping into a glitching simulation—or a broken utopia. Since my wireframe features the Caligo logo rotating on the loading screen (I forgot to mention this in my video), I decided to start there. I recreated the logo in 3D using Blender so the asset is ready to go when I build the final site. Here’s how it turned out:

Fig 1.0 | Caligo Logo in Blender

Fig 1.1 | Final Look

About the Album:

I came across this really cool 3D carousel wheel, and I’m hoping to replicate it for the final version (fingers crossed it works as intended). The idea is to display the songs similar to how Spotify does it-where the lyrics show up as the song plays. I know I might be setting myself up for failure with that, but I still want to try. For the background, I’m planning to use the official audio visuals, but simplified into a 5-second looping GIF that plays throughout the track.

Fig 2.0 | About the Album

Since there wasn’t much official information available, I had to dig around to figure out the inspirations and production behind the songs. That meant scouring the internet-and going through over 30 of Plave’s radio shows and livestreams from the past four months-just in case they mentioned anything about the album. It was kind of fun... but also kind of painful, especially because the English subtitles weren’t exactly reliable

Member profiles:

This section differs significantly from my original wireframe proposal. The earlier version leaned more toward a modern aesthetic, which didn’t fully capture the tone of the album- especially its focus on a virtual world and the idea of that world slowly breaking down. So, I decided to pivot toward a style inspired by retro sci-fi films, particularly those that use “virtual case files” and glitchy interfaces. It feels more aligned with the narrative of corruption and distortion within a digital space.

Fig 3.0 | Previous Wireframe

Fig 3.1 | Final look

I think the hardest part of this section was creating the corrupted effect for the members’ profiles. I used Ditherboy and After Effects to get that CRT glitchy look, which fits the theme of a broken virtual world. Visually, I’m happy with how it turned out, but I did struggle with the layout - especially the huge gap underneath their biodata. I wasn’t sure what to include for some of the members, so a few of the details might seem unrelated at first glance. But I promise there’s a link! The first three are tied to their skills, while Eunho is known for his motorcycle (seen in several MVs and their concert), and Hamin is famously trapped in “praise jail” at Vitaexcubo, which is his in-world location.

Fig 3.2 | Animated Profiles (Hamin Ver.)

Unreal Engine:

This section originally used a sliding presentation format, but after testing it out, I realized it didn’t quite match the tone and structure of the rest of the site. It felt too modern and sleek, whereas the rest of the prototype leans into a retro-futuristic, sci-fi terminal style. So I redesigned it to feel more like a system configuration panel you’d see in a fictional operating system. Each tab- like Profile, RTPipe, MoCAP, and so on - acts like a module you’d toggle open to view classified system data about PLAVE’s production pipeline.

Fig 4.0 | Final Prototype Design

On the Profile tab, I introduced PLAVE and explained how they function as virtual idols, with real-time motion capture performed by live actors. I kept the layout grid-based, with a framed photo that looks like a scanned personnel file to match the techy vibe. 

On the RTPipe tab, I focused more on the Unreal Engine side of things - how VLAST uses real-time pipelines for animation, lighting, and rendering. I also included screencaps of the 3D character models to contrast the real actors shown earlier.

The color-coded tab lines and monospace font reinforce the illusion of a terminal interface, while the layered boxes hint at a complex network beneath the surface. Overall, I think this redesign better integrates with the rest of the visual language, and feels more cohesive with the ‘hacking into a system’ experience that the homepage sets up.

Merch:

Fig 5.0 | Final version Merch

This page changed quite a lot from my original plan because it didn’t match the vibe I was aiming for, even though I had put a lot of thought into the animations and transitions in my proposal. The updated version leans more into that virtual tech world aesthetic, which feels much more in line with the album’s theme. I also added a “command center” at the bottom—normally used for message logs in sci-fi movies—but in my version, it functions as a search bar instead.

Video Presentation:

Figma link

Reflection:

Looking back, I ended up making quite a few changes because some parts of my earlier draft didn’t fully reflect the cyberpunk and sci-tech theme I was aiming for. I decided to rework sections like the member profiles and merch page so that everything feels more cohesive with the virtual, glitchy aesthetic. The changes weren’t easy- especially figuring out the layout and effects but I think they helped the concept come through more clearly. Hopefully, the final version comes together smoothly without too many last-minute issues TT.