Advanced Interactive Design: Task 02

WEEK 12 - WEEK 16 (19/06/2023 - 18/07/2023)
Adena Tan Sue Lynn (0345769) / Bachelor of Design (Honours) in Creative Media
Advanced Interactive Design
Task 02

---

DIRECTORY

• Instructions
• Final Submission
• Reflection

---

INSTRUCTIONS

Planning the Website

First, to start off this project, I decided to create a website for a fictional campaign I did, Daily by Laka. I planned out the pages I wanted to include by listing them down and planning them in Adobe Illustrator.

Figure 1.1.1 Noting Down Pages To Do

Figure 1.1.2 Designing Website Pages

Below are the final pages for the website.

Figure 1.2.1 Daily by Laka - Welcome Page

Figure 1.2.2 Daily by Laka - Products Page

Figure 1.2.3 Daily by Laka - Resources Page

Figure 1.2.4 Daily by Laka - Menu Page

Figure 1.2.5 Daily by Laka - Contact Page

Adobe Animate Process

Before starting, I studied a few tutorials and websites to get a bit more knowledge of how to create the website I desire. Below are the few tutorials I referred to:

• Learn how to create an interactive infographic using Adobe Animate
  
• Create an interactive map in Adobe Animate
  
• Learn how to create a HTML5 expandable banner using Adobe Animate
  
• Tips for Writing Animation Code Effectively
  

For the code, I utilised gsap and mainly focused on Adobe Animate's animation features. 

Figure 1.3.1 Animating Flowers

Figure 1.3.2 Animating Buttons

Figure 1.3.3 All Pages

Figure 1.3.4 GSAP Script

Figure 1.3.5 Full GSAP Script Used

Uploading

After I was satisfied with my previews and work, I tested it by using the Simple Web Server application that was recommended by Mr Razif. Following that, I proceeded to upload to Netlify

Figure 1.4.1 Simple Web Server Application

Figure 1.4.2 Uploading to Netlify

---

FINAL SUBMISSION

Netlify Link: https://adenatansuelynn-advintdesign.netlify.app

Video Demo:

Figure 2.1.1 Video Demo

---

REFLECTION

Overall, I would say this task proved helpful to me. Although I struggled with figuring out how websites would be built with a stricter canvas, I was able to use that restriction to try and build a website that felt different from the ones I usually design for my other classes. This project has definitely made me more accepting to the process, and keep on trying even when my website wasn't going the way I expected. It has taught be perseverance in trying to learn new things which I am very grateful for!