INSTRUCTIONS
TASK 2 - Interaction Design Planning and Prototype
We are required to work on their visual design and start planning our website’s interactive design elements and features. Our plan should include the layout visuals and the animation example or reference.
Task 1 Proposal:
Loading Page
The icon of the game flickers and then moves to the left for the game heading to appear. After the animation is done playing, the loading sequence slides in and shows at what percentage loading the user is at. Animations are made in Adobe Animate.
 |
| Flickering |
 |
Loading Percentage |
Home Page
After it is done loading the user will be at the Home Page. The visual is a monitor with flickering screens. When hovering over the screen it will expand and show the user what page will it navigate them to. Animations are made on Figma.
 |
| Components |
Transitioning to other Page
There will be a short animation that plays when transitioning to another page. It will indicate which page the user is going to. The animation would push the current page away and the new page will fade in at the back. Animation made on Adobe Animate.
Introduction Page
The animation for visiting the Introduction Page will be similar to the starting screen in the game itself.
 |
| Introduction Page |
The image of the game icon would flicker occasionally, flipped horizontally or vertically, and glitch to a different colour.
 |
| Icon Colour |
Scrolling down there will be more information about the game. The image on the bottom right will alter to different images.
Character Page