25.06.2025 - 25.07.2025 / Week 9 - Week 14
ZHANG HANYUAN / 0369727
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
TABLE OF CONTENTS
1. Lectures
2. Instructions
3.Progress
4. Feedback
5. Reflection
INSTRUCTION
Final Project – Completed Thematic Interactive Website
Theme I chose: Sonic the Hedgehog (movie promotion)
Concept
Moodboard
Visual References
Colour Scheme
Wireframes
Prototype Overview
This prototype is what I improved. After Mr. Hamimi’s offline feedback, he said that the website prototype I made before was not interesting, and asked me to find a reference website/inspiration concept website.
Progress in Adobe Animate
First, I looked for a lot of image materials, from some image websites such as Pinterest and Wallpaper, because this Sonic the Hedgehog theme website only has a game website, the movie has realistic characters, and the game website is only a 2D character website and the website is all in Japanese, so I can only use Photoshap to make materials.
Then I converted the materials and figma into png and put them in the library.
I downloaded the music from the Sonic the Hedgehog movie from a free music website as background music, and downloaded four MP3 clips of button click sound effects. I imported them into the library along with the image clips.
Convert the button to a component - Movie Clip/Button so I can drag it to the stage and write the "Instance Name" later.
Add layers and create a timeline
After the preparation work is completed, start building the website
Work Progress in Adobe Animate
Google drive link:
FEEDBACK
Week 9 - Re-finding inspiration and adjusting prototype design:
This week, under the advice of Mr. Hamimi, we reviewed the design direction and inspiration of the project, conducted in-depth research on more excellent cases and user needs, and tried to break away from the original design ideas. By re-collecting visual and functional references, we promoted the re-conceptualization and optimization iteration of the prototype. This reflection and adjustment laid a solid foundation for subsequent designs that are closer to the target users.
Week 11 - Project Structure and File Classification:
This week, we focused on systematically classifying and organizing project files and resources. Storing different types of files such as JavaScript scripts, images, fonts, and audio in separate folders helps to build a clear and orderly project structure. This not only improves the maintainability and readability of the project, but also lays a good foundation for subsequent development and team collaboration. At the same time, it is recommended to standardize the naming method to avoid repeated or ambiguous file naming problems.
Week 12 - Responsive Design Testing and Optimization:
After the project was basically completed, we conducted a comprehensive responsive test to ensure that the website can be displayed and used normally on different resolutions and devices (such as mobile phones, tablets, and desktops). The page layout is well adapted to screens of various sizes, thereby improving the overall user experience. At the same time, it is recommended to further observe the compatibility of different browsers to ensure design consistency.
Week 13 - Code Comments and Document Supplements:
This week, we focused on reviewing and commenting the code, especially adding necessary comments to parts with strong functionality or complex logic. Good comments not only facilitate team collaboration, but also help with future version maintenance and functional iteration. In addition, it is recommended to write simple development documentation to help others quickly understand the project architecture.
REFLECTION
Experience
In the process of completing this task, I tried to combine web design with animation for the first time, and experienced the challenges and fun brought by this process. By using Adobe Animate, I learned how to add dynamic effects to page elements to enhance the overall visual expression. However, I also encountered a lot of troubles in actual operation. The constant adjustment and testing of animation parameters often takes a lot of time and patience. Although there is still room for improvement in the final result, I have tried my best to complete every detail, which is a kind of gain in itself, and it is enough for me to be pleased.
Observation
In the process of actual application of animation, I realized that the role of animation is not only to beautify the interface, but also an important means to improve the user experience. Appropriate rhythm, transition and details can effectively guide the user's attention and enhance the interactivity and usability of the page. While constantly experimenting with different animation parameters, I gradually mastered how to balance animation effects and page performance to make the animation run more smoothly. This process also made me understand the logic and strategy of motion effect design more clearly.
Findings
Through this practice, I have made it clearer that an excellent interactive design needs to strike a balance between visual appeal and user experience, and neither is indispensable. Although I am still unfamiliar with animation design, this experience has helped me take a crucial step forward. Adobe Animate provides a rich and flexible tool that provides a technical foundation for my future animation creation. Although there are still many areas for improvement in the finished product, I am satisfied with my efforts. In the future, I will continue to improve my animation performance and move towards higher quality works.
Comments
Post a Comment