Application Design II / TASK 3

Week 9 - Week 10

LI YANXI (0361436) 

Bachelor of Design In Creative Media 

APP II - Task 3

                                                                                                                                            

Task 3 -Interactive Component Design & Development Instructions：

Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.

The output of this task is a working animation element that is ready to be integrated into their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using HTML, CSS, and JavaScript, with the option to utilize an animation framework if necessary.

Interactive Components/Elements can be:

• Navigation Menu with interactive icons
• Side Menu interaction
• Pop-up boxes
• Call to action buttons
• Page/Screen transitions
• Etc. (Discuss with the module coordinator for further clarification.)

                                                                                                                                            

APP MVP FLOW：Login page - Register page - Home - Flight search - select seat - payment password - payment done 

Page to do：

• Loading page
• Login page
• Register page
• Home page
• Flight search page
• Search result page
• Seat selection page
• Payment password page
• Payment done page
• Profile page
• Profile - information page
• Profile - settings page
• Profile - support page

Flutter flow design progress

• Loading page

I added a macro-level animation to the loading page, so you can see the airplane flying continuously as the page loads. Additionally, each font on the page has a micro-level fade-in animation, which fades in during loading to display the loading page.

Macro animation：airplane splash screen

Micro animation：“AIRCHINA" fade in（ease in out 900ms）/ ”WELCOME" fade in（ease in out 600ms）

• Login page

• Login-register page

• Home page

• Flight search page

• Search result page

• Seat selection page

• Payment password page

• Payment done page

• Profile page

• Profile - information page

• Profile - settings page

• Profile - support page

                                                                                                                                            

Reflection

In this task, I learned in depth the processing steps of micro and macro animation. Through the instructor's video guidance and my own additional learning videos, I realized that creating a good app involves more than just static images; it requires dynamic animation for interaction—that's the essence of UI design. This experience has given me a deeper understanding of my profession and taught me valuable professional knowledge.