Labels

Application Design II - Final Project

Start from 18.12.2024

16/12/2024 - 7/1/2025 (Week 12 - Week 14)

Zhao GuanMei / 0363166

Application Design II/ Bachelor of Design (Hons) in Creative Media

Final Project


INDEX


Final Project

A. Combining Prototype
B. Page Transitions
C. Transaction Successful
D. Shopping Bag Button Animation
E. Email Input
Final Project Submission

Reflection


INSTRUCTION

Final Project

In this task, we'll integrate the knowledge we've gained from previous assignments to refine our prototypes into a complete, functional app.

Requirements:
Submit a presentation slide as a PDF.
Post reflections on the E-portfolio.

Learning Goals: Use ICT to assess and reflect on personal performance for self-improvement.


Flow list

  • Loading Page
  • Launch Page
  • Home Page
  • Product Page
  • Cart Page
  • Sign In/Registration
  • Payment Page
  • Successful Payment Page
  • Home Page

    • Fig. 1.0 Final flow chart in Figma

    1. Combining Loading page, Prelaunch page ,Main page and Navigation



    combined html code

    css code

    Page links and navigation animation Settings-Gsap JS Code

    Outcome:



    loading page & prelaunch page transition


    2. Product page &Category Animation

    The main function of these two pages is the link of the page I use slide in and the function of linking pages with photos



    Outcome:



    3. Shopping Bag Icon Animation

    The main function of these two pages is the link of the page I use slide in and the function of linking pages with photos



    4.Sign in



    5.Payment page & Success Animation
     


    Final walkthrough video



    Netlify link :https://reisgnhmap.netlify.app/

    Documents Drive :https://drive.google.com/drive/folders/1u-r-ayyQFZUlR5_5i35cRCuta69myFK4?usp=sharing

    Final Presentation Slide

    Brown and White Minimal Professional Portfolio Presentation 


    Reflection

    Observation and Reflection

    This semester, I’ve significantly improved my understanding and approach to the H&M redesign project. At the beginning, my design was quite simple, but as the project progressed, I gradually used HTML, CSS, and JavaScript to complete the entire interactive development. JavaScript is a new skill I recently started learning, and it has been quite a challenge for me. Since I’m not yet proficient, my work efficiency was affected, and I encountered many difficulties while solving coding issues.

    One typical problem was that importing Lottie files disrupted the functionality of the buttons on the page. To identify and resolve the issue, I had to repeatedly try and adjust different solutions. This process was very frustrating and challenging. Fortunately, with the help and guidance of my lecturer, Mr. Shamsul, I gradually overcame these difficulties. His advice and support helped me gain a deeper understanding of JavaScript.

    Through this experience, I deeply realized the importance of patience and problem-solving. When faced with difficulties, I learned how to calmly analyze the problem and try different methods to solve it. I also realized the importance of utilizing resources, such as the guidance from my lecturer and online tutorials, which greatly helped my learning. Despite the challenges, I found myself more interested and motivated to improve my JavaScript skills.

    In the future, I will continue to practice and enhance my JavaScript skills, striving to complete tasks more efficiently in the next project. This semester’s experience has taught me a lot and laid a solid foundation for my future development.



    Labels:

    Comments

    Post a Comment