Advanced Interactive Design — Task 2: Interaction Design Planning and Prototype
22.10.2025 - 16.11.2025 / Week 5 — Week 8
Next, select the entire button and copy it, go to any other layer and paste in place. Select the whole button again and convert to BUTTON symbol and align to center. Now we have a button but it doesn't cover the entire area of the button.
Go back to the action layer from before and add a blank keyframe beside it. Go to Properties > Frame > Label and name the button. Go to the layer where you added the button (not the action layer) and jump to a frame where you want the button to fade, then add a keyframe there. Use the alpha colour settings and reduce it to 0. Then add a classic tween to get the fading effect.
To start off, I first reviewed what I had proposed in Task 1.
Figure 3.2 shows the result when the frames are compiled and looped using Figma’s Smart Animate tool.
After designing the loading screen, I moved on to the navigation bar. I deviated from the original wireframe because I felt that a centered alignment looked more prominent and visually stronger. Figure 3.3 shows the hover and active states of the nav bar.
Figure 3.5 Icon interactions (09/11/2025).
Chan Zhi-Ren Zenndan / 0369069
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's UniversityTask 2: Interaction Design Planning and Prototype
Table of Contents
1. Lectures & Activities
2. Instructions
3. Process
1. Lectures & Activities
Week 5
This week, we learned how to create and animate a symbol. I started by drawing a spider using object drawing, then converted it into a graphic symbol. After that, I entered isolation mode to work on the animation, making the spider’s legs and eyes move.
Figure 1.1 Symbol settings (22/10/2025).
Figure 1.2 Spider animation attempt (22/10/2025).
Week 6
This week, we began class by revisiting previously learned tools, particularly shape tweening. Our task was to create a countdown timer using shape tweening while ensuring the transitions between numbers weren’t too abrupt. To achieve this, there needed to be a brief pause between each second instead of an instant switch.
I managed to complete the countdown, but the transition still felt abrupt. I spent some time trying to smooth it out but ran out of time during class. Later, I consulted Mr. Shamsul, who explained the trick to achieving smoother transitions.
Figure 1.3 Countdown using shape tweening (29/10/2025).
Later, we also learned about masking and creating basic loading screen animations. The focus was on animating the elements leading up to the “Enter” button, though the button was not interactable at this stage.
Before working on the web project, go to Publish Settings and make sure Center Stage, Make Responsive and Scale to Visible Area (Fit in view) is turned on.
Figure 1.4 Ideal publish settings for upcoming project (29/10/2025).
Figure 1.5 Masking exercise (29/10/2025).
Week 7
This week we learned about making the button from last week interactable. This is done by adding a blank keyframe on the very end of a new layer and adding an 'Action' to it, which provides several Javascript preset actions to choose from.
For specific instructions - right click on the blank keyframe > Actions > Add using wizard > Stop > This timeline > Next > Within the frame > finish and add
Figure 1.6 Using action wizards (05/11/2025).
Next, select the entire button and copy it, go to any other layer and paste in place. Select the whole button again and convert to BUTTON symbol and align to center. Now we have a button but it doesn't cover the entire area of the button.
Double click the button to adjust the button's settings. There will be 4 options to adjust which are "Up," "Over," "Down," and "Hit." Ideally it's best to have separate layers for different options.
Add a keyframe to "Hit." To cover a larger area (whether in or out of the frame) of the button, add a shape thats similar to the button but just make it large enough to cover the whole button. Use fill only.
Add a keyframe to "Over" to add a hover effect. Replicate the shape of the button exactly and use preferred hover color. Use fill only.
Figure 1.7 Button keyframes (05/11/2025).
Drag the end point of the action frame to the same frame/column to when the fade ends. Go to the first action frame and double click the button. Go to Label and label it as 'btn' and make sure the mode still says its on Button mode. Now click the second action frame which is to the right of the first, and double click on it again but this time change the mode from Button to Graphic. This is to achieve the fadeaway effect.
Now go to the first action frame again and add another using wizard. This time click on:
Go to frame label and play > This timeline > Next > On mouse click > btn (button name you made) > Finish and add
Figure 1.8 Interactable button (05/11/2025).
Week 8
No class
2. Instructions
Document 2.1 Module Information (22/10/2025).
3. Process
For Task 2, these are the exact instructions we were given:
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.)
Finalized Concept from Task 1
Slide 3.1 Finalized Concept Proposal (15/10/2025).
I then began by creating the loading page and its looping animation. Figure 3.1 shows assets used to create the frame animation.
Figure 3.1 Loading screen assets (09/11/2025).
Figure 3.2 shows the result when the frames are compiled and looped using Figma’s Smart Animate tool.
Figure 3.2 Loading screen frame animation (09/11/2025).
After designing the loading screen, I moved on to the navigation bar. I deviated from the original wireframe because I felt that a centered alignment looked more prominent and visually stronger. Figure 3.3 shows the hover and active states of the nav bar.
Figure 3.3 Navigation bar (09/11/2025).
Figure 3.4 Landing page buttons/components (09/11/2025).
Next, the About page felt too static in the wireframe, so I added some interactivity by using small clickable icons for each method. Clicking an icon brings up a pop-up overlay with a brief explanation of that method.
Figure 3.6 Icon components (09/11/2025).
After clicking the “Choose” button, users are directed to the selection page, where they can freely choose whichever method interests them.
Figure 3.7 Selection page (09/11/2025).
Once a brew is selected, a carousel of steps appears, guiding users through the process for that particular method.
Figure 3.8 Selection page (09/11/2025).
After users have gone through the steps, another interactive element appears below the image: a handwritten, barista-style sticky note suggesting alternative steps/tips for approaching the method. Figure 3.10 shows the sticky notes for all three methods.
Figure 3.9 Sticky note interaction (09/11/2025).
Figure 3.10 All three sticky notes (09/11/2025).
Figure 3.11 Steps components (09/11/2025).
After the user has completed learning all three methods, they are directed to the closing page. Here, users can return to either the home page or the selection page to revisit any methods they may have skipped. For example, a user might go straight to the third option, the AeroPress, and miss out on learning the other methods because it is listed last.
Figure 3.12 Closing page (09/11/2025).
Final Prototype (Figma)
Live Figma Preview 3.1 Prototype (16/11/2025).
Presentation Video
Video 3.1 Presentation Video (16/11/2025).
Relevant Links
Comments
Post a Comment