Labels

App Design2 // Final Project

08.11.2023 - 13.12.2023// Week 10 - week 16

Lim Yi Xvan 0354552

Bachelor of Design in Creative Media 



Instructions


Tasks 3: Interactive Prototype


Coding HTML CSS 

We will use HTML, CSS, and JS to implement our redesigned app as our final project. I started by concentrating on creating the project's structure by creating the necessary HTML and CSS elements.

This is the complete app's interface pages. However, it was impossible to done all of the pages with only a few weeks time, carry on with some other module's projects too. Hence, I consulted with Mr. Razif to see whether if we can reduce the pages to work on for this project and here're the essential pages planned out to be work for the final project:

  1. Onloading page x2
  2. Login page
  3. Onboarding page x5
  4. Home page
  5. Add symptoms page
  6. Add diary page
  7. Add period page
  8. Calendar page - month
  9. Self care page
  10. Self care- resource page
  11. Profile page

Referring to the above App Flow Mapping & Micro Animations Masterplan as a guidance, I then completed building my pages with a little bit of javascript, CSS, and HTML. I checked the pages to make sure they worked well in a variety of browsers and were responsive. I checked to make sure the content was formatted correctly and that all of the links were operational. It was crucial to me that the website was user-friendly and aesthetically pleasing to the viewership.

However, there'll always have some minor issues happening during the coding progress. So my initial idea for the entry period date was to create a yearly calendar which you can hover from and select the dates. But accident always happened, which the script for the yearly calendar template needs to be paid then only you can download🤑

fig 1.1 - pricing for the full calendar script
While anyway, so I immediately went out with a new plan which is replaced the whole calendar frame in the "period date entry" to be a date selection drop down box.

Here're some snapscreen of the html pages, script coding and css style done in Dreamweaver.
Things I have been continuously viewed for straight 2 weeks until 5am daily.🥴

fig 1.2 - birthdate entry page script: add vent listener

fig 1.3 - homepage html

fig 1.4 - homepage script: add event listener

fig 1.5 - add symptoms page html

fig 1.6 - add diary page script: add event listener

fig 1.7 - self care page style css

Publishing to Netlify

I'm finally starting to feel a little more at ease and like my feelings will soon be released. Hurray! Approaching the finish line. But simultaneously anxious as well. As the final phase in wrapping up this mobile application. We were tasked to allow our app to be downloaded on the Netlify site.

The page error is displayed initially after uploading the mobile app to Netlify. Showing that cannot locate the page and cannot load. It was almost six in the morning, and I was crying. I then went online to investigate what might have gone wrong. I see now that it's because I didn't specify "index.html" as the first page I wanted to load. haiya, so careless amoini...

fig 2.1 - 118 files...🫠

fig 2.2 - page successfully published yay!

Submission


Final Project Proposal


Walkthrough video for app prototype




Figma prototype link


Figma Netlify link:


Reflection

Embarking on the journey to create the Period Tracker App has proven to be an arduous yet immensely rewarding experience. This project pushed me to the limits of my capabilities, presenting challenges that often seemed insurmountable. There were moments of frustration, instances where I felt on the verge of giving up, and countless times where my code simply refused to cooperate.

The road was not smooth; it was filled with twists and turns that tested my resilience. I've faced numerous breakdowns, encountered roadblocks that left me feeling stuck, and grappled with the complexity of the scripts. Yet, in the face of adversity, I found a resilience within myself that I never knew existed.

This journey has been a testament to my determination. Despite the hardships, I pressed on, continually seeking new solutions when the initial ones failed. Every stumble was an opportunity to learn, and every obstacle was a chance to grow. The process of troubleshooting, debugging, and reworking the code became a cycle that, although challenging, ultimately strengthened my problem-solving skills.

One of the most significant takeaways from this project is the substantial improvement in my HTML and CSS skills. Crafting a visually appealing and functional app demanded a deep dive into these languages, and the learning curve was steep. However, with each line of code, I could see my proficiency growing. The experience has not only enhanced my technical skills but has also instilled a sense of accomplishment and self-assurance.

In the end, despite the difficulties and the moments of doubt, I feel an overwhelming satisfaction with the outcome of the Period Tracker App project. It stands as a testament to my perseverance, growth, and the ability to overcome challenges. This journey has been more than just a coding project; it has been a transformative experience that has left me with newfound skills and a deep sense of pride in my accomplishments.

I'm so sleepy and it's 7am now, it's time to have some sleep and battle tomorrow for experential design yay bye!

Labels:

Comments

Post a Comment

Popular Posts