FINAL WEBSITE
Week 01 - Week 14
Aina Ahmed Aleem | 0355701
Advanced Interactive
Design | Mr Shamsul
EXERCISES
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Process
4. Final Website
5. Reflection
LECTURES
After completing the proposal stage, I began preparing the project files for
development in Adobe Animate. To keep the project organised, I first created a
main project folder containing an image assets folder and five separate Adobe
Animate files for each page of the website: Home, About, Resorts, Activities,
and Gallery.
Initially, I intended to use the prototype that I had designed in Figma
during the proposal stage. My first approach was to export the completed
screens and import them directly into Adobe Animate. However, after
importing the design, I noticed that many of the images and interface
elements appeared blurry and did not retain the visual quality required for
the final website. Since the project heavily relied on high-quality visuals
to communicate a luxury travel experience, I decided to recreate the website
directly in Adobe Animate rather than using the exported prototype. Although
this required additional time, it allowed me to achieve better image quality
and gave me more flexibility when developing the interactive elements.
I began by recreating the Home page. This involved importing the hero
image, designing the navigation bar, positioning the title and subtitle, and
creating the Explore Resorts button. Once the layout was completed, I
experimented with Adobe Animate's built-in animation tools to animate the
text and interface elements. While I was able to create basic motion tweens,
the results did not match the smooth and refined effect I wanted for the
website. Because of this, I explored alternative methods and implemented
some animations through code instead, which provided greater control over
movement and timing. For decorative elements such as the jellyfish, shell,
and starfish graphics, I continued using motion tweens to create subtle
floating animations that enhanced the underwater atmosphere without
distracting from the content.
After completing the Home page, I developed the About page. To maintain
consistency throughout the website, I reused the same navigation design,
typography, and layout principles established on the Home page. The page was
designed to provide information about the Maldives while maintaining a clean
and visually balanced presentation. I organised the content using images,
descriptive text, and destination statistics to create a simple but
informative user experience.
The next stage involved implementing navigation across the entire website.
I first developed and tested the navigation system on the Home page to
ensure that each button linked to the correct destination. Once the
navigation was functioning correctly, I copied the navigation code and
reused it across the remaining pages. This ensured consistency throughout
the website and significantly reduced development time, as I only needed to
modify the destination links for each page rather than rewriting the
navigation functionality repeatedly.
The Resorts page was the most technically challenging part of the project
and required the most development time. I created three resort cards
featuring Soneva Jani, One&Only Reethi Rah, and Gili Lankanfushi. Each
card contained a View Resort button that would reveal additional
information through an interactive popup overlay. To build this feature, I
created separate MovieClips for each resort popup containing images,
descriptions, highlights, and pricing information. The popups were
designed to appear on top of the page while the background darkened
through an overlay effect, allowing users to focus on the selected resort
without leaving the page.
During the development of the Resorts page, I encountered several technical
issues. At one point, a recovered version of the file caused many of the
buttons to stop functioning correctly. The popup system no longer responded as
expected, and several button interactions failed. To identify the problem, I
systematically checked the layers, symbols, instance names, MovieClips, and
button properties within Adobe Animate. I discovered that some buttons had
become nested within other symbols, preventing the code from recognising them
properly. I spent a considerable amount of time debugging by testing
individual buttons, reviewing the timeline structure, checking instance names,
and comparing the original file with the recovered version. Through this
process, I learned the importance of proper layer organisation and symbol
management when developing interactive content in Adobe Animate.
After further testing, I found that the recovered Resorts file was actually
more stable than the original version. As a result, I replaced the original
file with the recovered version and rebuilt several button instances
directly on the main timeline. This successfully restored the popup
functionality and resolved the interaction issues. The debugging process was
time-consuming but significantly improved my understanding of Adobe
Animate's workflow and interactive structure.
Once the Resorts page was completed, I moved on to the Activities page.
This page featured three activity cards representing snorkelling, water
sports, and spa experiences. Rather than displaying all information
immediately, I implemented hover interactions that revealed additional
descriptions when users moved their cursor over the images. This
approach helped maintain a clean visual layout while still providing
meaningful content.
The Gallery page was developed using a similar interaction style. I
created an image gallery showcasing the beauty of the Maldives and
added hover effects that displayed image captions only when users
interacted with the photographs. This allowed the gallery to remain
immersive and visually focused while still providing contextual
information.
After all pages had been completed, I conducted extensive testing to
ensure that navigation, hover effects, animations, buttons, and popup
interactions functioned correctly across the entire website. During this
stage, I also identified issues with responsive behaviour after
publishing the website online. While the Resorts page displayed
correctly, other pages appeared with unwanted white margins. To solve
this problem, I investigated the published files and discovered
differences in the responsive settings generated by Adobe Animate. After
enabling responsive scaling and republishing the affected pages, I was
able to achieve a more consistent layout across the website.
The final stage involved publishing the project as HTML5 Canvas files
and uploading the completed website to Netlify. Multiple rounds of
testing were conducted to verify that all pages loaded correctly and
that interactive features behaved as intended. Through this project, I
gained valuable experience in interface design, animation, interactive
development, debugging, and web publishing. Although several challenges
arose throughout the development process, overcoming these issues
strengthened both my technical skills and my confidence in using Adobe
Animate to create fully interactive digital experiences.
FINAL WEBSITE
REFLECTION
Developing this website was one of the most challenging yet rewarding projects I have completed so far. Unlike previous design projects that focused primarily on visual outcomes, this project required me to combine design, animation, interactivity, and problem-solving skills to create a fully functional website. Throughout the process, I learned that developing an interactive experience involves much more than simply designing attractive layouts. Every visual element, button, animation, and interaction needed to work together to create a smooth user experience.
One of the biggest lessons I learned was the importance of flexibility during the design process. Initially, I intended to use the Figma prototype that I had already created during the proposal stage. However, after importing the design into Adobe Animate, I realised that the quality was not suitable for the final outcome. Although rebuilding the website from scratch required more effort, it ultimately resulted in a higher-quality and more professional final product. This experience taught me that it is sometimes necessary to change direction when the original approach is not producing the desired results.
I also gained a much deeper understanding of Adobe Animate. Before this project, I was unfamiliar with many of its features, including timelines, symbols, MovieClips, instance names, layers, and interactive functionality. Through continuous experimentation and practice, I became more confident in organising project files, managing assets, creating animations, and building interactive elements. I particularly enjoyed creating the resort popups and hover interactions because they transformed the website from a static design into a more engaging user experience.
The most difficult part of the project was troubleshooting technical issues. There were several occasions where interactions stopped working unexpectedly, particularly on the Resorts page. Debugging these problems required patience and careful attention to detail. I spent a significant amount of time checking layers, symbols, button properties, and file structures to identify the source of the issues. Although the process was frustrating at times, successfully resolving these problems gave me a greater appreciation for the importance of testing and problem-solving during development. It also taught me the value of maintaining organised files and creating backups regularly.
Another aspect I enjoyed was designing a website based on the Maldives. As someone from the Maldives, I felt a personal connection to the project and wanted to present my country in a way that reflected its beauty, luxury, and unique experiences. Selecting the imagery, designing the layouts, and creating the interactive features allowed me to showcase a destination that is meaningful to me while also applying the design principles learned throughout the module.
Overall, this project strengthened both my technical and creative abilities. It improved my confidence in using Adobe Animate, enhanced my understanding of interactive design, and taught me valuable lessons about persistence, adaptability, and problem-solving. Looking back, I am proud of how the website developed from an initial proposal into a fully functioning interactive experience, and I believe the skills I gained throughout this project will be highly valuable for future digital and interactive design work.
Comments
Post a Comment