Advanced Interactive Design // Task 1: Thematic Interactive Website Proposal

23.9.2024 -13..2024 /Week 1- Week 4 

Angel Tan Xin Kei / 0356117  

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

Project 1: Mobile Application Proposal  

---

⋆ ˚｡⋆୨୧˚ Index ˚୨୧⋆｡˚ ⋆

• Instruction
• Lectures
• Task 1: Thematic Interactive Website Proposal 
• Feedback 
• Reflection

---

⋆ ˚｡⋆୨୧˚ Instruction ˚୨୧⋆｡˚ ⋆

Module Information Booklet

Requirement:

• Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:   
• A specific product of a particular brand launch/special/Beauty product launch
• Movie promotion
• Game release promotion
• Gallery/Museum exhibit launch 
• Band/Artist latest release.
• Or anything else you have in mind (subject to the module coordinator’s approval)  

Submission

• Completed UI/UX proposal document
• All processes (concept, wireframes, mood board, flow chart)

---

⋆ ˚｡⋆୨୧˚ Lectures ˚୨୧⋆｡˚ ⋆

Week 2

Mr. Shamsul guided us through the basics of using Adobe Animate, focusing first on the tools for drawing. He taught us how to use both the pen and shape tools to create a beach ball and apply shadows on it, showing us how to apply motion to the object so it could be animated realistically. 

Fig 1.1 Beach Ball

After we practiced those techniques, he gave us an assignment: to draw a boat, exactly matching a reference image, within a strict 20-minute time limit. This exercise pushed us to apply our new skills quickly and accurately. 

Left one is the examples given by Mr Shamsul and Right one is mine:

Fig 1.2 Boat

Week 3

Mr. Shamsul showed us how to draw a spider using Adobe Animate and guided us through the steps to animate its movement. We learned how to make the spider move up and down smoothly, giving it a realistic crawling effect. This exercise helped us understand how to combine drawing skills with simple motion techniques in animation.

Fig 1.3 Spider

My Spider Animation:

https://anzacutespider.netlify.app/

Week 4

Mr. Shamsul demonstrated how to create an interactive button in Adobe Animate and taught us how to apply actions to it. He walked us through the steps of designing the button and then showed us how to add actions, such as linking it to specific functions or animations. This exercise helped us understand how to use buttons to create interactive elements in our projects.

Fig 1.4 Enter Button

Fig 1.5 Enter Button Animation

---

⋆ ˚｡⋆୨୧˚ Task 1: Thematic Interactive Website Proposal ˚୨୧⋆｡˚ ⋆

Ideation

Initially, I explored some of my favorite brands, such as Lego, YSL, JellyCat, Fujifilm, and Inside Scoop. I then researched various websites for inspiration, particularly focusing on award-winning sites, to gather ideas on how to approach thematic website design.

Inspiration Websites:

• https://thefwa.com/
• https://www.awwwards.com/
• https://winners.webbyawards.com/winners/websites-and-mobile-sites

First Ideation of Topics

I then selected a few topics that genuinely interested me and shifted my focus to develop more interactive website concept based on these ideas and compiled them into a slide proposal for further consultation with Mr Shamsul.

First Draft Proposal

Final Proposal

Inside Scoop Proposal 

---

⋆ ˚｡⋆୨୧˚ Feedback ˚୨୧⋆｡˚ ⋆

Week 1

Mr Shamsul was not in Malaysia thus we do not have lesson.

Week 2

I have showed Mr Shamsul commented my draft proposal was okay and references was good and recommended me to proceed with local brand Inside Scoop.

Week 3

I have showed Mr Shamsul my proposal and he suggested can use local brand Inside Scoop and try not to make the wireframe too difficult like 3D as it would be hard for beginners.

Week 4

Mr Shamsul suggested that my proposal can be more interactive in the sundae make page.

---

⋆ ˚｡⋆୨୧˚ Reflection ˚୨୧⋆｡˚ ⋆

Creating a thematic interactive website for Inside Scoop has been an exciting and rewarding journey for me, even though I've only completed the wireframe stage. At first, I had numerous ideas, but they seemed difficult to execute and Mr Shamsul said it is better to do what we are capable of. As a long-time fan of Inside Scoop's ice cream, I was eager to choose it as the focus for my project. While my current proposal still has some uncertainties and room for improvement, I’m committed to using my time to explore new ideas and refine the design. I’m excited to see how the final product will turn out.