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

10.06.2025 - 20.05.2025 / Week 5 - Week 8

ID name YANG HANWEN

ID number 0364085

Program Name Bachelor of Design (Honors) in Creative Media

UI/UX

Task 2: Interaction Design Planning and Prototype

TABLE OF CONTENTS

• Instruction
• Lectures
• Task 2: Interaction Design Planning and Prototype
• Feedback
• Reflection

Instruction

Lectures

Week 5

1. Spider 🕷
   
   
   Effect↓
   

   
2. Interior

Effect↓

Week 6

Advanced Interactive Sectio 01

Effect↓

Week 7

index

Effect↓

Task 2: Interaction Design Planning and Prototype

OK, let's continue. According to the content of the above Google Classroom project deadline post, I know that I am going to do Project 2 (← Isn't this nonsense?).Well, to be honest, I was also confused when I first saw it (maybe I knew I still had to make a PPT).However, out of "professional habit", I will first list (quote) the following "Requirements:"

• Walkthrough Video presenting the plan and showing the animation examples and/or references.

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

Fortunately, the following example is given below this "Requirements:".

Through this video on this example...

I saw that I still need to make a PPT...Uh, let me explain separately. 

The first thing to do is to create an ART DIRECTION, which includes Backgrounds, icons/elements, and Fonts.(I shouldn't need to change the font. Yea, probably not)

Secondly, there is WEB CONTENT, which is an overview of the content of the web page, that is, an overview of each item, that is, an overview of each function guide on the top (or bottom?) navigation bar.

Then, the page that is directed to after clicking each navigation button must have interactive effects and references to interactive animations.

Then there is a detailed introduction of each page (as shown in the picture above, it shows the introduction of each product page)

Finally, here are actually FLOWCHART and wireframe. Um, I should modify it based on the original (of course, FLOWCHART may not be changed, but the wireframe must be changed. It is also possible that both will be changed. I will confirm it at that time)

So next, if nothing goes wrong, I will probably put all of these in the PPT below to explain them together. Of course, I may also put the interactive animation reference, flow chart (if I change it), and wireframe below first and then embed it in the PPT made in Canva. Anyway, in short, I will definitely pick the key points (what are new and what I changed) to write about.

OK, I did change (or re-made) the flowchart↑.

Then I also finished the wireframe↑.

Finally, based on the above ↑ menu, I’d like to mention (though it may be unnecessary) that I created the following two background images of the website as the final task.

Oh, by the way, I forgot to insert my presentation on this task.

Task 2: Interaction Design Planning and Prototype ，Author: YANG HANWEN

Write a speech ↑ so I don't know what to say when I was in the presentation video.

Submission

Feedback
Week 5∣2025.05.20

What did I do in the fifth week? Let me think (it’s so painful to write Feedback from the end of the seventh week). Oh! I remember that he taught those two animations in the fifth week. As for the animation content, it’s in the Lectures above. At that time, I didn’t catch up with the second animation, so Mr. Shamsul Hamimi Ab. Rahman asked a girl in the class who had made it to teach me (in fact, she forgot it after she finished it). Finally, I succeeded in making it in the sixth week.

Week 6∣2025.05.27

Because Malaysia held an ASEAN summit "political summit"? So this week's class was changed to online. I was actually late that day (because I got up late), so when my animation was checked at the end of the course, I said that I was late but I would make it up. However, it was also fortunate that it was an online class. I had time to make up for the animation progress I missed due to my lateness according to the online class recording he sent (including last week's animation by the way)

Week 7∣2025.06.03

So this week's classes have returned to offline classes. Because of last week's online classes, when I was supplementing the lecture content, I learned that Adobe Animate can make interactive animations for web pages, so I guessed that this class would also be about interactive animations for web pages. As expected, I guessed it. Although I kept up with most of the class progress (of course, I typed "WEBSITE" as "WEBSIZE", but Mr. Shamsul Hamimi Ab. Rahman told me that this is not a big problem, as long as the main effect is correct), I didn't keep up with the final progress. Fortunately, I caught up with the teaching progress in time by asking the classmates next to me.

Week 8∣2025.06.10

Fortunately, Mr. Shamsur Hamimi Abu Rahman arranged a self-study week, otherwise I would not have had enough time to finish this task.

Reflection

Before I took this module, I thought it would teach C language (#C, C++? etc.). But when I started taking this module, I found that it was still about web page (or website) interaction. So I thought I would use Adobe Dreamweaver and then insert the animation made with Adobe Animate into the final project. But since I found out that I can make web pages and type codes in Adobe Animate, I realized "No!" It is also possible that Adobe Animate is really used directly, otherwise Mr. Shamsul Hamimi Ab. Rahman would not have been teaching Adobe Animate skills from the second week to now (of course, it is also possible that my previous guess was half right, maybe Adobe Dreamweaver will also be used. I can't describe it well)