ADVANCED INTERACTIVE DESIGN/TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL
22/04/2025 - 13/05/2025 / Week 1 - Week 4
Marsya Arisa Binti Mahmud / 0359684
Advanced Interactive Design/ Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Thematic Interactive Website Proposal
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/15RtAXVV0YGqVkjX9JhpHtlbuEgrzH9Fi/preview" width="640" height="480" allow="autoplay"></iframe>
EXERCISES
Week 2 - 29/04/2025
Our first exercise on Adobe Animate is to practice drawing, we were given a picture to trace out by Mr. Shahmsul to get the hang of using the tools available.
Figure 1.1: Drawing Practice of Boat
Week 3 - 06/05/2025
For our exercise in week 3, I created an animated countdown. This taught me the 'shape tween' tool and the project timeline helps create smooth transitions, and that timing is crucial when animating.
Figure 1.2: Shape Tween & Timeline Practice
Week 4 - 13/05/2025
For week 4 I drew a beach ball using the skills I learned from week 2, then we were taught to convert them into graphics to gain more control over the ball's movement. We added animation guides and rotations to understand the effects that come into a smoother and aesthetically pleasing visual.
Figure 1.3: Graphics & Transitions
TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL
Ideas
During the initial proposal stage, I brainstormed three ideas to present to Mr. Shahmsul. My first idea was to create an interactive website for my band, AVA, as we currently rely on a static PDF profile for event outreach. I saw the potential to transform this into a more engaging platform that could showcase our identity, music, and journey in a dynamic and visually compelling way. My second idea involved designing a website for a video game that currently only has a wiki page, with the goal of creating a more immersive and interactive experience for players. Lastly, I considered developing a website for a local makeup brand called Gleami. While Gleami already has an official site focused on online shopping, my concept aimed to dive deeper into their product collections by highlighting the uniqueness of their ingredients, shade ranges, and benefits to create a more informative and brand-focused user experience.
Figure 2.1: Ideas
Interactive Band Profile for AVA
I consider our existing and potential listeners indie music fans who are visually driven. They appreciate storytelling and personality. This meant the website needed to feel immersive, intuitive, and authentic.
Inspiration & Concept
The central concept became “a digital stage” that reflects the band’s mood which is dreamy, emotional, and raw through motion, layout, and visual elements. I took cues from websites like Navigate by Resn (for transitions and animation flow) and Yomoyo Okada’s portfolio (for clarity). I also explored sample band website from https://bandzoogle.com/sample-band-sites
Navigate by Resn (visit full website here)
Figure 2.2: Navigate by Resn
Yomoyo Okada’s portfolio (visit full website here)
Figure 2.3: Yomoyo Okada’s portfolio
Mood Board
The design decisions were guided by tone and usability:
- Dark theme: For an immersive concert vibe.
- Gradients and soft flares: To imply emotion and energy.
- Clean layout and negative space: To let animations breathe and focus attention.
Figure 2.4: Overall website aesthetic
Typography & Color Palette
For typography, I used Satoshi and Inter to create a balance between personality and legibility. These fonts will be used throughout the website in different types to establish hierarchy and presence.
The color palette was chosen to reflect AVA’s dreamy, emotional, and slightly moody aesthetic. The dark background creates a cinematic, stage feel. Gradients and accent colors are used to add vibrancy and emotional depth. Light flares, soft gradient overlays, and subtle transitions helps create a digital atmosphere that mirrors the mood of the band’s music.
Figure 2.4: Fonts and Colors
Structure
I mapped out the structure by breaking down what listeners and press might want:
- Who we are (about, meet the band)
- Our story (our journey timeline)
- Our music (releases and upcoming releases)
- Our show (upcoming Shows)
- How to reach us (socials & contact)
Each section would serve a specific user intent while keeping the experience cohesive and interactive.
Figure 2.5: Flow Chart
Wireframe Refinement
During the wireframe process, I made a few alterations that I feel would enhance the website:
- Navigation Bar: A navigation section that aligns better with an interactive website
- Meet the Band Page: Enhance picture layout to avoid a static website look, increase room for animation
- Contact: Include a contact page instead of a hover text over the button
- Shows Page: Include pictures instead of displaying as a list to increase interactivity
FINAL THEMATIC INTERACTIVE WEBSITE PROPOSAL
<iframe src="https://drive.google.com/file/d/1x0_AzwA_M5JvKvxczyB0Yi3R5Wm8P1GS/preview" width="640" height="480" allow="autoplay"></iframe>
FEEDBACK
Week 2 - 29/04/2025
Go with idea #1 or #3, provide a list of pages and content for the idea you chose.
Week 4 - 13/05/3035
Add a direction, a reason to why this topic was chosen. For references, include website examples to better understand the interactive elements of building a website.
REFLECTION
Working on this project allowed me to merge my personal connection to AVA with my creative design practice. As both a band member and a designer, I had the unique opportunity to craft a digital presence that genuinely reflected our tone, story, and energy. It was an enriching experience to build something so close to me while applying the skills I’ve developed throughout my course. I found that integrating storytelling, interactive elements, and a strong visual identity significantly enhances user engagement and conveyed the band's personality more effectively than static formats. Throughout the process, I observed how intentional design decisions such as typography, color use, and transitions can shape the emotional tone of a website and influence how users navigate and connect with content.
