Advance Interactive Design - Task 3

23.9.2024 - 03.1.2025 / Week 1- Week 13
Advance Interactive Design / Bachelor of Design (Honours) in Creative Media
Aliah Farhana Binti Mohd Fauzi / 0357957

Task 3 - Final Thematic Interactive Website

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1FaEzRhxoJV6S54FzbTRSc5nwECqWMLzA/preview" width="640" height="480" allow="autoplay"></iframe>

Using the knowledge and skills gained from Tasks 1, 2, and 3, we have to complete Task 4 by integrating visual assets, applying design techniques, and refining their prototype into a polished and fully functional product. The emphasis will be on crafting a seamless, engaging user experience while ensuring all components function cohesively.

---

PROCESS

Figure 1.1 Cover in Adobe Illustrator

This was process of me doing the cover in Adobe Illustrator and several others components on my websites. Then, afterwards I have transferred the ai file to the adobe animate and all the layers were visible where it have ease my editing on adobe animate.

Figure 1.2 Converting into buttons

As per Mr. Shamsul teaches us during the class tutorial, I have applied the knowledge into this assignment of mine.

Figure 1.3 Actions and Label layers

This has eased my coding as I have labeled each sections using the Label layer.

Figure 1.4 Classic Tween

Classic tween also has been used quite a lot in this website of mine.

Figure 1.5 Sound 

I've also have applied sound on the buttons to make it more engaging to the users.

---

SUBMISSIONS

Netlify link here

https://youtu.be/HGqjnyXki48?si=-ljbbw1xWTgdxKmy

---

REFLECTIONS

Observations

Throughout the project, I observed the intricate balance required between design aesthetics and functional coding. Integrating visual elements from Adobe Illustrator into Adobe Animate was a meticulous process, demanding careful attention to detail to ensure seamless transitions and interactions. Additionally, implementing audio feedback for button interactions highlighted the importance of sensory engagement in enhancing user experience.

Experiences

The process of converting design components into interactive elements was both enlightening and demanding. I applied the techniques demonstrated during class tutorials, such as labeling sections and utilizing classic tweens, which streamlined the animation process. However, I faced significant challenges with button functionalities; some buttons malfunctioned, leading to user interaction issues. Moreover, certain coding aspects were so complex that I had to pivot from my initial concept in Task 2 to a more feasible solution. Despite these hurdles, I remained committed to creating an engaging and comprehensive website, striving to ensure it was both visually appealing and functionally robust.

Findings

This task underscored the importance of adaptability and problem-solving in design. Encountering coding difficulties reinforced the need for a solid understanding of programming principles and the value of seeking alternative solutions when initial ideas prove impractical. The experience also highlighted the significance of user-centric design; ensuring that interactive elements function correctly is crucial for maintaining user engagement and satisfaction.

In conclusion, Task 3 was a transformative experience that deepened my understanding of interactive design. The challenges I faced, particularly with button malfunctions and complex coding, taught me resilience and adaptability. My dedication to producing an engaging and complete website reflects my commitment to continuous improvement and delivering quality user experiences.