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

 
Chuah Shu En // 0368157
Bachelors of Design (Honors) in Creative Media

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

---

Table of Contents

1. Lectures

2. Instructions

3. Task

4. Feedback

5. Reflection

---

Lectures

Week 5

This week we were taught about some of the principles of animation. We applied what we learned into our class exercise which was creating a rubber band and a bouncing ball animation. 

Tips: ctrl shift V to paste in place

Fig 1.1, Rubber band (21/10/25)

Fig 1.2, Bouncing ball animation (21/10/25)

Week 6

If you want to draw the spider, always turn on 'object drawing' so you can freely move the shapes you drew. 

Tips: Click and not release + alt = duplicating object

Remember to edit your keyframes in the library mode and your spider must be converted to a symbol 

Snap spider to guides

Orient to path= make your spider rotate

Fig 1.3, Spider (28/10/25)

---

Instructions

<iframe src="https://drive.google.com/file/d/1zYc-Nv_WZjaPlbSVSgugPioIZPsfR7tN/preview" width="640" height="480" allow="autoplay"></iframe>

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.)

---

Task

After reviewing my wireframe with Mr Shamsul, I started to work on the prototype in Figma. 

Figma Link: https://www.figma.com/design/0n0k2lClkhm9a7RfXizQXY/Babymetal-Website-Proposal?node-id=0-1&t=Vr8vTCg0rtLo7fi1-1

Next, as I was searching for elements, I had the idea to use photoshop to add pictures of Babymetal into star icons instead of planets as I originally planned.

Fig 1.4, Star icons (30/10/25)

The rest of the icons are free elements from Canva.

Final Slides & Presentation below:

Presentation Slides: https://www.canva.com/design/DAG1uTsoVCk/hWWIqBCQ_q1ZVhgod7AtnA/edit?utm_content=DAG1uTsoVCk&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Presentation Video Link: https://youtube.com/watch?v=oHBmVDi4aCw&si=DGwfID-KQ5GZ8lCJ