Advances Interactive Design/TASK 1-THEMATIC INTERACTIVE WEBSITE PROPOSAL

 

25.4.2024 -19.5.2024 (Week 1 -Week 4)
Ye Xinyan / 0355096
Advances Interactive Design

TASK 1-THEMATIC INTERACTIVE WEBSITE PROPOSAL/ Bachelor of Design (Honours) in Creative Media

---

Instructions

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

---

Task 1-Thematic Interactive Website Proposal

Task 1, we need to make a website proposal for a project that interests us. I'm passionate about Disney, so I'm going to make a Disney website proposal.I started thinking about my home page and I tried to find some inspiration and made a Mood board.

Fig 1.1

Mood board

From my mood board, I got some inspiration and I planned to make the Home page look like a map. I started thinking about the details of my website. For my website, I hope that I can freely click on the project introduction and view it from left to right according to the park.

Sample Animation 1:https://www.pinterest.com/pin/1052364637914734944/

Sample 2:https://www.pinterest.com/pin/12736811440268263/

I proceeded by creating slides to show my ideation and proposed it to Mr. Razif.

Fig 1.2

Creating Proposal

After getting approval, 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.3

Create User Flow

Fig 1.4

Wireframe in Adobe Illustrator

Fig 1.5

Prototyping

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

Final Submission

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

Fig 1.5

Final presentation slides

Fig 1.6 

Final presentation video

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

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

Fig 1.7

Final user flow

User Flow Link:

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

Fig 1.8

Wireframe & Prototype

Wireframe & Prototype:

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

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.