Application Design II / Final Project
22.6.2023 - 13.7.2023(Week 12 - Week 15)
Chang Jia Yee / 0350402 / Bachelor of Design in Creative Media
Application Design II
Final Project: Completed App
Final Project - Completed App
We were required to synthesise the knowledge in task 1, 2 for application 2
final project. We have to create and integrate visual asset and refine the
prototype into a complete working and functional product experience.
Fig. Final Prototype
Fig. Animate the login page
Fig . The play button expand
Fig . HTML CSS for the play button expand animation
This is to make a special effect of switching to the next page by
enlarging the button when pressing it.
GSAP Animation for Welcome Page
Fig. GSAP Logo Animation
Horizontal scrolling
Fig. HTML CSS to create horizontal scrolling
The coding of this part is to make the category section slide
horizontally.
Create turntable
I think the most difficult part of my whole app is the part of this
turntable, because it is the coding part that I have never touched at all,
and it is also something that I have not learned in class. After some
attempts, I finally got such an effect, as shown on the right of the
following picture. There is still a big difference from my original
design, and it is also not exquisite and has some bugs.
Fig. Comparison of what I imagine and what I can do
Fig . HTML turntable version1
Fig. CSS turntable version1
Because this turntable will rotate after I click it, but every time I
click it, the whole turntable will rotate and the position will shift,
which will cover the title. Then, after transform-origin is changed to
transform origin：center center, although it rotates around the center of
the circle, but all the pictures overlap.
Fig. JS turntable version1
TurntableVersion 2
Fig . Modify the turntable's layout
Then I looked for related tutorials on youtube, and finally found a
similar idea, and then I tried to follow the film and changed it to look
like my template.
Fig. JS for turntable vesion2
In the end, this version of turntable was successfully completed and
reached my expectations. This part of making turntable took me about 6
hours to finish.
Create Slider
Fig . HTML CSS JS to create slider between detail and ingredient
Fig . Trigger the change of information when clicking the slide bar
Fig . JS - adjust serving number
This is the important part on the detail page, which allows users to
adjust the serving part by clicking the plus sign and minus sign.
Checkbox
Fig. Create checkbox
When the user clicks on the square box, the item will be ticked, and then
the text will turn blue. When the user clicks on the same square box for
the second time, the box will be unchecked and the text will turn back to
the original black.
Progress bar (For step)
Video. Click to move the progress bar
Fig . HTML JS for progress bar
Fig . CSS for progress bar
First, make a progress bar that can be moved by clicking, add three
vertical bars to the bar, and make the vertical bars the button of each
section of the trigger.
Fig. lighthouse report
Fig. icon in desktop (left) & icon when browsing (right)
Final Submission
Video. Final app walkthrough
Netlify link: https://deft-crumble-610dc2.netlify.app
Reflection
I have gained a lot from this project. Strictly speaking, it is the result
of spending nearly two semesters. The process from scratch has experienced
many challenges, and I am slowly exploring and progressing. I think the most
difficult part of this programming is the turntable part. It is also the
part that I spent the most time studying. The process was really frustrating
and anxious, but I also learned a lot.
Links
Comments
Post a Comment