Advanced Interactive Design - Task 2

Task 2: Interaction Design Planning & Prototype 

In this task, we are required to work on the visual design and start planning our 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. We can build our animation or user-reference animation to demonstrate the intended idea.

Link to my previous task: Task 1

For this task, I decided to create an animated website that tells the story of my favorite anime, Puella Magi Madoka Magica. To maintain a consistent aesthetic throughout the site, I chose to design all the visual assets myself. I began by using Procreate to illustrate the elements needed for the website.

Asset drawing

The design concept follows a flat, minimalist, and symmetrical aesthetic, and also using fix colour scheme to maintain visual consistency. To ensure the assets fit well with the overall website design, I placed each completed asset into the layout and compared them side by side. Along the way, I also refined the UI design, for example, by bolding key typography and adjusting the arrangement of text elements. Below are the wireframes and the final design with all the assets in place.

Adjustment made:

• The Contract (Landing Page): I designed the title in both English and Japanese, with a scrolling animation from left to right. The title is centered on the screen, with a question placed above it for emphasis. To enhance visual interest, I also added a rotating element.
• Wishbound: I repositioned the text to the top left and bottom right corners to create a more balanced composition. In the center, I added an interactive ring that expands and contracts, encouraging users to click on it.
• Wishbound 2: I included a spiral ring in the design to make it visually engaging and dynamic.
• Fading Dream: Minor adjustments were made to the placement of the text for better visual flow.
• Still Moments: Text alignment and placement were refined for improved clarity and balance.

The Contract (Landing Page)

Wishbound

Wishbound 2

Fading Dream

Still Moments

Hidden Truth

Broken Wishes

Endless Loop

Forgotten Light

I show my drafts to Mr. Shamsul, and overall he likes with the UI design, particularly the composition and layout. However, he suggested improving the user interaction by adding microinteractions to the buttons, rather than simply instructing users on what to click. This enhancement could help increase user engagement on the website.

While thinking of how to further improve the microinteractions, I started by creating simple animations using components and variants for each element I wanted to animate. I applied basic animations such as fade in/out, after delay, rotation, and more. However, Figma has limitations when it comes to animation, as its features are just very basic. Some animations are difficult to visualize or too complex to create without building them frame by frame. In comparison, Adobe Animate offers more flexibility and control, making it easier to execute detailed animations. Therefore, I chose to focus on the main animations in Figma and will refine them further in Adobe Animate. I also plan to animate individual image elements, depending on Adobe Animate’s capabilities. Below is an overview of the animations I created in Figma.

Animation

To improve microinteractions, instead of using common buttons like “Enter” or “Next,” I wanted to create more engagement. So, I kept a short instruction at the bottom to guide users on where to click and added a glowing circle as a visual cue to direct their attention.

Below is the overall prototype I created in Figma. Due to certain limitations, the animation isn’t perfectly refined, but it is sufficient to convey my concept and demonstrate how the animation will work. I plan to further enhance the animation using Adobe Animate, which offers more advanced features for creating smoother and more detailed animations.

Link to Figma: Link

Link to Prototype: Link

Website walkthrough

Reflection

Through this assignment, I trained myself in creating animations using Figma and explored various interactive elements to enhance user experience and engagement. I experimented with different microinteractions such as hover effects, glowing indicators, and timed transitions to make the interface more intuitive and engaging. This process helped me better understand how animation can guide user behavior and improve the overall flow of interaction. While Figma provided a solid foundation for prototyping, I also realized its limitations in handling more complex animations. Therefore, I plan to refine and improve the animation using Adobe Animate, which offers greater control and flexibility. This experience has motivated me to further develop my skills in motion design and continue exploring tools that can bring my ideas to life more effectively.