Yong Xiao Tong / 0368290 Application Design 2 / Bachelor of Design
(Honours) in Creative Media
Task 3: Interactive Component Design & Development
Task 3: Interactive Component Design & Development
We will build upon the knowledge gained in Task 2 to create
micro-interactions and animated for our app. This will greatly elevate the
user experience of the app. The aim of this task is to explore and make
creative decisions on the type of interactions we would want to integrate
into our app.
Figma Prototype
Splash Screen
Still figuring out how to make the logo animate with a fade-in and fade-out
effect on the splash screen.
Home Page
The homepage starts with a location permission popup. The weather
forecast will only appear if permission is granted.
Weather Alerts & Warnings Page
The interface includes five section tabs, each designed to expand when
tapped for more details. However, the expansion animation is not working
as expected. Currently, tapping a tab causes a "blink" effect rather than
a smooth expand transition. I’m still working on the animation logic.
Locations Page
Working on adding the search function and the map.
Location preview screen
Radar & Satellite Page
Working on adding the map for both radar and satellite views.
Settings Page
Settings functionality include the toggle switch.
About Us Page
Already completed this page
What I haven’t done yet is create the navigation button. I’m still figuring
out how to make it work properly. This navigation button will be used across
all screens.
In Task 3, I had to fully rely on FlutterFlow. Personally, I found the
tool quite difficult to use at first. I watched multiple tutorials and
used AI tools to help me figure things out. Even something as basic as
setting a background to fit the entire screen took me weeks to
understand and implement properly.
Luckily, things started to improve as I kept trying. What I have left
to do now is the navigation button, which will be applied across all
screens. I will continue doing my best to become more familiar with
FlutterFlow. Honestly, I feel fortunate to have access to such a
low-code tool for building apps, even if the learning curve is steep
at first. I truly hope to complete this task to the best of my
ability, especially the final part.
23/09/2024 - 14/10/2024 (Week 1 - Week 4) Yong Xiao Tong / 0368290 Experiential Design / Bachelor of Design (Honours) in Creative Media Task 1: Trending Experience LIST Instructions Exercises • W eek 1 • W eek 2 • Week 3 • Week 4 Proposal Ideas Reflections INSTRUCTIONS WEEK 1 Task 1 Identify what type of XR experience is AR or MR? Describe why? I think XR experience is an AR experience because it shows digital information on top of the real world without interacting with real objects. XR includes MR, but it’s broader because it also covers AR and VR. So, XR is not the same as MR, but MR is a part of XR. Activity 1 launch google.com on phone browser, search for dinosaur or dog, cat, tiger. View in 3D/ View in AR (Life Size) ...
22/05/2025 - 08/06/2025 (Week 5 - Week 7) Yong Xiao Tong / 0368290 Game Development / Bachelor of Design (Honours) in Creative Media Task 2: Art Asset Development In this task, we need to create the art assets for our game. This includes designing characters, environments, items, props, obstacles, power-ups, and the HUD. Characters Our game features 4 characters: 1 protagonist and 3 unique enemies. Aura (Protagonist) idle walking jump boost Human patrol (Enemy) human patrol Dog (Enemy) idle attack Owl (Enemy) idle attack NPC Firefly firefly Effect boosting UI Elements buttons Props & Obstacles home grass direction signboard box ladder moon spike Backgrounds & Tileset For our game, we designed four unique levels, each with its own distinct background to reflect the environment and mood of the stage. Background design process in Adobe Illustrator The backgrounds are as follows: BG#1: City street scene, filled with urban elements and modern structure...
23/09/2024 - 14/10/2024 (Week 1 - Week 4) Yong Xiao Tong / 0368290 Application Design 1 / Bachelor of Design (Honours) in Creative Media Project 1: Mobile Application Proposal Instructions Project 1: Mobile Application Proposal For this project, we need to create a proposal documentation to redesign an existing app that we find unsatisfactory in terms of user experience or interface design. We have to find 3 app options first, and then decide on the final one from these three. The 3 app options I chose are: 1. myCuaca 2. Coinbase 3. Secret Recipe MY First Draft Proposal Slide (with 3 applications) First Application Proposal (3 apps) Before proceeding to the final proposal, I consulted with Mr. Zeon and received approval to choose myCuaca as my final app option. Final Proposed Idea Category: Weather Application: myCuaca The home screen is blank at first, so I thought this was the design. However, when I allow locati...
Comments
Post a Comment