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

-

12/06/2025 - 03/07/2025  / Week 8 - Week 11

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Application Design 2 

JUMPLINK:

  1. Lecture
  2. Instruction
  3. Task 3: Interactive Component Design & Development
    • Topic
    • Progress
    • Final Submission
  4. Feedback
  5. Reflection

1. LECTURE


2. INSTRUCTION


3. TASK 3: INTERACTIVE COMPONENT DESIGN & DEVELOPMENT

Description
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. Interactive Components/Elements can be:
  • 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)
Refer to example past students’ blogs for more details.


Requirements
1. Interactive components/elements created with HTML/CSS and JavaScript.

Submission
1. Project Files & Video Walkthrough
2. A single HTML file that includes all components, along with external CSS and JavaScript files as needed.
3. Online posts in your E-portfolio as your reflective studies


1. Design

I tried to make the dashboard match my original Figma design, but it was definitely a challenge. In FlutterFlow, you have to use columns and rows to structure everything, and I still don’t fully understand the logic behind how they work yet. So it took me a while just to get the layout somewhat close. It was especially hard because my design includes a lot of scrollable sections within a single page, and getting all of them to work properly without breaking the layout wasn’t easy at all.

I also managed to download and apply the same font I used in Figma into FlutterFlow, which made me happy because at least the text now looks consistent with my original design. That small detail helped everything feel more connected.

Fig 3.1 DashBoard Page Design Week 11 3/07/2025

For the login and sign-in pages, I kept the design simple. I used a red gradient background at first—mainly just to test if gradients would work in FlutterFlow and also as a temporary placeholder so it didn’t look plain. In my Figma file, I used a lower opacity on the gradient, but I wasn’t sure how to replicate that here yet. Still, I wanted to make sure there was at least some color and personality in the login screens.

Fig 3.2 Log In Page Design Week 11 3/07/2025

Fig 3.3 Sign Up Page Design Week 11 3/07/2025

P.S. – During this time, I honestly wasn’t doing too well mentally. It was a rough period, and that made it hard for me to stay focused or get as much done as I wanted to. I did manage to get it to publish, tho.


4. Feedback

Week 4: 

Specific Feedback:

  • Make the information simpler.

5. Reflection

1. Experience 

Trying to match my dashboard to the Figma design was challenging, especially since I’m still learning how columns and rows work in FlutterFlow. The scrollable sections made things even trickier. I also wasn’t doing well mentally during this time, so progress was slow, but I still managed to publish the app.

2. Observation

FlutterFlow’s layout system is not as flexible as Figma, especially when it comes to scroll areas and visual effects like gradient opacity. Even simple designs can be hard to recreate exactly.

3. Findings

I learned that layout logic is really important in FlutterFlow. Small wins, like matching fonts, make a difference. Even if things don’t go perfectly, pushing through and getting it done still matters.

Comments

Post a Comment

Popular posts from this blog

Information Design - Exercise 1&2

-
Image
03/02/2025 - 11/03/2025  / Week 1 - Week 5 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Information Design  JUMPLINK: Lecture Instruction Exercises Exercise 1: Quantifiable information Exercise 2: L.A.T.C.H infographic poster Feedback Reflection 1. LECTURE Week 1: Types of Infographics Infographics help people understand information faster by using visuals and text together. They make information clearer, more interesting, and easier to remember. There are different types of infographics, each with its own purpose: List Infographics – Organize information in a list format with pictures or icons, making it more visually appealing and easier to scan. Fig 1.1 List Infographics, Week 1 (04/02/2025) Statistical Infographics – Use charts, graphs, and numbers to present data in a way that is easy to understand at a glance. Fig 1.2 Statistical Infographics , Week 1 (04/02/2025) How-to Infographics – Show step-by-step guides using...
Read more

Advanced Interactive Design - Final Project

-
Image
19.11.2024 - 24.12.2024   / week 9 - week 14 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Instruction Task 3 - Completed Thematic Interactive Website   Progress Final Submission Feedback Reflection 1. LECTURE 2. INSTRUCTION 3. Task 3 - Completed Thematic Interactive Website 1. Progress Loading screen This one is not too hard. I did have to change the middle white circle to the bottom so the anchor is on the bottom, allowing me to change the shape up and down, while the bottom bar stays in place. Then, it just took spacing in different keyframes and adding a shape tween for it. I also added the fade-in and fade-out for them. Fig 1.1  Loading Screen Animation , Week 13 (17/12/2024) Fig 1.2  Loading Screen Fade Out , Week 13 (17/12/2024) Video The beginning process of the web was, of course, putting the video in first and following the tutorial on YouTube, which worked just fi...
Read more

Advanced Interactive Design - Task 2

-
Image
22.9.2024 - 12.11.2024   / week 5 - week 8 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Week 5  Week 6 Week 7 Week 9 Instruction Task 2 -  Interaction Design Planning and Prototype   Research Progress Finalizing Layout Planning Interactions Animating Final Submission Feedback Reflection 1. LECTURE Week 5-6 - F2F  (22-29 Oct, 2024) 1.  Button Animation Fig 1.1  Button Animation Progress , Week 5 (22/10/2024) Fig 1.2  Button Animation Result , Week 5 (22/10/2024) Week 7 - F2F  (5 Nov, 2024) 1.  Screen and Button Animation Fig 1.3 Screen and  Button Animation Progres , Week 7 (5/11/2024) Fig 1.4 Screen and  Button Animation Result , Week 7 (5/11/2024) Week 9 - F2F  (19 Nov, 2024) 1.  Transition Animation Fig 1.5 Transition  Animation Progress , Week 9 (19/11/2024) Fig 1.6  Transition  Animation Result , Week 9 (1...
Read more