Application Design 2 - Task 3: Interactive Component Design & Development

 8/6/2025 - 7/7/2025 / Week 8 - Week 11
Cindy Clarissa Leslie / 0367677
Application Design 2 / Bachelor of Design (Hons) in Creative Media
Task 3: Interaction Component Design & Development

INSTRUCTIONS

 

Though the MIB states that students are required to create their prototype using HTML and CSS, this semester was handled differently, to which we had to quickly learn and adapt to using a new tool called FlutterFlow.


Task 3: Interactive Component Design & Development

Prototype Creation Process

Since we are using a new tool, I couldn't refer to the seniors work as to what I should do. Thankfully, I personally asked for clarification for this task, to which we had to focus on replicating our planned animation of our MVP in FlutterFlow. Since my MVP was image uploading as a social media app, I decided to focus on only building pages essential to it, I started with Onboarding, Login, Homescreen, Uploading and lastly User Profile.

To create animations outside of FlutterFlow's built in plugins, I had to rely on Lottie, to which I found out that I can fortunately use After Effects with as I have long experience of using the program.


Figure 1.1 Creating logo animation for onboarding on After Effects

I installed an extension/plug in created by Lottie for After Effects, using the plugin I could immediately export it into JSON and input it into FlutterFlow. Using this method, I created animations for logo animation, onboarding and uploading screen.


Onboarding

Figure 2.1 Onboarding prototype on FlutterFlow

I used the After Effects plugin to animate for logo and background of the onboarding screens. Furthermore, I added the Flickr text logo onto the header successfully which slides down on play.


Login/Sign Up


Figure 3.1 Login and sign up prototype on FlutterFlow

The macro animations to transition between pages were sliding in from the right. Most of the focus on animation goes to selecting interests, where users click on images and it actively showcases feedback by resizing, shows which interests users have selected. I attempted to create a border animation, however was struggling since it required coding, I was aware that it required using page variables, unfortunately the tool failed to recognize the string.


Home Page

Figure 3.1 Home Page prototype on FlutterFlow

Flickr logo text slides in from the top meanwhile the whole page slides in from the bottom as a macro animation, after the page slides in, the content of each tab slides in from the bottom after delay (fade + position animation). Switching tabs has micro animation where underline moves position, created by using TabBar Page. Furthermore, to allow scrolling, I used list view and inserted engagement buttons in each post.

Figure 3.2 Attempt on connecting firebase

I wanted to make the engagement buttons functional, which is why I attempted to code it and connect it into firebase. Eventually I used lottie to create a simulation of liking animation.


Uploading


 
Figure 4.1 Upload Pages prototype on FlutterFlow

Similar to the log in and sign up, macro was mostly on transitions, where the pages slide from the right. Additionally, there's micro-animation on the drop down menus, where users can actively choose which album they want to upload from and which ones they want to upload into. In the loading screen, I added in another looping animation I created myself from After Effects, using the logo as a load to keep branding consistent while also having a progress bar.


Profile Page



Figure 5.1 Profile Pages prototype on FlutterFlow

I had two pages depending on which one they transition from, if it's from uploading, a feedback icon will appear from the bottom before disappearing, confirming that the upload was successful. Macro animation from upload includes fade. Second was from navigation bar, to which there's only micro animation in colour and position. Profile page includes tabs similar to homepage and a drop down menu that slides from the right (drawer-end).

Figure 6.1 Current prototype flow on FlutterFlow

Figure 7.1 Adapting prototype to deskopt view

Right before the submission time, I was just informed by the lecturer where it needs to be published to web, which unfortunately changes the dimension. I wanted to keep the dimension of my prototype since I'm designing a mobile app. Thankfully I found a solution, which is to wrap all the content of each pages in stack and change the width back to mobile size. 


Final Task 3: Interactive Component Design & Development


REFLECTION

This task just mostly felt, very tedious and confusing to me. It was quiet frustrating since I wasn't familiar with the tools and its way of coding which is very limiting since I wanted my prototype to be functional in some way. However with the limited guides and knowledge I have of this tool I felt like the prototype didn't reach its potential. Again, I felt like I didn't have to beat myself much since I only had such a short time to adapt and there were no seniors that I can refer to. Hopefully, I can get to familiarize myself and it would be nice if I started liking this tool.

Comments

Post a Comment

Popular posts from this blog

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more

Experiential Design - Task 1: Trending Experience

Image
22/4/2025 - 29/5/2024 / Week 1 - Week 4 Cindy Clarissa Leslie / 0367677 Experiential Design / Bachelor of Design (Hons) in Creative Media Task 1: Trending Experience LECTURES Week 1: Lecture 1 Figure 1.1 AR playlist of past works by seniors During the first week, the lecturer mostly took time in class for introduction and providing us a playlist for giving us an idea on how getting into the module would look like. Each videos had a unique theme and concepts that have been tackled, whether it was educational, enterntainment, etc, each of the projects have utilized AR design for a certain function. This week overall, provided me ideas and inspired me to start brainstorming on what I should create for my project. Week 2: Lecture 2 User Mapping Empathy Map Tool used to articulate what we know about a particular type of user to: create a shared understanding aid in decision making Consider: what the user would say, think, do and feel Journey Map Mapping a journey or experience (task flow). ...
Read more