Application Design II / Task 2

WEEK8-WEEK11

NAME: JIN RONG

I.D: 0361701

COURSE: Application Design II  / Bachelor of Design (Honors) in Creative Media

Application Design II / Task 2

---

INSTRUCTION

---

LECTURES

Week 5: Microanimation and Motion Principles in User Experience

This week, we first encountered the concept of "microanimation" and its practical role in user experience (UX). Mr. Razif explained the importance of animation in interface design, especially in providing visual feedback, guiding user operations, and enhancing the overall sense of interaction.

He also mentioned that the FlutterFlow platform supports the import of animation elements, allowing us to more easily integrate motion effects into the design without complex coding. To further deepen our understanding, he recommended the motion design series of videos presented by Val Head and released on the Adobe Creative Cloud YouTube channel, which introduced the basic principles and application methods of UX animation.

Week 6: FlutterFlow login system construction practice

In the sixth week of the course, we learned how to create a complete login system in FlutterFlow. The process starts with user registration, and after completion, the main interface of the application (such as the control panel, etc.) can be accessed through the login interface.

We use a low-code approach, and most operations can be completed through the visual interface, and only when special needs need to be manually written logic code. After completing the basic design, we also conducted functional testing to ensure that the user flow from registration to login was smooth and error-free.

Login process interaction design description

1. Login page (Sign in to your account)

Macro interaction (page level / dynamic switching):

When opening the App, fade from the startup page to the login page

After successful login, the login page fades out or slides out to the left, and the main page slides in from the right, indicating interface switching.

2. Reset password page (Reset your password)

Macro interaction:

Click "Forgot password" from the login page, the page fades out → the new page slides in from the bottom or gradually enters.

Micro interaction:

When clicking the input box, the border is highlighted and the virtual keyboard pops up.

Click "Reset Password" without entering the email address:

Enter the email address correctly → the page transitions to the "Check your email" page.

3. Check the email prompt page (Check your email)

Macro interaction:

The page fades in, showing a large icon + prompt text.

After clicking the button, the page fades out and returns to the login page or goes to the next step.

4. Enter new password page (Enter new password)

Macro interaction:

The page fades in after "Check your email", and the overall vertical scrolling structure.

Micro interaction:

Click the icon → switch between plain text/cipher text + icon changes.

When the passwords are inconsistent:

The two fields are red.

The fields vibrate slightly.

When the two passwords are consistent → the "Reset Password" button turns blue, allowing submission.

After clicking the button, the page switches to the success page.

5. Success page (Password reset successful)

Macro interaction:

The page fades in and is displayed as a successful feedback page, prompting the completion of the operation.

Micro interaction:

The icon is slightly enlarged + fade-in animation.

There is zoom feedback after clicking the button → Return to the login page.

6. Create account page (Create your account)

Macro interaction:

Click "Create Account" from the "Sign in" page, and the page fades in.

Micro interaction:

Click the button → The page switches to the registration success page or the next step