Advanced Interactive design- Final Project/ Completed Thematic Interactive Website

Start From 24.7.2024

19.6.2024 - 31.7.2023/Week 9-Week 14
Kong Cai Yi / 0363862 
Advanced Interactive design / Bachelor of Design (Hons) in Creative Media
Final Project: Completed Thematic Interactive Website

---

INSTRUCTIONS

Final Project/ Completed Thematic Interactive Website

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.

1. Upload the website to a web server.
2. Online posts in your E-portfolio as your reflective studies
3. Make sure to embed or provide a link to the website and the video from the blog post.

Week 9/ Wireframe & Prototype 

This week, I finalized my prototype design and created a wireframe. I have included all my ideas in the presentation slides. I changed the background color to a gradient to make it look more colorful and aesthetic. Other than that, all designs are similar to the sketch I created in Task 1. I found many Instax model photo online, removed the background, and incorporated it to make the design look more realistic.

Fig 2.2 My website Prototype (19.06.2024-Week 9)

Fig 2.3 Wireframe of my website(19.06.2024-Week 9)

Prototype Link :https://www.figma.com/design/WtlwWBEwkVZvGnyKEUjiGC/Task-2?node-id=0-1&t=vH1Ivwghtejvybi2-1

Wireframe Link: https://www.figma.com/proto/WtlwWBEwkVZvGnyKEUjiGC/Task-2?node-id=35-133&t=DQmUI7FqnS3dryMr-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=35%3A29

Click here to view Moodboard 

Fig 2.4 Task 2 Slides(19.06.2024-Week 9)

Week 11/ Task 2 Consultation 

This week we have a consultation with Mr Shamsul to discuss about our task 2 thoughts and progress. We are allowed to choose either Monday or Wednesday with different slots. I have chosen Monday (9:20AM- 9:40 AM)

Fig 2.6 Task 2 Consultation Announcement (3.07.2024-Week 11)

Week 12/ Visual Design in Adobe Illustration 

This week after consultation with Mr Shamsul, we are required start our design in adobe illustration/ animate.  I use pen tool and shape tool to create old computer aesthetic that fit my theme and the style I like. 

Fig 3.1 Adobe illustration (10.07.2024-Week 12)

Since I want to input a scrolling effect on this page, Mr. Shamsul suggested overlaying every color of the model (same size) together to make it easier for me to proceed to the next step.

Fig 3.2 Adobe illustration (10.07.2024-Week 12)

Fig 3.3 Overall Design (10.07.2024-Week 12)

Fig 3.4 Final Design (12.07.2024-Week 12)

Fig 3.5 Final Design-Home Page (12.07.2024-Week 12)

Fig 3.6 Final Design- Film showcase (12.07.2024-Week 12)

Fig 3.7 Final Design- About Page (12.07.2024-Week 12)

Fig 3.8 Final Design- Model Showcase (12.07.2024-Week 12)

Fig 3.9 Final Design- Colour Showcase (12.07.2024-Week 12)

Fig 3.10 Final Design- Contact (12.07.2024-Week 12)

Week 13/ Adobe Animate

This week, I imported my AI file into Adobe Animate and converted all the buttons to symbols to enable action scripting. Additionally, I added a classic tween to the film button to create an effect of an Instax film coming out.

Fig 4.1 Start animate in Adobe Animate (17.07.2024-Week 13)

Fig 4.2 Home Page button (17.07.2024-Week 13)

The film showcase page is designed as a special section for the audience to see the beautiful film photos that the Instax 12 can produce. Therefore, I used the INSTAX logo button to navigate back to the home page instead of a traditional cross button.

Fig 4.3 Add action to "Instax" button (20.07.2024-Week 13)

Since the about page requires some descriptions, I added a write-on effect to the paragraphs to make it more engaging, along with alpha transitions. For the model display, I applied a classic tween so that it appears from different directions when the audience clicks on the page.

Fig 4.4 Learn to create writing effect from YouTube  (20.07.2024-Week 13)

Fig 4.5 Apply writing effect  (20.07.2024-Week 13)

Fig 4.6 About Page- Classic Tween for INSTAX model  (20.07.2024-Week 13)

Week 14/ Final Thematic Interactive Website

This week, I still have some pages under development. For the colour display, I created a scrolling effect by watching a tutorial on YouTube. I found it to be easier than I expected, as it mainly involves utilizing a mask.

Fig 5.1 Colour Page- scrolling effect  (24.07.2024-Week 14)

Fig 5.2 Colour Page- scrolling effect tutorial (24.07.2024-Week 14)

For the contact page, I have added an external link to the INSTAX official website, providing more information about this product model. This allows the audience to have additional references and explore further if they are interested.

Fig 5.3 Contact Page (24.07.2024-Week 14)

While publishing my final interactive website, I have faced issue, which is when I test my video can access all the button actions, but the actions fail when you publish and view the HTML.

Fig 5.4 Publish to HTML Format (24.07.2024-Week 14)

Final Thematic Interactive Website

Google Drive to access adobe animate fla file: https://drive.google.com/drive/folders/1uyFnZ504NV4nNkS-PI1NB3WUOsIjZEPk?usp=sharing

Recording:

Fig 5.4 Final Thematic Interactive Website Recording (03.08.2024-Week 15)

---

FEEDBACK

Feedback from Mr Shamsul

WEEK 10: 

• Start my website design in adobe illustration or animate, make different layers if I want to animate that button.
• Make my computer more aesthetic and create deferent shadow to make it look like more reality.

WEEK 11: 

• Adobe Animate doesn't support gradient, is either I download it as PNG or change to more simple colour dynamic.
• Copy the same size of Instax model pictures and overlay it to create scrolling effect in adobe animate.
• Start to import my design in adobe animate.

---

REFLECTIONS

Findings

In the beginning, I found it challenging to keep up during lectures, especially with many online classes. I was always trying hard to follow the teacher's pace but didn't have time to think about the reasons behind everything. When I started working on it myself, I began to understand the principles behind many things and made adjustments on my own. I also recalled and applied the knowledge from the teacher's classes.

This module has been incredibly beneficial for me. From knowing nothing about using Adobe Animate at the beginning, to having the lecturer teach us various effects and actions step by step, along with different exercises to gradually master them, it's been a fulfilling journey. Seeing my final project come to life gives me a great sense of satisfaction. Initially, it was just a proposal and prototype design, but I never imagined that I would actually complete it step by step. Overall, this module has taught me a lot. Working on a product I love has been immensely satisfying and joyful.