Advanced Interactive Design / TASK 2: INTERACTIVE DESIGN PLANING & PROTOTYPE

WEEK5-WEEK8

NAME: JIN RONG

I.D: 0361701

COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media

Advanced Interactive Design - TASK 2: INTERACTIVE DESIGN PLANING & PROTOTYPE

INSTRUCTION

LECTURES

WEEK5

WEEK6

WEEK7


TASK 2: INTERACTIVE DESIGN PLANING & PROTOTYPE

Introduction:

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




User Flowchart

User Flow Overview

VALORANT Agent Promo Website – User Flow Overview

1. Character Overview Page – AGENTS Overview Page

Purpose:

Display all agent characters and guide users to explore different tactical styles and personality settings.

User Operation:

Click any character card → Change background color

Click more icon → Go to detailed information page

2. Agent Detail Page – Agent Information Page

Purpose:

Introduce the background, skills, positioning and visual style of each agent to enhance the sense of substitution.

Interaction Process:

User Operation:

Video Area: Click to play character skill animation (zoom + transition effect)

Skill Area: Click skill icon → Switch sample animation

Click character → Go to poster visual page

3. Visual Gallery Page – Poster Visual Page

Purpose:

Display high-precision illustrations/battle posters of agents to enhance the charm of characters.

Interaction Process:

User operation:

Click the thumbnail on the left → switch roles to view related posters

Slide the paging point at the bottom → switch different posters

Click the back arrow → return to the home page


I started making my wireframe in figma. I did it page by page, while deciding what animations and transitions each page would contain.





I designed the components


Created loading page, loading animation, and completed page connection in Prototype

My materials come from the official website of Valorant and pinterest



Prototype Overview




















评论

发表评论

此博客中的热门博文

Application Design II / Task 1

图片
WEEK1-WEEK4 NAME: JIN RONG I.D: 0361701 COURSE: Application Design II  / Bachelor of Design (Honors) in Creative Media Application Design II / Task 1 INSTRUCTION Week 1  To Do List  Get analysis feedback from GPT, prompt out all the pros and cons based on your app MVP features. Update blog Communicate with ChatGPT ✅ Highlights (good things) Consistent visual style: color matching and font usage are consistent, in line with Jakob’s Law (users expect the interface to follow a familiar pattern). Clear layout: the screen is divided reasonably and has a good hierarchical structure, in line with the Gestalt Law of Proximity (related elements are close together). Intuitive icon use: icons are intuitive, which helps speed up user understanding and reduce cognitive burden (in line...
阅读全文

Game Development / Task 1 Game Design Document

图片
Week 1 - Week 7 JIN RONG / 0361701 Game Development  / Bachelor of Design (Hons) in Creative Media Task 1 - Game Design Document INSTRUCTION Task 1 Game Design Document In Week 1, Chai Wee Yi and I teamed up. Our task was to brainstorm and come up with initial ideas for multiple games. We each shared our favorite game types and experiences, and then had a group discussion to select the most promising concept. We decided to focus on "high-difficulty platform jumping games" because we believe that such games are challenging and can bring a strong sense of achievement. At the same time, we also hope that the game can have a certain emotional exp...
阅读全文

Information Design - Exercise 01: Quantifiable Information

图片
WEEK1-WEEK 7 NAME: JIN RONG I.D: 0361701 COURSE: Information Design / Bachelor of Design (Honors) in Creative Media GROUP: Class 01 Sec 04 Information Design - Exercise 01: Quantifiable Information INSTRUCTION Exercise 1 - Quantify & Visualize Data  For this exercise we supposed to quantify our chosen items and arrange the objects into a presentable layout or chart. I decided to go with fluffy color deco balls. I started by sorting them based on their colors and then arranged them in order of their quantity and condition on the A3 paper.  Fig1.1 Sorted out according to colours Feedback: The number of buttons is a little small, you can get more I started by arranging them in order of their quantity on an A4 sheet of paper. Then I start to finish and finalize my ideas Exercise 02 - L.A.T.C.H. In exercise 2, we have to organize a group of information int...
阅读全文