Advances Interactive Design/TASK 2 Interaction Design Planning and Prototype

 

20.4.2024 -14.5.2024 (Week 5 -Week 8)


Ye Xinyan / 0355096
Advances Interactive Design

TASK 2- Interaction Design Planning and Prototype

---

Instructions

<iframe src="https://drive.google.com/file/d/1XrrYHW6-sL93XXHP1ioKl2dpPg7uV_vs/preview" width="640" height="480" allow="autoplay"></iframe>

---

TASK 2 Interaction Design Planning and Prototype

Based on further research, I made some changes based on task 1. In order to make my website have a better visual effect, I added some animations. 

Final present ppt

<iframe src="https://drive.google.com/file/d/10OaqTO_w9PLIJV3rL52-JFfFiWfUTidM/preview" width="640" height="480" allow="autoplay"></iframe>

Fig 1.1

Final present ppt

Canva Link:

https://www.canva.com/design/DAGFSpvXLEw/jSocLBO7bJTu5taAEISonA/edit?utm_content=DAGFSpvXLEw&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

I started creating my user flow and wireframe. I used Adobe Illustrator to develop a high-fidelity wireframe and Figma to create my user flow. I then used Figma to import my wireframes and start working on the prototype.

Fig 1.2

Create User Flow

Fig 1.3

Wireframe in Adobe Illustrator

Fig 1.4

Prototyping

Upon finishing my user flows, wireframes, and prototypes, I created a film that elucidated my website design and animation.

Fig 1.5

Final presentation video

Final presentation video link:https://youtu.be/x7FL03PsFTE

Fig 1.6

Final user flow

User Flow Link:

https://www.figma.com/board/mlfeoRdjtfV5msbH9qLNfN/Untitled?node-id=0%3A1&t=juV7YtHKCBxbcsUJ-1

Fig 1.7

Wireframe & Prototype

Wireframe & Prototype Link:

https://www.figma.com/design/Eq9gIpyzooybiJV1BTm2tz/Untitled?node-id=0%3A1&t=xa7IWaL1fjwiYbiw-1

---

Feedback

• Ideas are fine but please be aware of copyright issues.
• The return page icon is more like the home page icon. If there are too few icon elements, it is recommended to add more.

---

Reflections

Let the storyline guide users to browse and stay on the website. I think designing a website for something that interests you is a very interesting process.Mr. Razif Mohamed's timely guidance made me realize that my button arrangement was unreasonable.