Application Design II - Final Project: Completed App
.jpeg)
8.7.2024 - 4.8.2024 (Week 11 - Week 15)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Application
Design II
Final Project: Completed App
INSTRUCTIONS
FINAL PROJECT
Instruction
Students will synthesise the knowledge gained in task 1, 2 and 3 for
application in task 4. Students will create integrate visual asset and
refine the prototype into a complete working and functional product
experience.
Process
To recap, in the previous task, I coded some of the pages and added
interactive animations. Due to time constraints, I will reduce the number
of pages and focus on adding more animations to the remaining
ones. Below is the list of pages that need to be coded and animated,
emphasizing the primary purpose and main user task flow in the Batik Air
app, which is to book flight tickets:
- Splash Screen
- Home Screen
- Flight Selection page
- Seat selection page
- Checkout page
- Payment page
- Payment Loading Page
- Confirmation page
Home Page
Since the previous task, I've developed the homepage layout and
animation, and now I need to improve some parts. I have added animation
for the sidebar menu, where each line slides in from the left
sequentially with opacity changes. Initially, for the navigation bar,
the black border circle was intended to help create the curved edges of
the nav bar design. However, I couldn't find a way to solve the issue,
so I decided to remove the black border line. Despite this, the
animation of the nav bar still works perfectly, with smooth icon color
changes and text placement adjustments when clicked.
Previously, the center content of the panel used an image as a temporary
placeholder. Now, I need to code the layout and add clickable buttons to
navigate to the next page. Creating options for selecting the destination
with all country names was challenging, so the first two columns will be
static without requiring any input. The interactive elements include
switching the toggle button on and off and the dropdown panel for
selecting travelers and classes.
|
| Fig. 1.1 - Home screen progress in HTML |
Fig. 1.2 - Screen recording of the Homepage Animation
Flight Selection Page
For this page, I have already completed the layout design. Now, I will add a
fade-in animation when the user loads this page. The items will fade in
sequentially by sliding in from the top, and the ticket options will appear
with a folding expand type of animation. I have also adjusted the container
for the ticket options. Previously, when switching to other phone sizes, it
was not responsive and did not align to the center. Now, this issue has been
fixed.
|
| Fig. 2.1 - Flight Selection Page progress in HTML & JS |
Fig. 2.2 - Screen recording of the Flight Selection Page
Payment Page
This page was not completed in the previous task, so I have now coded the
layout design and added interactive animations. The progress bar is linked
and uses the same type of animation as the previous page, built in After
Effects. I also added a fade-in transition, once the progress bar animation
is done, the other items will fade in sequentially. By clicking the PAY
button, the user will be navigated to the payment loading page.
|
| Fig. 3.1 - Working animation of the progress bar in AE |
|
| Fig. 3.2 - Payment Page progress in HTML |
Fig. 3.3 - Screen recording of the Payment Page
Payment Loading & Successful Page
Once the user clicks the Pay button, the payment loading page animation will
automatically appear for a few seconds, followed by the payment successful
icon. The animation was taken from online sources, and I modified it by
changing the color.
|
| Fig. 4.1 - Payment successful animation from Lottie Files |
|
| Fig. 4.2 - Payment Loading Page script |
Fig. 4.3 - Screen recording of the Payment Loading and Successful Page
Confirmation Page
Finally, on the confirmation page, an animation of a flight ticket being
printed out appears once the user successfully makes their payment. I also
added an interactive animated download button. When the user clicks it to
download the ticket, the button will display a loading animation. Once the
download is complete, the button design will change to "Open File."
|
| Fig. 5.1 - Confirmation page script |
Fig. 5.3 - Screen recording of the Confirmation Page
Publishing
Once all the page layouts have been coded, animated, and the buttons are all
clickable and linked to the appropriate pages, I will begin deploying the
app to Netlify.
|
| Fig. 6.1 - Deploy to Netlify |
FINAL SUBMISSION
*Recommend to view on iPhone 12 Pro (390 x 844)
Google Drive Link:
https://drive.google.com/drive/folders/12OQQ-LycDWNlY3Re0WgILDcshxsui_7R?usp=sharing
https://drive.google.com/drive/folders/12OQQ-LycDWNlY3Re0WgILDcshxsui_7R?usp=sharing
Presentation Video:
Fig. 7.1 - Final Project: Presentation Video of Batik Air App
REFLECTION
A big relief after finally completing the whole project! As I did not have a strong foundation in HTML, CSS, and JS, it was really hard for me to develop the outcome that I wanted. I had many interesting ideas for the layout and animation, but it was quite challenging to implement them, especially given the limited time I had for experimentation. To be honest, AI and online sources helped me a lot and sped up my progress. Creating animations using JS was particularly difficult for me, but I was able to get valuable suggestions from Chatgpt. Through this module, I learned the importance of good communication and understanding between frontend and backend development. It's crucial to determine whether a design is practical or just visually appealing. This experience has helped me build a foundation in understanding the basic structure of app development and prepared me for entering the industry.
.jpeg)
Comments
Post a Comment