Advanced Interactive Design | Task 3: Completed Thematic Interactive Website

- January 08, 2025

26/11/24 - 8/1/25 | Week 10 - 15

Iman Mikudim | 0338004 | Section 2

Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media

Task 3: Completed Thematic Interactive Website

SECTIONS

| Instructions

| Reflections

INSTRUCTIONS

1. Brief
Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.

2. Process
(i) Adobe Illustrator
Fig 1.1 Witcher Logo
I began by referencing and creating the Witcher logo in Adobe Illustrator, which will be used on the 'Loading' page.

Fig 1.2 Witcher Sign Icons
Next, I began creating and referencing the various witcher abilities (signs) that will also be used on the 'Loading' page.

Fig 1.3 Witcher Monster Icon
Finally, I created and referenced the monster icon, which is also used in the actual Witcher 3 game and will be used on the 'Monster Locations' page.

(ii) Adobe Animate
Adobe Animate Document Settings:
Stage Size: 1440 (W), 1024 (H)
Platform Type: HTML5 Canvas

Fig 1.4 Adobe Animate Process
When it came to Adobe Animate, I began by adding all of the images, icons, and text before beginning the animations. It was difficult to find help online because few people use Adobe Animate for website design and animations. However, fortunately, most of the animations on my website were referenced and guided by these three sources:
Mr. Shamsul's Tutorials
Jong-Yoon Kim. Professor Kim (YouTube)
Angelo Montilla (YouTube)

3. Final

Publish Settings:
Center Stage (Both)
Make Responsive (Both)

Note: Apologies, the website may take 1-2 minutes to load.
Click HERE for the link to the Netlify website.

Fig 2.1 Netlify Website

Fig 2.2 Completed Thematic Interactive Website Walkthrough

REFLECTIONS

Learning Adobe Animate was a completely new and challenging experience for me. Initially, I struggled with the software, but over time, I became more familiar and comfortable using it. Although the animation process was daunting and tedious, it proved to be an intriguing journey. Completing the website brought a sense of fulfillment, as it showed me that I am capable of designing and animating a website to a certain extent. Reflecting on this project, I find it interesting enough to consider revisiting and improving it in the future. I sincerely thank Mr. Shamsul for his guidance and patience throughout this journey.

QUICK LINKS

| Task 1: Thematic Interactive Website Proposal
| Task 2: Interaction Design Planning and Prototype