Advanced Interactive Design - Final Project: Thematic Interactive Website

ADVANCED INTERACTIVE DESIGN DST 60804

WEEK 10 - WEEK 14  (19.12.2024 - 03.01.2024)

NAME: Chai Wei Yi

I.D: 0369561

COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media

GROUP: Class 01 Sec 01

Advanced Interactive Design - Final Project: Thematic Interactive Website Proposal




 INSTRUCTION

Module Information Booklet (MIB)

Module Information Booklet (MIB)
2. FINAL PROJECT: THEMATIC INTERACTIVE WEBSITE
During Week 10 after we finnished our Task 02, our class started to conduct on the Final Project. Based on what I have submitted on Task 02, I tried to recurrence the whole Figma Prototype into the Adobe Animation.


Working Progression

Firstly, I start to create a new file inside the Adobe Animate and named it as "index". And then, starts from the layout. 

Figure 1.1  New file named index



Home Page:

This week, I began working on a website dedicated to Fujifilm, focusing on showcasing their product range, services, and brand story. The goal is to create an engaging platform that highlights the innovative essence of Fujifilm while ensuring a smooth user experience.

  • The website emphasizes Fujifilm's photography products and brand philosophy.
  • A clean, minimalist aesthetic was chosen to align with Fujifilm's modern yet classic brand identity.


    • Figure 1.2  Home Page




    Camera Page:

    This week, I focused on the website design for Fujifilm, with an emphasis on their innovative cameras and brand legacy. The main goal is to create a clean and visually appealing interface that reflects Fujifilm's commitment to quality and creativity in photography.XM5 had providing 2 color way to let user to choose


    Figure 1.3  Diff color way of XM-5




    Gallery Page

    The development of the Fujifilm website has progressed further this week, with additional features and pages introduced to improve user interaction and showcase Fujifilm's product capabilities and sample works.
  • This section showcases sample photographs taken using Fujifilm cameras alongside the cameras’ technical details.
  • It includes an interactive image carousel where users can view different samples and the specifications of the cameras used.


    • Figure 1.4  Gallery Page

    Specification Page

    This update focuses on the Specifications Page, a key section where detailed technical information about Fujifilm cameras is presented in a structured and easy-to-read format. This addition enhances the user experience by providing essential details for photography enthusiasts and potential buyers
  • A clear and concise table layout was used to organize the technical specifications of each Fujifilm camera model.
  • Information such as sensor type, megapixels, ISO range, lens compatibility, and price is included to help users make informed decisions.


    • Figure 1.5  showing specification of XM-5

    Accessories  Page

    The latest update focuses on the Accessories and Software Section, a crucial addition to the Fujifilm website. This section aims to provide users with detailed information about various accessories and software that complement Fujifilm cameras, enhancing their photography experience.
  • The first image shows the overview of accessory categories, laid out in a clean and simple list format.
  • The second image displays the Flash Accessories Subsection, featuring high-quality thumbnails and structured spacing for each item.








    • Upload Netlify
    After publishing the file, I then upload the file to Netlify.
    *ps: When open this link please give the site 1 minute to load.


    Click HERE to access the file in Netlify.


    Walkthrough Video
    After uploading the file to Netlify, I then record the walkthrough video.






    Video 01  Walkthrough Video

    FEEDBACK
    There is no feedback given from Mr Shamsul.



    REFLECTION

    Experience

    Working on the Fujifilm website has been a rewarding yet challenging experience. It allowed me to dive deeper into designing a user-centric platform while balancing functionality with aesthetics. Through this project, I learned to approach web development with a clear focus on the target audience's needs and expectations.




    Comments

    Post a Comment

    Popular posts from this blog

    Information Design-EX1

    Image
    Information Design (GCD60504) Week1-Week2 NAME : Chai Wei Yi I.D: 0369561 COURSE: Intercultural Design  / Bachelor of Design (Honors) in Creative Media GROUP: Class 01 Sec 01 Information Design (GCD60504） Introduction Requirements : For this exercise we supposed to quantify our chosen items and arrange the objects into a presentable layout or chart. I decided to go with fluffy color deco balls. I started by sorting them based on their colors and then arranged them in order of their quantity and condition on the A3 paper. Arrange the objects in a structured layout to clearly present the data. Label and annotate the display with relevant indicators using pens or markers to help visualize the quantities. Photo 1 : Random objects before sorting. Photo 2 : Objects sorted...
    Read more

    Minor Project

    Image
    Experiential Design Task 3 WEEK 05 - Week 07 (22.05.2025 - 05.06.2025) NAME: Chai Wei Yi I.D: 0369561 COURSE: Application Design 2 / Bachelor of Design (Honors) in Creative Media GROUP: Class 01 Sec 01 Experiential Design/ Bachelor of Creative Media/Taylor's University Task 3: Project MVP Prototype
    Read more

    Final Project Compilation

    3/2/2025 - 17/3/2025 (Week 1 - Week 7) Chai Wei Yi / 0369561 Major Project I / Bachelor of Design (Hons) in Creative Media Final Project Compilation  INSTRUCTIONS   IDEATION  Ideation Pitch - 4/2/2025  WORKFILE  Fig Jam Work File - 5/2/2025 Task 1 - Final Submission Final Presentation Slide  CONSULTATION FEEDBACK  ...
    Read more