ADVANCED INTERACTIVE DESIGN - TASK 1 Thematic Interactive Website Proposal
ADVANCED INTERACTIVE DESIGN - TASK 1
Week 1
This week Mr. Shamsul began the lesson by introducing the module and talking about what we would study during the semester. He explained the objectives and structure of the course assessment. To complete the first task, we were asked to propose 5 or 4 initial ideas or topics, from which we will later choose one to develop in our main project. He also reminded us to install Adobe Animate for future practice sessions.
Week 2
During this week, we had to share our ideas with Mr. Shamsul to get feedback. However, due to too many students waiting, I was unable to discuss my ideas during the lesson. He told us that it would be nice to send our ideas through Microsoft Teams, so I sent mine there. He noted that my first and second ideas were the most interesting, which helped me decide in which direction to move on.
Week 3
In the third week, Mr. Shamsul demonstrated how to use Adobe Animate and introduced us to its main tools and functions. We practiced how to use the program and illustrated a beach ball to understand how everything works. Later, we started working on another exercise, ship animation, in which we learned how to separate lines and use keyboard shortcuts using the Line tool for smoother animations.
 |
| Figure 2.1 Beach ball (08/10/2025) |
Week 4
This week, we started creating simple animations to practice what we had learned so far. Before the practical session, Mr. Shamsul showed us several video examples demonstrating how proper animation should look and move. After that, we began working on short exercises, including a line animation that moved like a guitar string, a bouncing ball, and a shape transformation where a square smoothly changes into a circle. Through these exercises, I started to understand Adobe Animate more clearly and became more comfortable using its tools and timeline features.
Function+f5 : To add frames
Shift+function+ f5: Remove frames
 |
| Figure 2.2 Bouncing ball (15/10/2025) |
 |
| Figure 2.3 The square that changes (15/10/2025) |
Final class work
 |
| Figure 2.4 final class work (15/10/2025) |
 |
| Figure 2.5 final class work (15/10/2025) |
 |
| Figure 2.6 final class work (15/10/2025) |
I also tried to do it with numbers.
 |
| Figure 2.7 final class work (15/10/2025) |
Description
The project focuses on creating a Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website centers around a specific concept and integrates interactive elements to engage users. Such websites often include multimedia features like videos, animations, interactive graphics, and clickable components to create a dynamic experience.
These sites can explore various themes — educational, cultural, promotional, or product-based. For example, a museum website may offer interactive virtual tours or games, while a movie website might let users explore the film’s universe. The main goal is to keep users actively engaged through interactive exploration.
- Strong Visual Potential – The concept allows the use of vibrant colors, animations, and transitions that reflect Ariana Grande’s unique aesthetic and stage presence.
Interactive Experience – The website can include engaging elements such as music previews, tour ticket booking, and interactive motion effects that attract fans.
Brand Connection – The project connects with a real-world celebrity brand, which helps explore how visual design and interactivity can enhance fan engagement.
Creative Freedom – The theme provides space for experimentation with layout, typography, and animation inspired by Ariana’s different music eras.
Audience Appeal – Since Ariana Grande has a global fanbase, the website can be designed to attract a wide audience through dynamic and emotional visual storytelling.
Target Audience
Age Group: 13–30 years old
The concept and content of this website are designed for:
Fans: Ariana Grande supporters who want to stay updated on her upcoming tour dates, music, and announcements.
Music Lovers: Users interested in pop music, concerts, and interactive digital experiences related to artists.
Design Enthusiasts: People who enjoy exploring visually engaging and well-designed websites inspired by celebrity branding.
General Audience: Anyone curious about creative digital campaigns that combine entertainment, fashion, and technology.
Moodboard
The visual design of this project is inspired by Ariana Grande’s tour aesthetics, which often combine elegance, femininity, and modern pop energy. The overall mood focuses on a glamorous yet minimal style with soft pastel tones and dynamic motion effects.
The moodboard includes the following visual elements:
Color Palette: Shades of pink, lilac, beige, and black — representing both her soft and powerful sides.
Typography: Elegant sans-serif and cursive fonts that reflect her signature feminine yet confident image.
Imagery: Concert photos, stage lighting, sparkles, and celestial motifs to capture the atmosphere of her live performances.
Visual Motifs: Light flares, gradients, and glowing effects that convey movement, sound, and rhythm.
- Overall Feel: Stylish, modern, and immersive — designed to emotionally connect fans with the tour’s visual identity.
 |
