Application Design II / Task 3: Final App Prototype

-

19.6.2023- 16.7.2023 (Week 12 - Week 15)
Britney Chow Pei Jun / 0350043 / BDCM
App Design II
Task 3: Final App Prototype

Task 3: Final App Prototype

In this task, we are required to code out the animations and interactions of the app. Below is my progression: 

Fig 1.1; First page coding; (5/7/2023) 

Fig 1.2; First page coding HTML; (5/7/2023) 

Fig 1.3; Checkbox script coding; (5/7/2023) 

Fig 1.4; Page Animation Sliding codes; (8/7/2023) 

Fig 1.5; Page navigation code; (8/7/2023) 

Fig 1.6; Page little animations codes (15/7/2023) 

Fig 1.7; Some CSS codes (5/7/2023) 

Fig 1.8; Some CSS codes 2 (5/7/2023) 

For the first page html side is pretty easy for me as we have learned HTML CSS coding in Interactive Design before in our previous semester. Furthermore, our lecturer has also helped us in reviewing them in our classes. Therefore I do not have as much problem in this part. 

Next, I start to code my other pages.

Fig 1.9; Homepage; (7/7/2023)

Fig 2.0; Homepage HTML code; (7/7/2023)

Fig 2.1; Homepage HTML code 2; (7/7/2023)

Fig 2.2; Homepage HTML code 3; (7/7/2023)

Fig 2.3; Homepage CSS code 1; (7/7/2023)

Fig 2.4; Homepage CSS code 2; (7/7/2023)

Fig 2.5; Homepage Javascript code 1; (15/7/2023)

Fig 2.6; Homepage Javascript code 2; (15/7/2023)

Fig 2.7; Homepage CSS code 3; (15/7/2023)

Fig 2.8; Homepage pop ups; (15/7/2023)

I struggled quite a lot in this page since I need to align the buttons properly especially for the navigation bar. I need to constraint it to the bottom of the screen and make the pop up works. After spending quite a lot of days of researching and asking ChatGPT, I finally got the results I wanted. 

Fig 2.9; Habit choosing page; (10/7/2023)

Fig 3.0; Habit input page; (10/7/2023)

Fig 3.1; Choosing input page HTML code; (10/7/2023)

Fig 3.2; Habit input page HTML code; (10/7/2023)

Fig 3.3; CSS Code for input page; (10/7/2023)

In this page, I spend some time learning how to do the little buttons work and the animation for it. 

Final Submission


Fig 3.4; Video Walkthrough of Final App Prototype; (17/6/2023)

Link to Final App Prototype: Habitify Application in netlify (*have to zoom out slightly to view the app*)

FEEDBACK

*none*

REFLECTION

This project make me realized that I really need to spend more time to understand its coding and stuff, considering I might have made more mistakes than anyone else, and I also did not make my app to the point that I'm very satisfied for it. Personally I think that I could do so much better in this subject, however, due to some elements, I came up with this. Not something that I'm very proud of, but at least I feel that I really learned a lot while coding the whole prototype out. On the other hand, I really do like this coding project sometimes since I feel that its fun and that I feel that it will help me out a lot in the future. I feel grateful that I have a chance to do something like this.

Comments

Post a Comment

Popular posts from this blog

Major Project // Final Submission

-
Image
Week 1 - Week 16 (22.04.2024 - 09.08.2024) Britney Chow Pei Jun / 0350043 / BDCM Major Project Progression INSTRUCTIONS PROGRESSION Week 1 - 2: For the first week, we started our class with Mr. Asrizal giving us a brief on what major project is. He told us that this time we're allowed to be in groups to work on our major project. Furthermore, Mr. Kannan also mentioned how we should brainstorm for our major project. After that I started to think how I should proceed with my major project while in the meantime, searching for partners. I then started to group up with Jia Yee for my major project. We then started to brainstorm for ideas, both of us have came up with all sorts of ideas, yet none of them feels like it would be best suited for us. After coming up with a few ideas we think could work, we started organizing it: Fig 1.1; Ideation 1; Week 1 Fig 1.2; Ideation 2; Week 1; ...
Read more

Game Development // Task 1: Game Proposal

-
Image
1.9.2023- 29.9.2023 (Week 1 - Week 5) Britney Chow Pei Jun / 0350043 / BDCM Game Development Task 1: Game Proposal LECTURES/EXERCISES WEEK 1 In this week's class, we are required to review a game made by our seniors. Fig 1.1; Reaper Test Game; sauce:  TDS Gamezone ; Although the graphic of this game does not feel as good as the other game in Gamezone. However, it is still nice as it uses simple shapes and design, the colors used in the game does not feel very out of place, the background also feels alright, but for my first time playing this game, I did not know about the environment of the game. Furthermore, the music chosen also able to fit in to the game itself. The story of the game is nice as there's a goal behind it. Due to the limitations the developer faces, there won't be more to the story. Moreover, the movement of the character is slightly "slippery" as it sometimes slipped even th...
Read more

Design Principle: Project 2

-
Image
11.10.2021 - 31.10.2021 (Week 8 - Week 10) Britney Chow Pei Jun / 0350043 / BDCM Design Principles Lectures and Project 2 LECTURES  Introduction A designer's role is to solve problems with effective visual communication. Ranging from personal goals to community events, and from corporate functions to world changing projects. Observation Be attentive to your surroundings Pay attention to the details and to be analytical about them Sources of observation can stem from artifacts, daily happenings, physical surroundings, and such.  An active act of acquiring information through the senses, of a subject matter in its natural setting. Senses are important for us to know, feel, understand, analyze and even plan what we want to do. Important to designers as it enables them t...
Read more