Advanced Interactive Design - Final Project : Completed Thematic Interactive Website
13/11/2024 - 29/12/2024 ( Week 9 - Week 14 )
Ho Winnie / 0364866
Advanced Interactive Design / Bachelor's of Design Honors In Creative Media
Final Project : Completed Thematic Interactive Website
1. Final Project : Completed Thematic Interactive Website
Requirements :
Students will create integrate visual asset and refine the prototype into a complete working and functional product experience."
1.Upload the website to a web server.
2.Record a video walkthrough.
3.Online posts in your E-portfolio as your reflective studies
4.Make sure to embed or provide a link to the website and the video from the blog post.
Design Process : Landing Page Section
I began by conceptualizing how to transition from the main pages to different sections, aiming to align the design with the "dreamy-like" theme of my website. To achieve this, I incorporated a flowing cloud animation as the primary transition effect. The clouds move gently across the screen, creating a seamless passage to the next page. To enhance the effect, I adjusted the clouds' alpha levels in Adobe Animate, gradually transitioning from 0% to 100% opacity. This layering of transparency adds depth and realism to the animation, complementing the ethereal ambiance of the website.
 |
| Fig 1.1 Transition Clouds |
 |
| Fig 1.2 Layers for Landing Page |
Fig 1.3 Animation effect for Landing Page
Design Process : History of Collaboration Section
For this section, I will mainly be including more subtle animations like the light coming out from the tunnel and making "Next" buttons for the users to press in order to move on to homepage. For the light appearing animation, I made use of classic tween with classic ease animation.
Fig 1.4 History Section
Fig 1.5 Animation effect for History Section
Design Process : Homepage Section
For my homepage, I decided to add in a few different animations like the clouds gradually passing on loop, doodles character girl floating up and down on the clouds , the rainbow behind the sky slowly appearing and the buttons to different sections on the website will also be displayed on the homepage.
 |
| Fig 1.6 Layers for Homepage |
For the button design, my goal was to create a more intuitive and engaging experience for users. To achieve this, I incorporated distinct hover and pressed states. When a user hovers over or clicks a button, it dynamically increases in size, making it appear larger than the original state. This interactive effect not only draws attention but also provides clear visual feedback, enhancing the overall usability and appeal of the design.
 |
| Fig 1.7 Different states of buttons |
To ensure seamless navigation, I created an action layer and integrated functional code for the buttons. Each button is programmed to lead users to specific sections of the website, enabling a smooth and interactive browsing experience. This approach not only organizes the functionality but also ensures that the website remains user-friendly and responsive.
 |
| Fig 1.8 Codes that leads button to different sections |
Fig 1.9 Animation effect for Homepage
Design Process : Doodles x Complexcon Section
For this section, I plan to animate the Doodles van driving down a rainbow, adding a whimsical and engaging element to the design. To enhance the visual impact, the buttons leading to the ComplexCon section will be styled as signboards, creating a cohesive and thematic look. When a user clicks on the signboard, the van will animate forward, adding an interactive and dynamic transition to the experience. Motion tween was mostly used to make this animation.
 |
| Fig 2.0 Layers for Complexcon |
Fig 2.1 Animation effect for Complexcon
Design Process : Doodles x Crocs Jibbitz Section
For this section, I will focus on animating a person wearing Crocs adorned with Jibbitz, stepping forward in a dynamic and engaging manner. To add a sense of liveliness, the background will feature subtle movements, such as gently swaying flowers. When users hover over a specific Jibbitz, it will enlarge to draw attention. Upon clicking, a detailed section will appear on the screen, providing an explanation about the selected Jibbitz. This interactive design enhances user engagement while showcasing the Jibbitz in an appealing and informative way.
 |
| Fig 2.2 Layers for Crocs Jibbitz |
Fig 2.3 Animation effect for Jibbitz
Design Process : Doodles x Crocs Digital Collactables Section
For this section, I plan to incorporate multiple animations to create an engaging user experience. The centerpiece will feature a Crocs box dropping dramatically from the sky and landing on the floor. Additionally, there will be interactive question mark boxes for users to click on, inviting them to discover the surprises inside. Upon clicking a box, users will be directed to another page where the collectible emerges from the box, accompanied by an introduction section providing more details about it. This design adds an element of excitement and discovery, enhancing the overall interactivity of the website.
Fig 2.4 Layers for Crocs Digital Collactables
Fig 2.5 Animation effect for Crocs Digital Collactables
For this section, I plan to create a captivating animation featuring flowers gently falling from the sky, adding a dreamy and elegant touch. Simultaneously, the artist will gradually appear on the screen, creating a sense of anticipation and focus. This combination of animations adds depth and visual interest, making the section both engaging and memorable.
 |
| Fig 2.6 Layers for Artist Section |
Fig 2.7 Animation effect for Artist Section
I searched online for copyright-free music to use as sound effects for the website and decided on Dreamy Clouds, as it perfectly complements the website's mood. I imported the track into the library, configured its settings to "Stream" for efficient playback with the timeline, and enabled "Loop" to ensure continuous audio playback throughout the user experience.
 |
| Fig 2.8 Sound settings |
Final Project Submission :
Website Link : https://doodlesxcrocs-winnieho.netlify.app/
Video Walkthrough : https://youtu.be/hZD_lUv6GCI
2. Feedback
3. Reflection
Experience:
This final project has been one of the most challenging experiences of my academic journey. From the early stages of prototyping to the final execution on Adobe Animate, every step demanded an immense amount of effort, time, and attention to detail. I decided to create each vector design myself using Procreate and Illustrator, ensuring every visual element matched the playful and whimsical theme of the Doodles x Crocs website. This decision added significantly to the workload, but it was crucial for maintaining a cohesive aesthetic and personal touch throughout the project. The process of juggling creativity, technical constraints, and timelines was both demanding and fulfilling, pushing me to expand my skills and patience.
Observations:
Throughout this project, I noticed how even the smallest details in Adobe Animate could have a profound impact on the final outcome. Adjusting the timing of animations, the placement of elements, or even the transitions between scenes required careful consideration, as each decision directly influenced the overall user experience. These fine adjustments taught me the importance of precision and iteration in design. Mr. Shamsul’s examples of highly interactive websites were particularly inspiring; they showcased how thoughtful interaction design can turn a simple project into an engaging experience. His demonstrations set a high standard for my own work, encouraging me to explore more advanced animation techniques and interactive elements. The examples also highlighted how animation can evoke emotion and captivate users, which became a goal I strived to achieve in my own project.
Findings:
One of the most valuable lessons I learned from this project was the complex interplay between action layering and coding in animation. Understanding how to implement functionalities such as making buttons interactive or stopping an animation at the right frame was initially overwhelming. It took me considerable time and trial-and-error to master these concepts, especially since they required a blend of logical problem-solving and creative thinking. This technical aspect of the project deepened my appreciation for the behind-the-scenes work that goes into creating seamless user experiences. I also realized how critical it is to integrate coding and design from the outset, as any misalignment could disrupt the animation’s flow. I am thankful to my friends who provided their help and support throughout too.
QUICKLINKS
Comments
Post a Comment