To Do:

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:

1. Walkthrough Video presenting the plan and showing the animation examples and/or references.

2. 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.)

My first figma prototype was created during Task 1 when I was creating the wireframes, as I thought that designing with colours will be a much more easier start compared to black and white. But the problem here is that I misunderstood the usage of Adobe Animate. I thought that we are creating a vertical scrolling website, but turns out to be actually website which switches between a few screens, as scrolling website wouldn't be so comfortable to do in Animate. 

There is no other way but to redesign my figma prototype.

In my second prototype, I redesigned it to become single screens for every section. The nav bar at the top would be used to navigate through the different screens. I was more satisfied with this design as it is clean and nice. So I proceeded with the animations and transitions in figma.