Advanced Interactive Design | Final Task: Final Website
FEILYCIA JOY KURNIAWAN / 0373400 
Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
Final Task: Final Website - Unfolding Origami
TABLE OF CONTENTS
1. Lectures
2. Instruction
3.Process & Final Outcome
4. Feedback
5. Reflection
LECTURES
Even after finishing the prototype and moving into Adobe Animate, I still find website design is not consistent through out the pages so I decided to try to find new references / new perspective to help the website to look more consistent
After some trials for the other page's layouts I decided to use the grid as a part of my design to make it consistent.
For the homepage itself, the main function is just as a landing page, and the origami squares acts as the navigation for other pages
After making the origami squares as buttons, I animate them to come into the frame and add bouncy effect as the come into frame.
When you are on that specific page, the nav bar will have the name of the current page you are on, and when you hover it will change to "menu".
And as you click, a dropdown menu will appear.
I then made a movie clip to animate them so when user first enter the origin page, the origin navbar will have a revealing animation.
For the content itself, I use mask for the photos and use shape tween for the information boxes.
For the origami elements itself, I made the elements in Adobe Illustrator and export it as PNGs. I then turn the images into buttons, so that when users hover on the origami, it will shift slightly.
I used a rectangle and break it down and shape tween it to make this transition so that the content flows smoothly.
As page transition, every time it change pages, the elements in that certain page will slide into the frame.
Dotted lines are used to show folding instructions. For some steps, I can easily do it by rotating or scaling up and down the shape which I put classic tween in it.
But there are a few steps that I need to edit frame by frame. Due to some shape tween doesn't really work for certain steps, I break down the shape again and change the color to give some contrast.
Lastly, after user are finished with the tutorial, a start again button will appear just to bring them into the start of the tutorial.
After that, I started playing around with other layout and I find across that I like.
Keeping it consistent with the other pages, I keep the same transition for the text box using rectangles and shape tween.
After making sure that all pages are connected and everything works, I uploaded my folder into netlify for publishing.
FEEDBACK
WEEK 9
General Feedback - Showed Mr Shamsul my homepage and meanings page but Mr shamsul said it does not look consistent, and it is better if I re-do everything before moving on to the next pages
WEEK 10
General Feedback - Finished and showed him my homepage and meanings page with the new layout and he said it is already okay and I can proceed
WEEK 11-12
General Feedback - No class
WEEK 13
General Feedback - Showed my origin page and he said its good and I can proceed
WEEK 14
General Feedback - Showed my craft page and he said its good and I can proceed
Throughout this project, I faced several challenges while using Adobe Animate. At first, I struggled with understanding the program itself, especially when creating interactive elements and connecting different pages. However, the biggest challenge was not only the software, but also figuring out how to organise my assets properly, such as separating layers, creating movie clips, and deciding which elements should be grouped or animated separately. After several trials and mistakes, I slowly became more familiar with the workflow and started to understand how Adobe Animate works better.
Another challenge I faced was the layout design. I found it difficult to arrange the elements in a way that felt balanced and visually satisfying. Although I am not fully happy with the final outcome, I believe this is the best result I could achieve with the time and skills I had. This project made me realise that planning the layout and structure earlier is very important, especially for an interactive website with multiple pages and animations.
Overall, I do regret not using VS Code for this project. If I had known earlier that this type of interactive website could also be created through coding, I might have chosen a different approach or even a different topic that worked better with VS Code. However, Adobe Animate was still an interesting and fun program to explore. Even though I may not use it much in the future, it helped me understand animation, timeline-based interaction, and visual storytelling better.
The feedback from my lecturer was also very useful throughout the process. It helped me improve my concept, refine my content, and make better decisions for the final website. Despite the struggles, this project was a valuable learning experience and I enjoyed the process of creating an interactive origami-themed website.
Comments
Post a Comment