Advanced Interactive Design | Task 3

17/6/2025 - 27/7/2025 / Week 9 - Week 14

Kerly Ooi / 0358726

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

Task 3 | Completed Thematic Interactive Website 

TUTORIAL / PRACTICAL



Fig 1.1 W10 class exercise 



Fig 1.2 W10 class exercise 


INSTRUCTIONS 


Final Project - Completed Thematic Interactive Website 

In Task 3, we are required to synthesize the insights gained from Tasks 1 and 2 and apply them to develop a cohesive set of visual assets. This includes refining our prototype into a fully functional and complete product experience, consisting of at least 5 working pages.

TASKS

Adobe Illustrator 

To begin the design process, I used Adobe Illustrator to create the visual elements and interface illustrations for my website, as I’m most comfortable with the software. I created the components, particularly the buttons, to reflect the high-tech, performance-driven style of the Mercedes-AMG Formula 1 brand.

I also aimed to create a futuristic vibe, using sharp angles, bold lines, and vibrant cyan accents to reflect the precision, innovation, and speed of the F1 world. These stylistic choices were made to ensure a cohesive and immersive brand experience throughout the interface.


Fig 2.1 Progresses on Adobe Illustrator 


For this project, I designed the website layout based on a 1920px by 1080px resolution.


Loading page


Home 

The homepage features a clickable “Explore Now” button with a hover effect that adds interactivity. When clicked, it leads users to the menu page, serving as the starting point of the website experience.


Fig 2.2 Home 


Fig 2.3 "Explore Now" button


Menu Bar

The menu bar features interactive navigation buttons with a hover effect. When hovered over, the button background turns cyan and the text changes to black, providing clear visual feedback and matching the sleek, high-tech aesthetic of the F1 Mercedes-AMG website.


Fig 2.4 Menu bar page


Team/ Drivers

The Team/Drivers page showcases the two current Mercedes-AMG F1 drivers (Geroge Russell & Kimi Antonelli) with clickable portraits. When hovered over, each card reveals the driver’s name and number, adding a subtle interactive effect. 


Fig 2.5 Team & Drivers


Clicking on either portrait transitions to a dedicated profile section that displays the driver's biography and career stats. This interactive layout provides an engaging way for users to explore each driver's role and achievements within the team.


Fig 2.6 George Russell


Circuits

The Circuits page showcases 6 race tracks, each represented by a stylized outline and clickable title. When hovering over a circuit, the circuits map pop up slightly, adding a subtle motion effect that enhances interactivity and draws user attention.  


Fig 2.7 Circuits


Clicking on a circuit will also leads to a carousel-style preview with full images and descriptions. Users can navigate through the circuits using arrow buttons, creating an engaging and smooth browsing experience.


Fig 2.8 Image Carousel (circuits)


The Power Duo 

The Power Duo page emphasises the long-standing relationship between Mercedes-AMG Petronas and Petronas. It has three interactive buttons, Partnership, Role in the Race, and Sustainability Performance, each with a hover effect that enhances user engagement.

Clicking on any of the three buttons will navigate you to the respective section, offering detailed insights into Petronas’ achievements and its continued influence in the world of Formula 1.


Fig 2.9 The Power Duo (Mercedes F1 x Petronas)


Highlights & Gear
(This section is divided in two parts)

Gallery Highlights presents a grid of dynamic F1 moments, including race celebrations, behind-the-scenes shots, and team highlights. Each image features a hover effect, when hovered over, the image transitions to a different photo, creating a lively and engaging user experience. 


Fig 2.10 Gallery


Merchandise features the Co-branded Summer Merch (Miami 2025) collection in a three-column layout. On hover, each product reveals its name and price.


Fig 2.11 Merchandises


Contact Us (Subscribe page)

The Contact page features a clean and interactive email subscription section where users can enter their email to stay updated with the latest team news. 


Fig 2.12 Contact/ Subscribe Us


After clicking the “Join Us” button, a confirmation pop-up appears upon successful submission. Below, clickable social media icons link directly to the team’s official X, Instagram, TikTok, Facebook, and YouTube pages, encouraging visitors to stay connected across platforms. This section not only encourages engagement but also maintains the site’s futuristic and minimal aesthetic.



