21/10/25 - 16/11/25 (Week 5 - Week 9)
Nadhrah binti Abdul Razak / 0359620 / Bachelors of Design (Hons) in Creative Media
Advanced Interactive Design
Task 2 - Interaction Design Planning and Prototype
Task 2 - Interaction Design Planning and Prototype
.jpg)
Table of Content
- Lectures
- Instruction
- Task 2: Interaction Design Planning and Prototype
Lecture
Instruction
Task 2: Interaction Design Planning and Prototype
For this assignment, we are required to make a prototype on Figma based on our chosen theme. As I have chosen Valorant as my topic, I started by browsing through images that I can use for my website.
First, I looked for pictures I could possibly use for my website's background. I laid down a few options and chose the one I thought suited my theme the most.
Fig 1.1
After some time, I decided to use image number 1 as my loading page, but I needed to tweak it a bit so that it complements well with my website, so I redesigned it on Adobe Illustrator.
Fig 1.2
I tried to play around with another background too which is Valorant's Lobby page, but I think I'm still going to stick with the initial image I have chosen.
This is what the finalized background looks like:
Fig 1.3, Loading page background image
Fig 1.2
I tried to play around with another background too which is Valorant's Lobby page, but I think I'm still going to stick with the initial image I have chosen.
This is what the finalized background looks like:
Fig 1.3, Loading page background image
As I was designing the loading page, I thought it would be a cool idea to have the bullets act as the loading bar. So, I designed a bullet icon that I can incorporate to my design in Adobe Illustrator. I also redesigned the Valorant logo a bit to add a more prominent shadow. This logo will also be used for my loading page.
Fig 1.4, loading page icons
After having all the elements needed for my loading page, I started designing it on Figma.
Fig 1.5, loading page process
Fig 1.4, loading page icons
After having all the elements needed for my loading page, I started designing it on Figma.
Fig 1.5, loading page process
For the landing page, I decided to use the same background I used as my loading page as I think they all go together. But I replaced the text to "ENTER THE RADIANT ARCHIVES" and changed the icon to a "START" button.
Fig 1.6, Landing page
For my homepage, I wanted it to have a clean look so I designed it in a way where it looks neat. For the background image, I took from one of the loading page options. I also added an image of some of the agents as a visual for the home page.
Fig 1.7, home page image
Final Figma Wireframe
Final Figma Prototype
Video Presentation
Fig 1.6, Landing page
For the start button, I was inspired by Valorant's "start' button in their lobby, so I decided to use the same button since it can make users feel more immersed as if they're playing the game on the website.
For my homepage, I wanted it to have a clean look so I designed it in a way where it looks neat. For the background image, I took from one of the loading page options. I also added an image of some of the agents as a visual for the home page.
Fig 1.7, home page image
Final Figma Wireframe
Final Figma Prototype
Video Presentation
Reflection
Experience:
Observation:
FIndings:
Comments
Post a Comment