Labels

Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

23/09/2025 - 14/10/2025 / Week 1 - Week 4

Aquela Zefanya Soares / 0374377

Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

TABLE OF CONTENTS

LECTURES

In week 4, Mr. Shamsul taught us how to use Adobe Animate. To start, he explained the tools and how to use the app. After that, we were told to create a ball using shapes.

Fig 1.1 Ball exercise (14/10/2025)

After the ball practice, Mr. Shamsul gave us an exercise where we had to trace a boat in Adobe Animate. He reminded us to pay attention to detail when creating it. First, I traced and made the basic outline.

Fig 1.2 Boat exercise - basic outline (14/10/2025)

Second, I added details where the shadows were supposed to be, so it would be easier for me to color them later.

Fig 1.3 Boat exercise - detailed outline (14/10/2025)

Third, I pressed Ctrl + B to break every line apart so that I could start coloring the boat. Then, I added the base colors and shadows.

Fig 1.4 Boat exercise - base color + shadow (14/10/2025)

Here is the comparison between the original boat and mine.

Fig 1.5 Boat exercise - comparison (14/10/2025)

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1qg8pJCAsxm8aEWvJKnaWURJp0xOy-u2J/preview" width="640" height="480" allow="autoplay"></iframe>

TASK

For this task, Mr. Shamsul told us to make a Thematic Interactive Website proposal, with the following choices:

  1. A specific product from a particular brand launch/special (e.g., Nike’s new shoe, Sephora compact powder)
  2. A movie promotion
  3. A game release promotion
  4. A gallery/museum exhibit launch
  5. A band/artist’s latest release

Ideas

In this assignment, I have 5 project ideas in mind, arranged in increasing difficulty from the easiest to the hardest:

  1. The Water Cycle
  2. Exploring the Solar System
  3. Deftones’ (a band) New Album
  4. Game Character: Kratos from the God of War franchise
  5. F1 Driver: Max Verstappen

The moodboard details can be found below:

https://www.figma.com/board/DyXR2mhyZWMzIoDiKwohda/Ad-Interactive-ideas?node-id=0-1&t=5kyJvDEpU67G1PJq-1

Fig 1.1 Ideas. moodboard, and visual references (29/09/2025)

My favorite ideas are the second and the third, but I think the fourth and the fifth will be the most challenging. After consulting, Mr. Shamsul selected the first and fifth ideas. Then, I discussed with my friends and decided to go with the fifth idea and start working on the wireframe. 

Fig 1.2 Old wireframe (06/10/2025)

In Week 3, I consulted Mr. Shamsul again about my wireframe. He said that the idea and wireframe were fine, but I lacked visual direction. Currently, there is no clear connection between my theme and visual aesthetic, so I need to do more research to make them more cohesive.

I decided to make the website about the role of a race engineer or data analyst in F1. While researching ways to connect this idea with an F1 driver, I came across Max Verstappen’s interaction with his engineer, GP, during sim racing. I was inspired by this and decided to make my website a roleplay experience where users become the race engineer accompanying the driver, Max. Through this concept, I can introduce Max’s biography and present it as part of his racing history, letting users learn about his background while staying in "race mode". Basically, users explore his story as if they were viewing his real-time racing data. To match this new idea, I created a new wireframe that still incorporates some elements from my previous concept.

Fig 1.3 Refined wireframe (12/10/2025)

With the new wireframe, I created a user flow diagram (flowchart) to show how the website works.

Fig 1.4 Flowchart / user flow diagram (13/10/2025)

Link: https://www.canva.com/design/DAG1msFORpw/Hfz09awryLghbM1YKW2IAw/view?utm_content=DAG1msFORpw&utm_campaign=designshare&utm_medium=embeds&utm_source=link 
Fig 1.5 Thematic Interactive Website Proposal (12/10/2025)

FEEDBACK

Week 1

General Feedback: This week, Mr. Shamsul briefed us about the module and gave us seniors' work as a reference.

Week 2

Specific Feedback: Mr. Shamsul said that my first and last ideas look promising, and I can proceed by choosing one of them.

Week 3

Specific Feedback: Mr. Shamsul accepted my idea and wireframe, but he said I lack visual direction, so I need to do more research to develop a more cohesive visual aesthetic and theme.

REFLECTION

In this task, I learned that searching for ideas for a thematic website is not easy. I kept overthinking that my ideas might be too hard for me to create, and I didn’t want to feel burdened by my own idea later. I had a lot of ideas that I scrapped because of that. However, the process of making the proposal was fun because I had the opportunity to show my interests, and I felt like I could work better since it was something I liked.

Labels:

Comments

Post a Comment

Popular Posts