Fig 2.13 Join Us button

SUBMISSION 

Link to 'F1 Mercedes' website : https://f1mercedes-kerlyooi.netlify.app/

(Please wait a moment while the page loads, thank you for your patience!)

REFLECTIONS

Over the past 14 weeks, my journey through the Advanced Interactive Design module has been both challenging and highly rewarding. One of the most enjoyable aspects was developing an interactive website centered on Formula 1, with a focus on the Mercedes-AMG Petronas team, a topic I’m genuinely passionate about. This project allowed me to showcase key circuit highlights, driver information, and supporting content through a clean, futuristic layout designed in Adobe Illustrator and animated using Adobe Animate.

As someone entirely new to Adobe Animate at the start of this module, I found the in-class exercises especially helpful in building my understanding of the software. While the process was often complex, especially when combining code with animated elements like interactive buttons. I found it exciting to watch each part of the project come together. 

Creating a functioning and engaging website taught me the value of design consistency, attention to detail, and the knowledge of technology required to bring interactive experiences to life. It also made me understand how animation and interaction improve user engagement. 

This module has significantly strengthened both my technical and creative skills while boosting my confidence in tackling digital design challenges. Although I still see areas for improvement, particularly in coding and maintaining consistency, this experience has been fun, meaningful, and motivating. It has inspired me to continue learning and growing, and I look forward to applying these skills in future projects.

Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design | Task 1

Image
22/4/2025 - 13/5/2025 / Week 1 - Week 4 Kerly Ooi / 0358726 Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1 | Thematic Interactive Website Proposal TUTORIAL / PRACTICAL WEEK 2 - Introduction to Adobe Animate Card title swf/ html (create new file) html 5 canvas 25 - 30 frames per sec new project (save as index) - upload to Netlify preview (command + return) vector / bitmap - (see pixels) WEEK 3  Animation tutorial square/ rec to circle fluid brush - tool panel- point selection original brush ( limited settings) compared to Fluid brush tool delete everything - double click keyframe (starts / ends) exp to include keyframe select one of the frame / insert, keyframe double click - create shape tween ease out - Quad to loop - publish settings - more settings - loop animations / command + enter Play with timeline break apart text - command + b / modify →break apart Exercise (countdown 10 - 1 ) Adobe Animate WEE...
Read more

Minor Project

Image
23/4/2025 - 1/8/2025 / Week 1 - Week 15 Kerly Ooi / 0358726 Minor Project / Bachelor of Design (Honours) in Creative Media / Taylor's University Final Compilation | Yubari (Expedio) INSTRUCTIONS   TASKS TASK 1 | PROPOSAL Group Formation | Week 1  On the first week, Mr Mike gave us a briefing of the project we will be carrying out in the next 14 weeks. We were instructed to form a group with people from different specializations and choose a topic from given topic lists for the project.  Below are the topics to choose from: WarisanXR Digital Hologram Experience WayangMind – Mindfulness Solution EXPEDIO Project: Self-Watering Pot & Mood Light CONTINENTAL TIRES Project (for SOE groups) IMPACT LAB: Edu4All – The Night School Project IMPACT LAB: Food Security and Nutrition – Food Aid Foundation IMPACT LAB: Innovation and Technology for Sustainable Hospitality and Tourism After reviewing the options, we were required to form groups of 6–7 members. My group decided to c...
Read more

Advanced Interactive Design | Task 2

Image
20/5/2025 - 10/6/2025 / Week 5 - Week 8 Kerly Ooi / 0358726 Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 2 | Interactive Design Planning & Prototype TUTORIAL / PRACTICAL WEEK 5  Modify - convert to symbol - make sure its graphic Graphic (colour in different keyframe etc) & Stage (change looping etc) Masking background (add frame & lock) / shape - two layers For shape - 20 keyframe - shape tweet right click layer 2 - choose mask   WEEK 6 (Online) - Button exercise  Ease out → Ease In (Quart effect) Movie Clip & Graphic (The differences) right click on the layer (new layer(actions)) - add wizard button → stop → this timeline →NEXT → with this frame → finish and add WEEK 7    INSTRUCTIONS   Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to i...
Read more