Application Design 2 || Task 3 : Interactive Component Design & Development
10.06.2025 - 06.07.2025 || Week 07 - Week 11
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Task 3: Interactive Component Design & Development
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Task 3: Interactive Component Design & Development
Lists
1. Instructions
2. Feedbacks
3. Reflections
Instructions
Task:
- 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
Submission:
1. Share the published web adresss (url)2. add razif.mohamed@taylors.edu.my as collaborator (editor or manager)
3. direct URL to this project blog post page.
4. Presentation/Walktrough video.
Process
After getting the idea and try the animation from Figma, I try convert the same things from Figma to Flutter Flow. But after I have try some demo I find it that is not easy than I think, because Flutter Flow have so many limitation and mostly I have so many problem to due with Firebase. I try not to use firebase to done the project but after consult with Mr. Razif, he suggest me to use the firebase and tell me to use the payment model as the last plan. So I need to give up my old one Flutter Flow which is build by code and UI inside only and remake a new Flutter flow for my Car Rental App with Firebase.
For the Feature here will be different from the final product, because this is my beta testing for animation can work on FlutterFlow or not, and for the whole project here I didn't apply firebase.
Design Direction
Color
For my design in Flutter Flow, I am using the same color palette which is #00B2FF as the main Primary color which is also same color like the logo and also its color theme for Socar App.
Fig1.1, Color Palette
Typography
Fig1.2, Typography
Login and Sign up animation
After every things i need, I Start working on animation on Flutter flow. For the first, will be login and sign Up page. By not using firebase, i create one base on Widget of Flutter flow.
Fig 1.3, video Sign in and Sign out Page
Splash Screen and main page animation
After that, I try out animation for the splash screen which is doing ease in and out. I apply few page first and try out the animation slide right and slide left. The one which show very obvious is the profile page because the animation is not like other all section stick together.
Fig 1.4, video through how the splash screen & normal page between
Main MVP flow: How to Book a Car
Then I working on the MVP flow which is booking a car in the app. which going with:
- Choose a car
- Check Detail
- Renting Price
- Payment
- Pop up for success animation
Fig 1.5, Video through MVP flow (Book a car)
Extra Feature: Dark mode
After having all the animation I need, I did try out some special function which like app state and Boolean. It allow me using simple way to add dark mode and light mode.
Fig 1.5, App state and Boolean
Fig 1.6, video through Apply dark mode for the app
Feedbacks
Week 10: The overall animation is good , the more impressive point will be adding the dark mode and light mode and can continue to final to done it. But you need to add firebase to use in Acc page or storage for the Image. Or not It will look like Figma page all lead to the Same page and most of the item is fixed, so with more flexible you need to use FirebaseWorking on my SOCAR-inspired app in FlutterFlow has been a new but exciting step in understanding how animation brings digital products to life. Unlike static design tools, FlutterFlow gave me the same feeling like Figma to see how screens feel in motion, not just how they look. But for my main experience I feel like making app in Flutterflow more feel like making an app, we having firebase or code to make a code and publish to net and look like a real app.
I started by experimenting with basic transitions like fade-in, slide-in, and movement triggers. Using FlutterFlow’s built-in animation options, I tried applying entrance effects to my splash screen and homepage ads. I realized that even simple animations—like a car image gently sliding into view or a button expanding—can make an interface feel smoother and more intentional. It helped me think more clearly about user focus and how to guide their attention from one step to the next.
Designing animations in FlutterFlow wasn’t always easy. I sometimes struggled to control the timing and direction properly, especially when stacking multiple effects. But through trial and error, and watching tutorials from the youtube or following lecturer video for guide, I slowly gained more control. One feature I really liked was being able to create control button dark mode and light mode, which which having pre-set and just need to create button to apply it.
Using FlutterFlow taught me that building interactions is just as important as building screens. It made me more confident in adding energy and purpose to my UI, and it motivated me to keep learning how to turn static layouts into responsive, interactive experiences.
I started by experimenting with basic transitions like fade-in, slide-in, and movement triggers. Using FlutterFlow’s built-in animation options, I tried applying entrance effects to my splash screen and homepage ads. I realized that even simple animations—like a car image gently sliding into view or a button expanding—can make an interface feel smoother and more intentional. It helped me think more clearly about user focus and how to guide their attention from one step to the next.
Designing animations in FlutterFlow wasn’t always easy. I sometimes struggled to control the timing and direction properly, especially when stacking multiple effects. But through trial and error, and watching tutorials from the youtube or following lecturer video for guide, I slowly gained more control. One feature I really liked was being able to create control button dark mode and light mode, which which having pre-set and just need to create button to apply it.
Using FlutterFlow taught me that building interactions is just as important as building screens. It made me more confident in adding energy and purpose to my UI, and it motivated me to keep learning how to turn static layouts into responsive, interactive experiences.
Comments
Post a Comment