Advanced Interactive Design / Task 3: Thematic Interactive Website

2024.10.22 - 2024.11.06 Week 8 - Week 15

Teh Ming En/0364908

Advanced Interactive Design-Bachelor of Design (Honours) in Creative Media--Taylors University

Task 3:  Thematic Interactive Website

---

Instructions

---

Task 3:  Thematic Interactive Website

In Task 3, we are required to apply the knowledge gained from Tasks 1 and 2 to develop a complete and functional product experience. This includes creating integrated visual assets and refining the prototype into a working website. The process involves enhancing the design, ensuring seamless functionality, and delivering an engaging user experience.

Progress

Fig 1.1 Figma Prototype

Based on the previous task, we have to animate our website using Adobe Animate. Our website needs to refer back to the prototype design. The above is my prototype design.

Fig 1.2 Timeline - Loading Bar

Fig 1.3 Loading Bar

Regarding the loading bar on the loading page, I used the mask function. The ribbon is a picture that downloaded from Pinterest. Basically, most of the materials are found and downloaded online, which is very convenient.

Fig 1.4 Scrolling Text

After that, I created two sets of text and duplicated them, arranging them next to each other. Then I adjusted the order of the timeline to create the effect of scrolling text.

Fig 1.5 Mainpage

For the mainpage, I  set the six princess cards as buttons and added a drop shadow effect to them. I adjusted and arranged their appearance order on the timeline. Finally, I made a gradient fade effect (Color effect - Alpha) to make them look smoother.

Fig 1.6 Title in main page

For the title in the main page, I have converted it to movie clip and created animation in edit symbol page.

Fig 1.7 Button in Illustrator

Before importing the buttons to Adobe Animate, I created them in Adobe Illustrator and filled in the colors (before and after clicking). After that, import them to the Animate and add them to each page.

Fig 1.8 Button in Illustrator

Above is the button effect that is created in Illustrator. I want to use them in the princess name button on the product selection page.

Fig 1.9 Edit Movie Clip

Fig 1.10 Edit Movie Clip

For the product animation, I have converted it to the movie clip and edited the symbol. Then, added transition to make it looks smoother and adjusted the timeline of the text.

Fig 1.11 Applying Action

During the process, I also labeled each page and used actions to help me make the page more complete.

Fig 1.12 Applying Animation

On the product details page, I imported all the elements into Animate and arranged them in the correct positions. Then I added entry animations for each of them.

Fig 1.13 Adding GIF

In addition to this, I also added GIFs downloaded from other website and converted them into buttons on each product detail page. When users click on the GIF, the content will pop up.

Fig 1.14 Whatsapp Screenshot

For unknown reasons, I tried to upload the files to Netlify many times, but the website generation failed. I told Mr Shamsul about this problem, and he told me that I could just record the working process of my website and submit it.

Submission

Fig 2.1 Submission Walkthrough Website Video

Youtube link: https://youtu.be/Ms1Q5nizkFc

Reflection

In this task, the process involved researching user needs, planning the layout, and testing different design elements to ensure usability. I feel that this is an interesting but challenging process. The reason is this is my first time using Adobe Animate to create an animated website. This was a bit challenging for me. In the beginning, I didn’t know how to start making this website. I was completely confused and had to figure it out slowly. During the process, I learned to improve the design step by step. This experience taught me the importance of refining details to enhance the user experience.