Jason Antony (0356335)

Jason Antony 0356335 BDCM Advanced Interactive design Task 2 Interaction Design Planning and Prototype Instructions Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static websites, 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 creating the plan. (i.e.: Figma link, Miro link, etc.) Figma Link https://www.figma.com/design/fVuPKaeP4tDDYttwJfe7kn/Voodoo-Creatives?node-id=0-1&t=c8DXFPBCStPI1hiU-1 I finished my prototype in Figma without animations before moving to Adobe Animat

 Jason Antony 0356335 Application Design 2  Project 2 - Interaction Design Planning & Prototyping Figma File Link https://www.figma.com/design/3DIrsrX2Xyehzj8ngmRdoh/App-Design-2-Task-2?node-id=0-1&t=bKK2rsJpNr1DQNdS-1 Animation Flowchart Landing Page Ad to home page is done using dissolve fade in The Rest of the transitions will be done using slide in and out for the MVP Pages to maintain a consistent animation style throughout the pages. The transaction and payment methods feature a slide up animation. this seamless transition for the payment page is seamless and natural.  lastly, to access the barcode for active tickets, i used fade in dissolve and fade out animations since slide in or out doesn't make sense for this part. The flowchart is made for a linear progression flow, which is natural and decreases cognitive load.  Video Presentation https://youtu.be/MuSXsPaQBr8