Advanced Interactive Design Final Task

Advanced Interactive Design Final Task

Week 9- Week 14

Siam Siew Yong 0358399

Bachelor of Design in Creative Media | Taylor’s Design School | Taylor’s University

INSTRUCTION

Task 3: Completed Thematic Interactive Website

Objective: Synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages.

As Mr Shamsul feedback in Task 2 stated that the website design was looks messy because of too many picture elements , so I decided to redesign my website.

The color palette was almost same with task 2

I redesigned my website using Figma and Adobe Illustrator. Here is a screenshot showing my progress so far.

website layout process in figma

The components almost same with task 2

components

I first designed the overall layout in Figma. Then, I transferred the layout to Adobe Illustrator to design individual components and buttons, making them ready to copy and paste directly into Adobe Animate for thematic website.

progress in Illustrator

At the homepage, there will be include a guide come with a speech bubble, introduce this website---Welcome to Pocket Doll Paradise.

progress in adobe animate

The main page will feature horizontal sliding animations for both dolls and clothing items. The first and third rows will animate from right to left, while the second row will slide in the opposite direction, from left to right, creating a dynamic and flowing visual effect.

mainpage animate design

And the second animation will be the liked animation.(in Favourite section)

liked animate design-mainpage

The third animation--hover effect in Featured, New Arrivals and Top Picks button.

hover effect- enlarge

For the content page, when clicked, the content and the image of doll changed.

after clicked-content changed

Here's the action code of my homepage and mainpage.

action code 1-homepage

action code 2-mainpage

Layers of the website

At first, the website wasn’t responsive. I reviewed the publish settings and went through all the code again to find and fix the error. However, I wasn’t able to successfully add background music, so the website will be silent.

Finally, I did it out...

it was moving!!

Link to the website

Netlify: https://pocketdollparadise.netlify.app/

Go back to Task 2

REFLECTION

This module was interesting and challenging for me. I started off a bit unsure about how all the tools—Animate—to work for a website, but as I worked through the project, things slowly started to make sense. Finally, I could used Adobe Animate to add motion and interactions.

One of the biggest issues I faced was making the website responsive. At first, it didn’t work properly, and I couldn’t figure out why. I had to go back and check all my publish settings and go through my code line by line. It took some time, but I managed to fix it. That small success felt really rewarding. However, I couldn’t get the background music to work no matter how many times I tried. So, in the end, my website doesn’t have sound—but I’ve accepted that as part of the learning process.

I’m really proud of the animated homepage I made. The idea was to have the dolls and clothes sliding across the screen in different directions—first and third rows from right to left, and the second row from left to right. It gives a nice flow to the page and makes it feel more alive.

Overall, this module taught me a lot—especially how to used Adobe Animate as well. It wasn’t always smooth, but I learned by doing, and I feel more confident using these tools now. Looking back, even the mistakes helped me grow.