Advanced Interactive design-Task 2/Interaction Design Planning and Individual Prototype

June 21, 2024

Advanced Interactive design-Task 2/Interaction Design Planning and Individual Prototype

Start From 15.5.2024

22.5.2024 - 26.6.2023/Week 5-Week 10
Kong Cai Yi / 0363862
Advanced Interactive design / Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Planning and Individual Prototype

INDEX

Lectures
Task 2/ Interaction Design Planning and Individual Prototype
Feedback
Reflections

LECTURES

Week 6/Adobe Animate (Exercise 3 part 1)

In week 6, we learned how to animate text and apply effects to make it more engaging. We worked with the phrase "Welcome to Advanced Interactive," using a mask effect to make the words disappear downward and then reappear. Additionally, we explored text effects to enhance the word "Interactive."

Fig 1.1 Exercise 3 in adobe animate (29.05.2024-Week 6)

Click this link to view exercise 3

file:///Users/caiyi/Downloads/Exercise%203.html

Week 7/Adobe Animate (Exercise 3 part 2)

In week 7, we continued with the tasks from the previous week. Mr. Shamsul taught us how to apply buttons and actions using Adobe Animate. The buttons allow the audience to navigate to another page when clicked, which is very useful for our project.

Fig 1.2 Exercise 3 in adobe animate (5.06.2024-Week 7)

Week 9/Adobe Animate (Exercise 3 part 3)

This week, we will create a new page for Menu 01. Once we add an action to the menu bar, it will navigate to this page. We will also add a return button to navigate back to the home page. Mr. Shamsul has given us 1 hour to independently create the Menu 02 page.

Fig 1.3 Exercise 3 in adobe animate (19.06.2024-Week 9)

Fig 1.4 Exercise 3 in adobe animate (19.06.2024-Week 9)

Click this link to view exercise 3

http://127.0.0.1:8090/Exercise%203.html?40376196

Week 10/Adobe Animate (Exercise 4)

INSTRUCTIONS

Task 2/ Thematic Interactive Website Proposal

Instructions:

Students are required to work on their visual design and start planning their website’s interactive design elements and features.
Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference.
Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements:

Walkthrough Video presenting the plan and showing the animation examples and/or references.
Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)

Week 7 & 8/ Design Planning

I started my task 2 prototype using Figma, but while doing some research I found out the some inspiration which is old computer aesthetic is quite interesting, so I decided to add inside my moodboard.

Fig 2.1 Prototype using Figma (5.06.2024-Week 7)

Fig 2.2 Moodboard (12.06.2024-Week 7)

Sample of Animation

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.