Task 3: Interactive Component Design & Development
Requirement
"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 are ready to be integrated in 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 use of animation framework if necessary."
Fig. 2.1 Onboarding page with slide-in/slide-out transition, step navigation, and swipe to change pages
3. Homepage (Card Carousel & Navigation Bar)
Fig. 3.0 The Movie Carousel can autoplay, swipe to change, or switch images by clicking the dots.
I used an SVG to place the home icon, but I don’t understand why the arc-shaped hollow in the middle, which should be there, isn’t showing up (Fig. 3.1). So, I switched to a PNG instead (Fig. 3.2).
Fig. 3.1 Bottom Navigation Bar (Home icon have problem)
Fig. 3.2 Bottom Navigation Bar
4. Step Indicator Animation
Fig. 4.0 Step Indicator Animation
5. Seat Selection Page
Fig. 5.0 The Seat Selection Page has a slide-in transition, allowing seat selection with unavailable seats disabled.
6. Adding Items Animation
Fig. 6.0 Adding Items Animation
Final Presentation
Fig. 7.0 Final Presentation Video
FEEDBACK
-
REFLECTION
This task made me feel like I was back coding with Adobe Dreamweaver—it’s still just as hard. Most of the code was actually written with help from AI, and I really have to thank ChatGPT and Claude AI for that. They’ve been super helpful. But even though AI is great, there are always problems, like sizes being off or animations not looking right. It can be really frustrating. Without AI, I don’t think I could have finished this task.
For this task, we only had to make six components, but even just those six have been a headache. I can’t imagine how hard it must be to build a full app. Now, every time I use an app on my phone, I really admire the developers—it’s such a tough job, especially making sure the app works well on different devices. I just hope I can finish my final project smoothly!
.gif)
.gif)
Comments
Post a Comment