Advanced Interactive Design Task 2

ADVANCES INTERACTIVE DESIGN/TASK 2 INTERACTION DESIGN PLANNING AND PROTOTYPE

25.4.2024 - 19.5.2023 (Week 5 - Week 8)

Chen Nan / 0363533

Advanced Interactive Design / Bachelor of Design (HONS) in Creative Media

INSTRUCTIONS

TASK 2 Interaction Design Planning and Prototype

In task 1, I have preliminarily established my prototype, but it is not perfect in web animation. I changed some of the animation effects.

Figure 1.1 landing page

I enlarged and changed the shape of the login button so that it fits into the background. And change the original flipping effect to zoom in.

Animation example:

1.https://pin.it/33sIzSmNr

2.https://pin.it/2t3oh7XG5

Figure 1.2 home page

On the home page, I added menus and gave each menu a box. This allows you to see each item clearly and then click on it to go to the next page. I also added a text introduction to the game on the right side of the page, which will appear slowly when you click on the page, adding to the mystery.

I've added a back button to the document, and this back button is going to bounce, and it's going to flicker.

Animation example: https://pin.it/9kB6U0GGR

There were other animations that I re-selected.

Sample Animation

Figure 1.3 Sample Animation 1

Figure 1.4 Sample Animation 2

Figure 1.5 Sample Animation 3

Figure 1.6 Sample Animation 4

Animation link:

1.https://pin.it/64RkS79Wj

2.https://pin.it/24nqfGAGR

3.https://pin.it/6gaSe975G

4.https://cdn.dribbble.com/users/784152/screenshots/5323966/media/3f08cf386222b12942c259e3c26aadbe.gif

I made a flow chart based on the picture I wanted to introduce.

Figure 1.7 User Flow Chart

I reworked some prototypes in the AI software.

Figure 1.8 Prototypes in Adobe Illustrator.

Wireframe :

Figure 1.9 Wireframe 

Link:
https://www.figma.com/design/Ou7hAUB2sd9mKBsBokoVMJ/Untitled?node-id=0-1&t=x6PhGmttA9S7g2v0-1

Prototype :

Figure 1.10 Prototype 

Link:

https://www.figma.com/proto/Ou7hAUB2sd9mKBsBokoVMJ/Untitled?node-id=1-8&starting-point-node-id=1%3A8&show-proto-sidebar=1&t=MMB69l1MapC6na8E-1

Final Submission

Storyboard PDF

Presentation video

Reflection

In this task, I looked for many examples of visual elements. There are so many cases for me to refer to on the Internet that I have been confused by them. I don't know exactly what I want to do with my website, I have been thinking about what animation should be designed to match the visual elements of my web page. After my patient research and reference, I finally found the elements I wanted.

Secondly, in the visual style of web design, I always find it difficult to unify them, which is a big weakness of mine, I should focus on thinking about it.