Final Task: Completed Interactive Thematic Website

26.6.2024 -03.8.2024 / Week 10-Week 15

Tiffany Tan Xuan / 0362472

Advanced Interactive Design / Bachelor of Design in Creative Media

Final Task: Completed Interactive Thematic Website 

---

INSTRUCTIOINS

---

FINAL TASK

During our first week of class, Mr. Shamsul briefed us on the tasks we had for the semester. One of the most challenging tasks was creating a complete thematic interactive website. I chose to focus on the YSL Love Shine Series, combining my passion for beauty products with the skills I’ve been developing in interactive design.

The foundation for this final project was laid during the earlier tasks where I developed the concept and initial prototypes. Revisiting these prototypes, I critically analyzed the design choices and user flow to ensure they aligned with the YSL brand's luxurious identity. I made adjustments to the color schemes, typography, and overall aesthetics to make sure every detail exuded the elegance synonymous with YSL.

The challenge I've faced through this task is balancing the brand's identity with user engagement was a complex process. YSL’s minimalistic and luxurious style needed to be translated into a digital experience that was also interactive and engaging.

Transitioning from a prototype to a functional website required integrating visual assets with coding to create an interactive experience. This stage involved meticulous work, from ensuring responsive design across devices to implementing animations that enhanced user engagement without overwhelming the interface.

The technical aspect of integrating animations and ensuring they performed smoothly across various devices was demanding. I had to dive deeper into coding, debugging, and optimizing the website to maintain a seamless user experience.

One of the standout features of the site is the “Try It On” page, where users can virtually try on different shades of lipstick. This feature required careful planning and coding to ensure it was both functional and engaging. I used JavaScript to make the interactive elements responsive to user inputs, creating an immersive experience.

Ensuring the interactive elements worked consistently across different browsers and devices required extensive testing and refining. I had to ensure that the animations were not only visually appealing but also functional.

The final stage involved refining the overall website. This included polishing the visual design, ensuring all interactive elements were fully functional, and optimizing the website for performance. I focused on creating a smooth user experience, from the landing page to the final “Shop Now” button.

Final Submission:

Google drive link:

https://drive.google.com/drive/folders/1D-BEV-RQB01wIhC5a_PCF_6Uob1AzyLx?usp=sharing

Video Walkthrough:

Youtube Link- https://youtu.be/zaoUvw9vSj4

---

REFLECTION

Experience:

Creating the YSL Love Shine Series website was a comprehensive journey that tested both my creative and technical abilities. Working through each stage of the project allowed me to integrate various skills—from conceptualizing the design to implementing and refining interactive elements.

Observations:

One key observation was the critical role of user feedback in refining the design. Even well-planned features required adjustment after real-world testing, which underscored the importance of iterative design and continuous improvement.

Findings:

The process reinforced the idea that successful interactive design hinges on a delicate balance between aesthetics and functionality. Every interactive element must not only look appealing but also serve a purpose that enhances the user’s journey. This task teaches me how thoughtful design can transform a digital experience into an engaging and immersive one.

Completing the thematic interactive website for the YSL Love Shine Series has been both challenging and rewarding. It required synthesizing all the knowledge gained throughout the course and applying it to create a functional and engaging product. I’m proud of the final outcome, which reflects both the brand’s identity and my growth as a designer. This project has solidified my understanding of the intersection between design and functionality, and I’m excited to apply these skills to future projects.