8/7/2024 - 1/8/2023 (Week 11 - Week14)
Teoh Gim Khoon (0361563)
Bachelor of Design (Hons) in Creative Media
Final Project
INSTRUCTIONS
Process
Building on the progress from Task 3, I focused on enhancing my app's interactivity and overall user experience through various animations and linking all components together. This involved using HTML, CSS, and JavaScript to achieve a seamless and engaging user interface. I developed several animations to add life and fluidity to the app, including smooth page transitions, gradual content fade-ins, interactive card swiping, animated pop-ups, and enhanced button interactions. These animations were designed to provide a cohesive browsing experience, making the interface feel dynamic and user-friendly.
After completing the animations, I integrated them into the Figma Hi-Fi fidelity wireframe, allowing me to visualize the final look and feel of the app. This high-fidelity prototype ensured that all elements worked together harmoniously. Additionally, I updated the Flow Map and Masterplan to reflect the latest changes in the app's UI design. The Flow Map was adjusted to ensure a logical and intuitive user flow, clearly mapping out all new animations and transitions. The Masterplan documented the overall structure and layout of the app, including any changes made to accommodate the new animations and design elements.
By meticulously creating and integrating these animations, and updating the supporting documents, I brought the app closer to its final form, ensuring a polished and user-friendly experience. Based on the task 3 previous progression I have crated few animation for my app and create all the other to link up togather and get a finalize app by using HTML, CSS, JS to achieve it.
After completing Task 3, I finalized all the minor and major animations for the app, including page transitions, content fade-ins, card swiping, pop-ups, and buttons, in the Figma Hi-Fi fidelity wireframe. Additionally, I updated the Flow Map and Masterplan to reflect any changes or edits in the app's UI design.
Flow Map
Masterplan
Artspark Final Wireframe
Artspark App Prototype
Final Project
Improvement / Changes
Navbar Changes
I decided to change the bottom navbar design since the initial one was too simple. I wanted to incorporate more dynamic animations, so I updated it to a new design with enhanced icon movement animations.
Layout Arrangement
I made some improvements to the search bar and category tab of the marketplace UI to enhance clarity and ease of navigation for users. These changes also make the UI look cleaner and more organized.
Card Swipe
I reduced the size of the "Add to Cart" button on the swiping card as it felt a bit cluttered. I believe users should go through the details before deciding whether to add the item to their cart.
Page Transition
For the page transitions, I applied macro animations using GSAP's `to`, `from`, and `fromTo` functions. These animations make the transitions more engaging when navigating between pages.
Micro & Macro Animation
I have also completed the animations for various app elements, including buttons, icons, the navbar, and the percentage switch. Additionally, I added macro animations for the card swipe feature, which enhances the experience of exploring art content for sale on the marketplace.
Netlify Upload & PWA
Netlify
This is the final step to finish the app. I deployed it on Netlify, allowing others to download it. Following Mr. Razif's tutorial video, I uploaded the files to Netlify and ensured that my app can be exported as a Progressive Web App (PWA).
Netlify Link: https://artspark.netlify.app/
After finishing the upload, I reviewed my app's performance score using the Lighthouse panel in the browser's Developer Tools. I was pleased to see that the score was quite high. I'm really glad to have achieved this with the work I've put in.
PWA PDF
Google Drive Link:
Final Video Presentation
Final Video Walkthrough
Reflection
Throughout the development of this final project, I embarked on a challenging yet immensely rewarding journey that pushed me to expand my skills and creativity in web development. This project offered a unique opportunity to apply my knowledge of HTML, CSS, and JavaScript, along with GSAP, to create a functional and visually appealing app. Here are some key reflections and takeaways from this experience. At the start of the project, I carefully outlined the scope and objectives, guided by clear instructions and a strategic plan. Focusing on enhancing the interactivity and overall user experience of the app allowed me to prioritize key functionalities while maintaining a manageable development process.
Learning GSAP: Incorporating GSAP for animations was a thrilling and challenging endeavor. Despite the steep learning curve, I persevered and discovered new ways to enhance user interactions. There were moments where certain elements required precise positioning to achieve smoother animations, but overcoming these challenges significantly improved my coding skills and understanding of animation in web design.
Animation and Integration: Developing various animations, such as smooth page transitions, content fade-ins, card swiping, animated pop-ups, and enhanced button interactions, added life and fluidity to the app. Integrating these animations into the Figma Hi-Fi fidelity wireframe helped visualize the final look and feel of the app, ensuring all elements worked together harmoniously. Updating the Flow Map and Masterplan to reflect these changes ensured a logical and intuitive user flow.
Improvements and Changes: Making strategic improvements, such as redesigning the bottom navbar for more dynamic animations and enhancing the layout arrangement of the search bar and category tab, significantly improved the app's clarity and ease of navigation. These changes resulted in a cleaner and more organized interface, enhancing the overall user experience.
Netlify Deployment and Performance Review: Deploying the app on Netlify as a Progressive Web App (PWA) was the final step in the project. Following Mr. Razif's tutorial, I uploaded the files to Netlify and ensured the app could be exported as a PWA. Reviewing the app's performance score using the Lighthouse panel in the browser's Developer Tools was gratifying, as the high score validated the effort and dedication I put into the project.
Looking back, I am proud of the progress I made from the beginning of the semester. Each challenge served as an opportunity for growth, and the sense of accomplishment upon completion is incredibly fulfilling. While I am pleased with the current version of the app, I recognize that there is always room for improvement. I intend to continue learning and refining my skills, exploring new technologies and design trends to elevate my future projects.
In conclusion, this final project has been a valuable and enriching experience. From technical challenges to design decisions, each aspect contributed to my growth as a web developer. I am grateful for the guidance of Mr. Razif and the support from my peers, and I am excited to apply the knowledge gained from this project to future endeavors in web development.
Comments
Post a Comment