| Figure 3.2 Moodboard (30/09/2025) |
Color Palette
The color palette is inspired by Ariana Grande’s tour visuals and her signature aesthetic — a mix of soft elegance and modern pop energy.
It mainly includes:
Pastel pinks and lilacs – to express femininity, warmth, and softness.
Beige and white tones – to create balance and highlight minimalism.
- Black and deep violet – to add contrast and reflect confidence and sophistication.This combination helps establish a dreamy yet stylish visual mood that resonates with Ariana’s brand identity.
 |
| Figure 3.3 Color Palette (02/10/2025) |
Typography
The typography style blends modern and elegant fonts to match the overall tone of the design.
Heading font: A bold sans-serif typeface that gives a clean and contemporary look.
- Body font: A smooth rounded sans-serif or cursive font to reflect femininity and artistic flair.This pairing enhances readability while maintaining a sense of personality and glamour consistent with Ariana Grande’s visual style.
 |
| Figure 3.4 Typography (03/10/2025) |
Visual References
The visual references were selected to guide the overall look and feel of the website. They include official Ariana Grande tour visuals, music video aesthetics, and modern pop-inspired web designs. These references help to capture her signature style — elegant, dreamy, and powerful — while keeping the website visually engaging and cohesive.
The main visual inspirations are:
Ariana Grande’s tour posters and album covers, such as Sweetener, Positions, and Dangerous Woman, which feature soft lighting, pastel colors, and glamorous portrait photography.
Website layouts from official artist pages and music event sites that use motion effects, gradients, and layered visuals to create depth and interactivity.
Fashion and beauty campaign designs that emphasize minimal compositions with strong visual focus on the artist.
Stage lighting and concert visuals, which inspire the use of glow effects, shadows, and dynamic gradients throughout the interface.
These references collectively inform the design direction, ensuring that the website reflects Ariana Grande’s brand identity and provides an immersive, interactive fan experience.
 |
| Figure 3.5 Visual References (02/10/2025) |
 |
| Figure 3.6 user flow chart (02/10/2025) |
Final Outcome Task 1: Thematic Interactive Website Proposal
FEEDBACK
REFLECTIONS
Experience
Working on Task 1: Thematic Interactive Website Proposal was an insightful experience that allowed me to explore the process of planning and conceptualizing an interactive web project. Through the brainstorming and feedback sessions with Mr. Shamsul, I learned how to transform an abstract idea into a structured design concept. Creating the proposal for Ariana Grande’s upcoming tour helped me understand how visual style, user interaction, and brand identity can work together to create an engaging online experience. I also improved my ability to analyze design direction, choose appropriate color palettes and typography, and build a clear concept through moodboards and references.
Observations
During the research and analysis stage, I observed several key design challenges in existing thematic or entertainment-related websites:
The current sites often have overwhelming layouts with too many visual elements on key pages such as the homepage and category sections.
Navigation systems tend to feel outdated or inconsistent, particularly on mobile devices, which reduces usability.
Typography and visual hierarchy are sometimes weak, making it difficult for users to focus on essential content or calls to action.
These observations guided me to think more critically about how my own design could be cleaner, more intuitive, and visually balanced.
Findings
From this task, I discovered that successful interactive websites rely on a combination of clarity, consistency, and emotional engagement. Simplicity in design helps maintain user focus, while interactive elements—such as motion, sound, and dynamic visuals—can enhance the overall experience when used purposefully. I also found that designing around a strong theme, like a music tour, allows for creative expression while keeping the user connected to the brand’s story. This task strengthened my understanding of how thoughtful design planning can lead to a more meaningful and engaging user experience.
.gif)
Comments
Post a Comment