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

1. Homepage
Click the "Book a Service" button → Service Reservation Page
2. Pet Profile Page
View pet cards
Click a pet card → Edit Pet Info Page
Click "+ Add New Pet"
3. Service Reservation Page
Select a date
Map shows the location of the caretaker's avatar
Click the caretaker's avatar
4. FAQ Page
Browse category navigation (such as: booking process / service description)
Click the question → Expand to display the answer
Click the "Pet Question Mark Assistant" in the lower right corner → Pop-up window for recommended questions
5. User Evaluation Page
Browse other user reviews (illustration + pet avatar)
Hover the review → Micro-zoom animation feedback
Click the paw print "Like" button
Click "I want to leave a message"


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


Line Art


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...
阅读全文

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...
阅读全文

Information Design - Project 1

图片
  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 - Project 1 Part 01: Infographic Poster Instructions 1. Choose 1 infographic poster reference from Internet (Please consult before proceed) 2. Redesign the poster into A4 size. Sketch the idea and process 3. Redesign and simplify the poster based on visual hierarchy & typography 4. Simplify the poster's design based on color, shape & pattern 5. Attach your final poster on E-Portfolio with explanation and reflective writing Chosen Poster After deciding between a few posters, I proceeded with this infographic poster  Digitisation process COLOR I chose a color scheme dominated by blue and teal because they effectively convey the purity and tranquility...
阅读全文