Advanced Interactive Design - Task 2: Interaction Design Planning and Prototype

23/5/2024 - 13/6/2024
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
DST 60804 / Advanced Interactive Design
Task 2

---

Task 2: Interaction Design Planning & Prototype

Process

I utilized Figma to plan out my wireframes for the interactive website. As per the proposal from Task 1, I broke down the website content into 4 major sections:

• Home/Landing Page
• Pre-Order Menu
• Story Abstract
• Characters

This website aims to hook new players into the world of Death Stranding, getting introduced to its franchise and appeal them into buying the game. The focus lies in providing an immersive experience that amazes players about the visual cinematography of this game as well as presenting surface level narrative descriptions to intrigue players into finding out more.

The layout is planned to match the minimalistic but futuristic design style of the UI elements inside the game. I kept the UI relatively simple and refined as the main focus is to enhance it with interactive animations later on in Task 3.

Fig 1.0 - Figma Wireframes Preview

Fig 1.1 - Landing Page Design

The main idea behind this landing page design is to focus the user's attention with a strong title while implementing the use of contrast between strong hero image and minimal UI design for the main grasping point being the title and hero image to stand out. Additionally, the Pre-Order button is emphasized in the menu, one in the middle of the screen below the title text and another on the top right corner to entice users to buy the game after seeing what is in store for them.

Users can also click left and right to progress through the slideshow displaying more cinematic photos of the world of Death Stranding.

Animation plan: transitions from one slideshow to the next periodically with a smooth slide effect

Fig 1.2 - Pre-Order Menu

The Pre-Order menu provides a simple description of the events of the game while having the Pre-Order button in bright yellow to signify it to the user that this button is clickable, that it wants to be clicked. Additionally, a few game platform symbols are added to convey that the game can run on them.

Animation Plan: Simple slide-in of title, text, and icons into the screen with a shine effect on the button increasing its affordance through signifying it.

Fig 1.3 - Story Abstract Menu

This menu provides exposition about the terminologies and concepts present in the world of Death Stranding. Each page consists of a background image, title, description, and cards that directs users to other expositions. The cards have effect when hovered over, and clickable which transitions users to its exposition screen. Users can also use the arrow icons to progress through the selections from either left or right. 

Animation Plan: Enhance the hover effect by having it animate with wavy effect on the black box. Transition through clicking arrows will have a stretch and slide effect.

Fig 1.4 - Character Introduction

This menu provides description into the background of characters in Death Stranding. Other than the description and title name, it is paired with a strong hero image of the character as well as 2 additional images to provide a visual representation of them, as well as intrigue the user to learn more about them through their visual design. The current animation effect is multiple slide in animations on the title text, description text, hero image, sub-images, and graphic elements. This animation activates when the user enters the character introduction page for that character.

Animation Plan: Use different transition animation for each character introduction page when clicking the arrow button by changing the way the title text, description text, hero image, sub-images, and graphic elements transition into the screen.

Fig 2.0 - Figma Wireframes Workspace

Fig 3.0 - Video Presentation