14.06.2023 - 05.07.2023 (Week 7 - Week 14)
Audrey Gracia Djohari / 0348120
Application Design II
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Final Project: Micro Interactions and Animated Micro Interaction Prototype
FINAL PROJECT: MICRO INTERACTIONS AND ANIMATED MICRO INTERACTION PROTOTYPE
Instruction
Students will build upon the knowledge gained in Task 2 to create micro
interactions and animated micro interactions for their app. This will
greatly elevate the user experience of the app. The aim of this task is
to get the students to explore and make creative decisions on the type
of interactions they would want to integrate into their app. The output
of this task is a prototype which showcase the functional micro
interactions and need not necessarily be a complete app yet. However,
the output must be viewable and working on the smartphones.
Head Section
I think the Head section is crucial because it's where I link the document
to GSAP, add viewport script that allows the page to be responsive to the
screen, and it's also where I link the rest of the important components.
Fig 1.0: Head Section
Files & Scripts
You can check the codes by downloading the file from the Google
Drive.
Fig 2.0: Files
File Google Drive :
Lighthouse & Installation
Fig 3.0: Lighthouse Analysis
Final Outcome
FINAL WEB APP LINK: https://precious-quokka-d1a003.netlify.app/
Fig 4.0: Final Outcome (try me!)
Fig 4.1: Final Presentation video (Week 14)
*Installed it in my phone*
Fig 4.2: Installed in iPhone (Week 15)
FEEDBACK
WEEK 14:
Specific Feedback
(Final Project) When I showed Mr. Razif my final outcome in
browser, the page does not fit the Mr.Razif's phone. So he gave me
tutorial on how to use viewport in my html head section. After I
applied it, it worked just fine and my web app is responsive to
the screen size.
REFLECTION
Experience
Creating a working animated web app of an imaginary e-wallet using HTML,
CSS, and JavaScript was an exciting and rewarding experience for me.
Throughout this project, I utilized GSAP (GreenSock Animation Platform) to
bring dynamic and engaging animations to life. The experience of building
this web app was filled with moments of both frustration and triumph.
Initially, I was overwhelmed by the complexity of creating an e-wallet
from scratch and incorporating animations to enhance the user experience.
However, I enjoyed the process and I like coding html more and more
throughout different projects.
Observation
Observing the progress I made during the development stages was
incredibly satisfying. As I implemented the HTML structure and styled
the elements with CSS, I could see the app taking shape. Adding
interactivity with JavaScript brought the e-wallet to life, allowing
users to navigate through various features seamlessly. One of the most
exciting aspects of this project was incorporating GSAP to create
animations. GSAP provided a powerful toolkit for building smooth and
visually appealing transitions, giving the e-wallet a polished and
professional look. It was remarkable to witness how the animations added
a layer of sophistication and user engagement to the web app.
Findings
Throughout this project, I discovered the importance of planning
and organization in web development, Figma really helped!
Carefully mapping out the app's structure and flow helped me
maintain a clear direction and prevented unnecessary
rework. Another key finding was the power of GSAP in animating web
interfaces. GSAP's intuitive syntax and extensive documentation
made it accessible for even those with limited animation
experience using code. The smooth transitions and interactive
elements provided a delightful user experience, enhancing the
app's usability and leaving a lasting impression on users.
Comments
Post a Comment