Advanced Interactive Design - Final Project

23/06/2024 - 03/08/2024
Ng Zheng Kai 0359424
Bachelor of Design in Creative Media
Advanced Interactive Design
Final Project

---

INSTRUCTIONS

---

Project 3 - Completed Thematic Website

For this project, we are to create a thematic website based on our prototype on project 2. we are to integrate visual asset and refine the prototype into a complete working and functional product experience using Adobe Animate

Before starting the project, I watched some helpful tutorials online on how to better utilize Adobe Animate.

Fig 1.1 Masking and Adding Buttons in Adobe Animate

Fig 1.2 Creating a Simple Website Using Adobe Animate

After that, I started to create assets in Adobe Illustrator and import it to the library in Adobe Animate.

Fig 1.3 Importing assets into library

I then created different animation transitions for each page and made labels on the "action" layer.

Fig 1.4 Start page

Fig 1.5 Transition

Fig 1.6 Main menu

Fig 1.7 Bearings page 1

Fig 1.8 Bearings page 2

Fig 1.9 Bearing details page

Originally, I planned to implement a page for customizing a skate deck with various selection of colour palettes but it proved to be too complicated and beyond my understanding of Animation and JavaScript.

After completing some sections of the animations, I started to code, I used an "actions' layer and label each section of the animation. I used code snippets for quickly adding my code into the specific frames.

Fig 1.10 Codes

Fig 1.11 Frames used for coding

 Final Submission

Below is the video recording of the walkthrough of the website.

Fig 1.12 Video Recording

Website link: https://advfinal-ngzhengkai.netlify.app

Google Drive Link: 

https://drive.google.com/drive/folders/1tNY2tVibQZ5R3FGFhj0QRR5OH2KlBpmC?usp=drive_link

---

Reflection

As I am undertaking the final project of Advanced Interactive Design, I found myself deeply engaged with both the technical and creative aspects of the task. The process of designing animations in Adobe Animate and crafting a thematic website challenged me to apply my technical skills in a meaningful way. It was an opportunity to explore the software's capabilities, from simple frame-by-frame animations to more complex interactive elements. Each step required a meticulous approach, from planning and storyboarding to executing and refining the animations. 

Through this project, I gained a deeper appreciation for the competencies required in digital design and animation. I recognized the importance of attention to detail, user-centered design, and effective communication. These skills are invaluable, not only in the context of this project but also in my future endeavors, whether they involve creating digital content, working in a team, or pursuing a career in a related field.

This experience has also highlighted the significance of self-assessment and seeking constructive feedback. Understanding my strengths and areas for growth has empowered me to set specific goals for improvement, such as mastering advanced animation techniques and enhancing my understanding of user experience design.

In conclusion, this final project was more than just an academic exercise; it was a journey of self-discovery and skill development. By aligning with the learning goal of "Appraising and Valuing Competencies," I was able to use technology not only as a tool for creation but also as a means for self-reflection and improvement. This project has equipped me with the skills and mindset needed to continue growing as a learner and a creator, preparing me for future challenges and opportunities in the ever-evolving digital landscape.