Application Design II / Task 2: Interaction Design Planning & Prototyping

26.05.2025 - 02.06.2025 / Week 6 - Week 7

ID name YANG HANWEN

ID number 0364085

Program Name Bachelor of Design (Honors) in Creative Media

UI/UX

Task 2: Interaction Design Planning & Prototyping

LIST

◆ Instructions

◆ Lectures

◆ Task 2: Interaction Design Planning & Prototyping

◆ Feedback

◆  Reflections

Instructions

Lectures

Week 6 App Design 2 Online Class (Monday)

Mi↓ne

UI Animation—How to Apply Disney’s 12 Principles of Animation to UI Design

Task 2: Interaction Design Planning & Prototyping

Disclaimer: The following Lectures (including this blog post and Figma) are...

The reference Mr. Razif sent in the group is not what I found and copied (to be honest, I may not necessarily refer to this reference, after all, the app made there is different from what I am doing)

So, I wrote down the changes I made that were different from Task 1 and submitted them.

I did it in reverse order (as shown below) so...

the following is the Ul Toolkit (including Typography, Colors, Iconography, Grid Systems) part.

The next one is the component library (these components will be used by me in the Master Plan & Storyboard page).

Oh, by the way, regarding the component part, I found a tutorial video on how to create component variants↓

So the next part is also the part that takes up the most energy for me: Master Plan & Storyboard.

What needs to be added is the opening animation of the initial App and the final screen of entering the game...

I recorded these two videos...

Then export it to GIF format↓

Then the last one is the High Fidelity Prototype. There are some changes, but not much.

As for the presentation video part of the submission requirements...

I'm going to be lazy here. The following pictures are what I want to talk about in the video.

Submission

• Figma Files
  
• Figma Interactive Prototype
  
• Presentation Video
  

Feedback

Week 6 - Week 7

Actually, from the fourth week to the seventh week, due to various reasons (public holidays, road closures due to the ASEAN summit, etc.), I basically only had one (or was it two?) online class. So I didn’t resume physical classes until the eighth week. But from the eighth week on, it was Task 3, so there was no feedback during this period.

Reflections

Experience

Based on the blog example given by Mr. Razif above, I can see the difference between Task 2 and Task 1. Although the required submissions are very similar, they are completely different. For me, it can be regarded as a buffer task to make up for Task 1. If nothing unexpected happens, this task will serve as a link between the previous Task 1 and Task 3.

Observations

According to my observation, Mr. Razif did not put too much effort into this task. Even the time period from the task opening to the deadline was very short. It can be seen that this is actually to make the prototype modified in Task 1 into a dynamic interactive effect. Therefore, it can be said that this task should have the least proportion in the entire module.

Findings

I used to think that "everything is difficult at the beginning", but now I find that I was wrong. Is it the beginning that is difficult? The difficult part is that I can't start, and when I finally start, I am always interrupted by other trivial things that I have to accept for no reason, and it is difficult to pick up the interrupted progress later.