APPLICATION DESIGN II: TASK 03
ALICIA TENG YI LING [0345159]
APPLICATION DESIGN II [TASK 03]
Todo:
- Create interactive prototype of app using web technologies [GSAP]
Process
For our final assignment, we will bring to life our redesigned app using HTML, CSS, and JS. To begin, I focused on crafting the foundation of the project by building the essential components in HTML and CSS.
Figma Wireframes
Following Mr. Razif's guidance, our task was to code and animate only the pages that are vital for our app's functionality. Given that my app is a meal planner, I opted to focus on crafting the following essential pages:
- Loading page
- Onboarding pages 1-5
- Log in
- Sign up
- Home page
- Daily meal plan
- Daily meal summary
- Recipes
- Calendar
- 3 pop up overlays
I then finished constructing my pages using HTML, CSS and minor javascript.
 |
Fig 1.1 Screenshot of Home Page HTML |
 |
Fig 1.2 Screenshot of Home Page CSS |
Moving on, I started to animate my pages. Here's a screenshot of one of my pages GSAP script but the overall functions are similar to how I did my other pages.
 |
Fig 1.3 Screenshot of GSAP Script for Home Page |
Uploading + PWA
As the last step for submitting this mobile app. We were tasked to allow our app to be downloaded on the Netlify site.
At first after uploading the mobile app to Netlify, I noticed weird sizing issues which I couldn't figure out at all until I tried implementing <meta name="viewport" content="width=device-width, initial-scale=1"> which fixed it!
During the export process, I closely followed Sir Razif's tutorial to ensure that my app could be exported as a Progressive Web App (PWA). This involved creating a manifest file and adding an icon, enabling users to easily add it to their home screen on their phones. The result was quite impressive, but I did experience some latency issues which can be seen during my presentation and walkthrough video recordings.
 | ||
Fig 2.1 Files to upload to Netlify
|
 |
Fig 2.3 Uploaded mobile app to Netlify |
 |
Fig 2.4 Preparing for PWA I |
 | |
|
 |
Fig 2.6 Generated Lighthouse report for page load with PWA badge |
I likely can't download it on my own phone right now because it has 0.2 GB of memory left.
 |
Fig 2.7 Option to install my Daily Meal Planner Mobile App |
Final Submission for Application Design II Task 03
Here's the final app, I recommend you open it with Samsung Galaxy S20 Ultra dimension settings or with a phone or other devices with similar measurements.
Fig 3.1 Final Mobile App Video Presentation
Fig 3.2 Final Mobile App Video Walkthrough
Reflection
Throughout the development of this project, I embarked on a rewarding journey that challenged me to expand my skills and creativity in web development. This project presented a unique opportunity to apply my knowledge of HTML, CSS, and JavaScript + GSAP to create a functional and visually appealing app. Here are some key reflections and takeaways from this experience.
At the beginning of the project, I carefully defined the scope and objectives, guided by Mr. Razif's instructions. Focusing on essential pages for my meal planner app was a strategic decision, allowing me to prioritize functionality while keeping the development manageable.
Learning GSAP: Incorporating GSAP for animations was both exciting and challenging. Although the learning curve was insanely steep (I am not good at code), I persevered and discovered new possibilities for enhancing user interactions. However, I also encountered hurdles where certain elements required absolute positioning for smoother animations.
I learned the significance of time management as I balanced my project milestones with other commitments. Iterative development allowed me to continuously refine and enhance the app, ensuring progress was steady and improvements were implemented. Looking back on the project, I am proud of how far I've come as from the beginning of the semester. Each obstacle served as an opportunity for growth, and the sense of accomplishment upon completion is truly gratifying.
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, app design ii 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