Advanced Interactive Design Final
Advanced Interactive Design Final
Nike Air Max 2026 Interactive Launch Website
Student Id:0379395
Student Name:HE KEHUA
Presentation Link：https://youtu.be/aE5wHtVFt-w
Drive:https://drive.google.com/file/d/1p9-Qa9tAFDxSV0OIV5XyaKOQN8rJ65HX/view?usp=sharing
1. Project Introduction
The final project is an interactive promotional website designed for the Nike Air Max 2026 launch. The purpose of this project is to create an engaging digital experience that combines visual storytelling, animation and user interaction.
Instead of creating a traditional product website, this project focuses on using motion design and interactive elements to communicate the futuristic identity of Nike Air Max. The design concept was inspired by Nike’s emphasis on innovation, speed and technology.
Adobe Animate was used as the main development tool to create animations, interface elements and interactive functions. Through timeline animation and JavaScript interaction, users can explore different sections of the website in a more immersive way.
2. Design Concept and Development Process
The design direction focuses on a futuristic and energetic visual style. A dark background combined with bright colour highlights was selected to represent technology and modern sports aesthetics.
During the development process, the website structure was planned first, including the opening animation, navigation system, product showcase section and interactive buttons. After establishing the overall layout, individual elements such as text, images, icons and product visuals were created and arranged inside Adobe Animate.
Different animation techniques were applied throughout the project, including timeline animation, object movement and transition effects. These animations were used to create smoother interactions and improve the overall user experience.
3.Animation and Interaction Development
The interactive features were developed using Adobe Animate HTML5 Canvas and JavaScript.
Buttons were created to allow users to navigate between different sections of the website. For example, clicking the button triggers a timeline control function that moves users to a specific frame or section.
The interaction was implemented through event listeners and timeline navigation. This allowed the website to provide a more dynamic experience instead of only displaying static information.
4. Asset Creation and Visual Design
The visual assets were developed and adjusted based on the Nike Air Max brand style.
The main design considerations included:
- Maintaining strong visual contrast between background and product elements.
- Creating a futuristic atmosphere through typography and layout.
- Highlighting the product as the main focus of each section.
- Using animation effects to make the browsing experience more engaging.
The assets were organised into different layers inside Adobe Animate, allowing individual elements to be modified and animated separately.
5. Final Website Outcome
The completed website includes several interactive sections:
- Animated opening introduction
- Product showcase section
- Navigation buttons
- Interactive user controls
- Animated transitions between different content areas
The final outcome demonstrates how animation and interaction can enhance digital product promotion. Users are able to explore the Nike Air Max 2026 concept through a more immersive experience compared with a normal static webpage.
6. Reflection
Throughout this project, I gained a better understanding of interactive website design and the importance of combining visual design with user experience.
One of the main challenges was managing multiple animation elements and ensuring that different interactions worked correctly. During the development process, I needed to organise layers carefully, adjust timing and test different interactions repeatedly to achieve a smoother experience.
This project improved my skills in Adobe Animate, especially in timeline management, animation control and JavaScript-based interaction. I also learned that good interactive design is not only about adding animations, but also about using motion and interaction to guide users and improve engagement.
Overall, this project allowed me to apply the design principles learned throughout the semester and create a complete interactive website experience.
7. AI Disclosure Statement
During the development of this project, AI tools were used as supporting tools for idea exploration, writing improvement and technical problem-solving.
AI was mainly used to help organise design ideas, improve written explanations and provide guidance when solving development issues. The final website structure, visual design, animation creation, interaction implementation and Adobe Animate development were completed by myself.
The project was not generated solely by AI. All main design decisions, animation work and interactive functions were created and developed through my own design process using Adobe Animate.
8. Development Evidence
The following materials are included as evidence of the original development process:
- Adobe Animate workspace screenshots
- Timeline and layer organisation screenshots
- JavaScript interaction code screenshots
- Visual asset development screenshots
- Final website demonstration video
Comments
Post a Comment