ADVANCED INTERACTIVE DESIGN TASK 2
Week 1-Week 14 (23/09/2025-04/11/2025)
Jennifer Michelle Hiendrawan/0374682
Advanced Interactive Design/Bachelor of Design (Honours) in Creative Media
Task 2
TABLE OF CONTENT
1.Lectures
2.Instructions
3.Task
4.Feedback
5.Reflection
LECTURES
Week 5
Today we learnt how to make a simple animation. First, we must make a ball
that can move from left to right.
.png)
This is the final outcome
Next Mr.Shamsul want us to make a bouncing ball (2x bounce). Here are the
process.
.png)
Based on my first attempt, Mr. Shamsul said that it almost perfect but i
still need to adjust the mass when stretched and also attention to each
detail. Therefore i revised it.
Here is the final outcome.
Week 6-Spider
First we learn how to create a symbol by using the object drawing, draw the
graphic, and then convert it to symbol by clickinhg modify -> convert to
symbol
.png)
Next we learn how to create the animation using pencil tool then snap the
object to the grid that we've created
Week 7-Welcome page and enter button
This week we were taught by Mr.Shamsul to make a welcome animation and also
enter button. Here is my progress.
Here is the final outcome
TASK
BRIEF
We need to create a prototype of our website in Figma, which will also include the animations we will design. Then, we have to create a presentation video to explain the animation references, the presentation slides, and also explain the content and functionality of our Figma prototype.
Requirements :
1. Walkthrough Video presenting the plan and showing the animation examples and/or references.
2. 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.)
Here is my wireframe compilation based on task 1.
.png)
Based on the wireframe, I initially created a very rough progress in figma. Here are some of my progress updates in Figma before consulting with Mr. Shamsul. I repeated this project many times because it didn’t match what I wanted.
.png)
.png)
After the consultation with Mr.Shamsul he said that i can improve my website better and for the history part, he said that i musty make the text besides the circle and not on the center. Therefore, i started to improve the design. Here is the images that i used for my website.
Below is the overall progress and attempts
Loading page
I want this website to clearly represent Indonesia from the very beginning, so I added Wayang (because during every Wayang performance, the traditional drink served is Indonesian tea). I also included a teacup and falling tea leaves (animated). The tea will be appear first and then there will be leaves animation, loading line animation, and wayang
Animation reference: https://youtu.be/udqecCLy86Q?si=202HGYPdZwCiDBPz
First i created each frame for the loading page
.png)
Next i added the after delay for each frame (all the same) to create the animation
.png)
Landing page
User will automatically go to the landing page after the loading page. Here i use batik as a background (the white one) to represent Indonesia, also hanacaraka (Indonesian traditional letters) as a decoration to represent Indonesia also.
I applied after delay to make the animation.
.png)
I want to create an aesthetic concept that still carries Indonesia’s traditional values. Therefore, I’m also introducing aromatic spices, natural flavors, and Indonesian herbs that are commonly used in tea. A traditional indonesian tea (teh poci) served in the middle of the page, with Indonesian aromatic spice, herbs, in the left and right (horizontal scroll animation).
I tried many times to create the horizontal scroll by making variants and using after delay
Animation reference: https://youtu.be/RLw7AgyNSDg?si=ONr4xb_lGvskS1hT
.png)
History
A timeline of Indonesian tea history shaped like a quarter circle with a rotating tea cup in the center. This page is slightly different from the wireframe because, based on Mr. Shamsul’s feedback, it’s better to place the ‘History’ text on the side instead of in the center.
I created several frames to apply the ‘after delay’ animation (rotating cup), and I also created an overlay so that when the numbers are clicked, an overlay appears showing the history for each year.
Animation reference: https://youtu.be/FF1q3Eylwa0?si=nOsauLQSeNfLw8y4
.png)
Types of tea
A carousel designed with a unique shape. The ‘Types of Tea’ section is different from the wireframe because Mr. Shamsul recommended using the tea-pouring animation as the brewing page, while the ‘Types of Tea’ page, he said, could be improved and made better. Therefore, this is the final result after I improved it.
Animation reference:
.png)
Here i created the hover effect one by one also.
.png)
Animation reference: https://youtu.be/oVsAUcNT4n0?si=TClzcI9ionPb9X_V
First i created some frame one by one for the pouring tea animation, then i added after delay to create the animation
.png)
Next it clicked start, it will go to the "how to brew the tea", there are a lot of numbers there as the step to brew the tea, the numbers all can be click, starting from number 1. There are animation also for the "teh poci", it can move slightly to the left and right.
.png)
This is the overlay that i created for the brewing process.
.png)
Benefits
There will be a card that displayed the benefits of indonesian tea, and then when “click here” is clicked, it will go to the animation and carrousel.
Animation reference:
First i created the frames for the benefits
.png)
.png)
TASK 2 FINAL OUTCOME
Presentation slide: Click here
Final Prototype: Click here
Final figma progress: click here
FEEDBACK
REFLECTION
Final presentation video: Click here
FEEDBACK
Week 6
Mr.shamsul said that for the historyu page, i must put the text besides the teacup, not on the top of the page. For the other page, like carrousel, etc, he said that i can make it better and improve it.
REFLECTION
I really enjoy creating website prototypes because I gain a lot of new experiences, especially about how to create good animations for a website. I also learned to use a new application, Adobe Animate, which has greatly increased my knowledge
Comments
Post a Comment