Advanced Interactive Design: Task 3 Final Website
SHIMANLIN,（0375858)
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 3 Final Website
TABLE OF CONTENTS
Instruction
Lecture
Task
Feedback
Reflection
INSTRUCTIONS
FINAL SUBMISSION
Final web
(Please allow around 5–10 seconds for the website to load. Thank you for your patience.)
Animate File
TASK
Task 3: Final Themed Interactive Website
Instructions and Requirements: We need to deliver a final, working website based on the Figma prototype using Adobe Animate and publish it using Netlify.
Website Structure
home.html - Homepage, where visitors enter the website and start their interactive ocean conservation experience. It introduces the theme and provides navigation to different sections.
game.html - An interactive game page where visitors collect and remove ocean waste through gameplay, helping them understand the importance of protecting marine environments.
cards.html - An educational card section that introduces different marine species and explains the impact of ocean waste on marine life.
quiz.html - A quiz page where visitors answer questions about ocean conservation, marine life, and pollution awareness to test their knowledge.
certificate.html - A final achievement page where visitors receive a certificate after completing the activities, recognising their participation and encouraging continued ocean protection.
Home.html
I designed my Home page as the main entry point of the website, focusing on navigation rather than heavy content. I created button symbols in Adobe Animate and converted them into interactive buttons to guide visitors to different sections of the website. I arranged the button instances on the Stage to create a clear and accessible navigation flow.
Game.html
For the Game page, I created an interactive ocean waste removal experience where visitors can remove waste items through clicking and dragging actions. The waste objects were imported and converted into Movie Clip symbols, allowing each element to function independently during interaction.
I added a scoring system where users can earn points when they select the correct items.
Cards.html
Within the Cards page, I created an interactive card section that allows visitors to reveal information by selecting each card. I used Graphic symbols to build the card designs, while different instances were arranged through the Library panel to maintain consistency across the card elements.
I designed the card-flipping interaction to create a more engaging way for users to discover information about marine life and ocean waste.
This interaction allows visitors to learn through exploration instead of simply reading static content.
Quiz.html
For the Quiz page, I created an interactive quiz interface related to ocean conservation and marine knowledge. I arranged the text and visual elements on the Stage, while button symbols were used for answer selections and interactive responses.
I added an interactive feedback system where incorrect answers will display a 'Try Again' message, allowing users to retry the question.
This design encourages learning through interaction and helps visitors improve their understanding of ocean protection.
Certificate.html
As the final stage of the website experience, I created a certificate page where visitors can receive a digital certificate after completing the activities. I arranged the certificate design elements on the Stage and organised the text and graphic components through the Library panel as reusable symbols. This reward feature provides visitors with a sense of achievement and encourages continued engagement with ocean conservation.
Animation Development
After completing the basic layout of the website, I started adding animation elements to enhance the overall user experience.
Loading animation
I created the loading animation by preparing visual elements and combining them into an animated sequence. The elements were adjusted and arranged to create a continuous loading effect, providing a smoother transition when visitors enter the website.
Button Animation
I created the button animation by adjusting the position of the button elements to create an upward movement effect.
The animations provide visual feedback when visitors interact with the buttons, making the navigation experience more engaging and helping users understand that the buttons are clickable.
Game Completion Transition Animation
I created a completion transition animation by importing and arranging designed assets into an animated sequence. The asset movement was adjusted to create a rewarding completion moment before directing visitors to the next page of the website.
The animation creates a smoother connection between the game page and the next section, while providing visual feedback to celebrate the user's achievement and improve the overall interactive experience.
Quiz Completion Animation
I created a celebration animation by arranging colourful graphic assets and animating their movement to create a scattered particle effect.
The confetti effect provides positive feedback and creates a sense of achievement, making the completion process more rewarding and engaging for users.
Certificate Light Effect Animation
I created a light effect animation by moving a highlight element across the certificate design.
The moving light effect creates a more dynamic and polished appearance, making the certificate feel more special and rewarding for visitors.
Final web
(Please allow around 5–10 seconds for the website to load. Thank you for your patience.)
Demonstration video recording
FEEDBACK
Week 12
Mr. Shamsul said it looked good overall but lacked some animation effects.
Week 13
Mr. Shamsul said my website was cool and that it was allowed.
REFLECTIONS
Experiences
Through this project, I experienced the complete process of developing an interactive website, from designing the Figma prototype to implementing it using Adobe Animate and publishing it through Netlify. I gained experience in creating interactive elements such as games, card interactions, quizzes, and animations. This process allowed me to understand how design ideas can be transformed into a functional digital experience.
Observations
During the development process, I observed that interactive elements can make website content more engaging and encourage users to participate actively. I found that animations, feedback systems, and game-based interactions helped create a smoother and more enjoyable user experience. I also noticed that careful planning and testing were important to ensure all interactions worked properly.
Findings
Through this project, I found that combining visual design with interactive features can improve the way users receive and understand information. I learned that educational content can become more effective when users are encouraged to explore and participate instead of only reading static information. This project also improved my understanding of interactive website development and the importance of user experience design.
Comments
Post a Comment