10/06/25 - 27/07/25 Week 8 - Week 14
Sheren Princessa Davon / 0362134
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Final Project: Completed Thematic Interactive Website
INSTRUCTIONS
TASK 3
This project is the final part for our thematic interactive website. Requirements:
Based on the feedback from my prototype, I changed my design a little bit. I downloaded the assets needed from my Figma prototype before I started the process on Adobe Animate.
Loading & Landing Page
 |
| Fig 1.1 Loading & Landing page |
For the loading page, I used the idea of paw prints to replicate the fox walking, and just had the tree (the character's home) as the landing page.
Navigation
I kept my navigation bar on the top for clear navigation in my website. The paw on the right corner leads you back to the homepage.
 |
| Fig. 1.2 Navigation bar |
 |
| Fig 1.3 Page navigation |
Overall
I used a Classic Tween and Alpha Color effect for all the transitions in my website so that it looks cohesive. I also added a slight position keyframe so that there's more dynamic towards the transitions.
 |
| Fig 1.4 Adobe Animate process |
 |
| Fig 1.5 Adobe Animate process #2 |
I created buttons from the assets and created actions for each button to lead to the next pages/course of action.
 |
| Fig 1.6 Actions panel overview |
 |
| Fig 1.7 Library panel overview |
SUBMISSION
Website link: https://fantasticmrfoxwebsite.netlify.app/ (website takes a few moments to load!)
 |
| Fig 1.8 Website preview |
REFLECTION
This project and module overall was quite challenging, especially for someone like me whose ui/ux design is not essentially the best. Learning a new software, Adobe Animate took me a long time to understand and master as the timeline was a bit confusing. I had a hard time figuring out the actions panel and the overall tools of the software, but this project definitely helped me familiarize and practice the tools in Animate. This project has helped me to attempt to be more organized, especially since I have a habit of not naming my layers or assets normally. But it is quite essential in this case.
The home page of my website could definitely be improved but due to time constrains and personal issues I faced during the end of the semester, I had to stick with whatever I had.. and Adobe Animate truly wasn't on my side due to how many times it crashed when I was creating the website, to the point where I had to restart due to an error and crash where I lost some progress in the timeline and couldn't even preview the website.. causing me to waste time. Lesson learned!
Overall, this was quite the experience and it was a new learning experience creating my own thematic website while I've been admiring all the web developers and UI/UX designers out there. As a graphic designer, this web knowledge is extremely useful for me and I'll take this as an opportunity to explore the software by myself even after I've finished this module.
Comments
Post a Comment