Advanced Interactive - Final Project
24/04/26 - 31/07/26 (Week 1 - Week 14)
Cindy Noverin / 0376409
Bachelor of Design in Creative Media / Taylors University
Advance Interactive Design - Proposal
TABLE OF CONTENTS
INSTRUCTIONS
Proposal
Progress work
to start working on the final project, I first started drawing various asset
then I exported all the asset into oen folder and tried making the
intro and navigation to all the pages, id say that this is the most
complicated stage because the navigation bar just deosnt woek
sometime and using animate on my macbook requires me to close and
open the file thousand of times each time i tried to launch the
website because It wouldn't update unless I save close and open it
again or reset animate overall
I tried to tween the intro animation as flowy as possible but turnsout
the animation couldnt work if I play with the scale and position at
the same time especially for the island so I had to click one pivot
point and scale it from that,
then I continue with the homepage, which I just decided to add this
page because I didn't have one on figma prototype, I was thinking to
atleast let the user land on a pretty page introducing the main
signature of bagan siapi api which is the bakar tongkang tradition
after finishing the homepage, I moved on to the folklore page which
I like the most with the fireflies floatinga round and all, i was
thinking to have the fireflies scatter when user click one but when
I used the labelling frame method the transition is not possible, so
I just do what I can, and it came out good enough.
then this culinary part, where I wasted most of my time developing
on because I decided that I wanted to draw 12 different food and
have them spin around, I didn't get the gsap quite right, but on
this part gemini help a lot with the code and framing because time
are quite short, even so, tehre are lots of problem, wether it's the
food rotation, the food itself and the arrow.
for this history page, i decided to use gsap again referencing to
the gsap tutorial I had during weeks ago where the page could do a
horizontal scroll, quite basic, but nice to see.
for the tradition page, I was thinking to have a white stroke as the
hover, and if compared to the prototype, I widened the area so I
wouldnt have to cramp everything based on the scale and all
for the sound, I used ai to generate a bg sound for me, and I did
some finishing touches which is mostly just debugging buttons that
didn't work and make every navigation bar could navigate to every
page, and lastly adding sound effect to the button
Final Website
google drive
final netlify link (best to open using chrome)
REFLECTION
Experience
Throughout this project, I learned not to underestimate the workload of developing an interactive website. Although I had already completed the prototype in Figma, implementing it in Adobe Animate took much longer than expected due to debugging navigation, fixing animations, and creating additional assets and interactions such as the homepage, culinary illustrations, GSAP animations, and sound effects. Looking back, I should have started the project earlier so I would have had more time to experiment and polish the final result instead of rushing near the deadline.
Observation
I observed that developing interactive websites involves much more than creating the visual design. Even simple interactions such as hover effects, page transitions, and animations required multiple rounds of testing and debugging before they worked properly. I also noticed that adding extra features beyond my proposal improved the final website but significantly increased the amount of work.
Findings
From this project, I found that proper time management is just as important as technical and design skills. Starting earlier would have allowed me to solve unexpected technical issues more comfortably and spend more time refining the user experience. This experience taught me to plan for extra development time in future interactive design projects.
back to top
Comments
Post a Comment