Advanced Interactive Design - Task 03
12.11.2024 - 29.12.2024 (Week 9 - Week 14)
Sorcha Griselda / 0353056
Advanced Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Task 03 | Final Project
INSTRUCTION
Task 03 | Buttons & Pages
Building on the work completed in Task 2, the next step involves developing and implementing the website proposal outlined earlier. This stage requires translating the initial ideas and concepts into actionable plans, ensuring the proposal aligns with the project objectives. The focus will be on bringing the proposal to life through detailed execution, addressing both design and functionality to create a cohesive and engaging website.
Total Pages:
- Loading Page
- Home Page
- Art Page
- Timeline Page
- Story Page
Project Development Progression
Loading Page - The loading page was where everything started. I wanted it to be visually captivating and set the tone for the entire project. Inspired by Van Gogh’s Starry Night, I created swirling animations to give it a dynamic and immersive feel. This page was designed to engage users while the main site loaded, reflecting the artistic essence of Van Gogh’s work.
 |
| Fig 1.1 Animating Progress | Loading Page |
 |
| Fig 1.2 Action Button HTML Progress |
Animating the swirls turned out to be more challenging than I expected. Finding the right balance between movement and aesthetic appeal took a lot of trial and error. I also had trouble timing the animation so it wasn’t too short or too long, which took multiple attempts to get right.
Home Page - The home page became the entryway to the website. I designed it with a clean and minimalistic look, titled "Van Gogh’s Immersive Art Journey”. To make navigation easy, I included a prominent “Explore” button and used a starry background animation to maintain consistency with the theme.
 |
| Fig 1.3 Animating Progress | Home Page |
 |
| Fig 1.4 Action Button HTML Progress |
Getting the design to look visually appealing yet functional was no small feat. At first, the background animation clashed with the text, making it hard to read. I spent quite some time adjusting font styles, sizes, and positioning to strike the perfect balance between readability and aesthetics.
Art Page - The art page is a gallery showcasing some of Van Gogh’s most iconic pieces, such as Self-Portrait with Grey Felt Hat, The Bedroom, Sunflowers, and Almond Blossom. I added a numbering system for easy navigation and used layering to create a sense of depth and interactivity.
 |
| Fig 1.5 Animating Progress | Art Page |
 |
| Fig 1.6 Action Button HTML Progress |
This page was one of the most time-consuming. I needed each artwork to stand out while keeping the design cohesive. Managing layers and symbols in Adobe Animate was tricky, especially since I hadn’t been careful with naming them properly. This made it difficult to locate and edit specific elements later on.
Timeline Page - The timeline page was designed to walk users through Van Gogh’s life and art. Each milestone year featured one of his artworks. I included smooth transitions to tie the timeline together with historical context and visual storytelling.
 |
| Fig 1.7 Animating Progress | Timeline Page |
 |
| Fig 1.8 Animating Progress | Timeline Page |
 |
| Fig 1.9 Animating Progress | Timeline Page |
 |
| Fig 1.10 Animating Progress | Timeline Page |
 |
| Fig 1.11 Action Button HTML Progress |
Story Page - The story page brought Van Gogh’s journey to life. I paired immersive visuals with descriptive text overlays, creating a narrative that showcased the emotional depth of his work. The background imagery was carefully chosen to enhance the story and make it more engaging.
 |
| Fig 1.12 Animating Progress | Story Page |
 |
| Fig 1.13 Animating Progress | Story Page |
 |
| Fig 1.14 Animating Progress | Story Page |
 |
| Fig 1.15 Animating Progress | Story Page |
 |
| Fig 1.16 Action Button HTML Progress |
Deploy to Netlify
 |
| Fig 1.17 Netlify Process |
Final Submission
Netlify Link: https://vangogh-immersiveartjourney.netlify.app
REFLECTION
Experience
This project was an intense and lengthy journey, filled with highs and lows,
as I worked on creating an interactive website. At first, I struggled to get
familiar with Adobe Animate, but through trial and error as well as plenty of
mistakes, I gradually started to understand how it works. Despite the
challenges, I genuinely enjoyed watching my website come together piece by
piece. I learnt a lot, including how to create transitions and simple
animations. However, I felt disappointed that I couldn’t take the project to
its full potential, like adding audio and successfully uploading it to
Netlify. Overall, while the experience was fun and educational, I wish I had
more prior experience and classroom tutorials to better grasp the app and
fully realise my vision. That said, I am reasonably satisfied with the final
outcome.
Observation
Building an interactive website using Adobe Animate highlighted the balance
between creativity and technical accuracy. Keyframes, symbols, and action
scripts were essential tools for animating and adding interactive features.
These features made the site engaging but also demanded a lot of attention to
detail. Regular testing proved vital for identifying and fixing issues early.
Additionally, having a clear website theme made selecting fonts and images
much easier, ensuring that all elements felt cohesive.
Findings
This project taught me the importance of detailed planning for animation
sequences to ensure smooth functionality. I realised the value of properly
naming layers and symbols; my reliance on abbreviations led to confusion when
I needed to make edits. Finally, I learnt that taking the time to practice and
understand the app before starting the project is crucial. Unfortunately, I
had to dive straight in without that preparation, which made the process more
challenging.
Comments
Post a Comment