Advanced Interactive Design / Final Project

Advanced Interactive Design / Final Project

-

Week 9 - Week 14
Chen Nan / 0363533
Advanced Interactive Design / Bachelor of Creative Media / Taylor's University
Final Project

Final Project / Thematic Interactive Web Application

Instructions

Website page layout design

During the task, I finished some page design, and next, I used AI to sort out my page layout again.

Fig. 1 Adobe Illustrator

Animation

I started putting the page into the Animation. I first made a Loading page. I used a page turning animation of a book as the loading page, which added story to the page.

Fig. 2 Loading Animation

Then I started making the landing page. Instead of typing in a password, I used an "Action" button to make it easy to understand. I also made the avatar shake and loaded the page with a snowflake effect. This adds flexibility and interest to the page.

Fig. 3 Landing Animation

After that, there's the menu page where I put the option on the shelf and when you click on it, the book will light up. On the right side of the page, you can click on the blank space of the page, and a text will appear to introduce the game.

Fig. 4 Home Page Animation

Next is the sub-page (character skills), where you can click on the character in the box to switch between them. When you click on the character, the character's picture will be enlarged to fill the entire screen, and its weapon will shake.

Fig. 5 sub page Animation

Next, in this interface is the character introduction interface. I set buttons for each role, and you can click the buttons to change the roles. In the lower left corner there are pictures of them in the game, which can be clicked to open. At the same time, I added some fluttering black smoke in the background of the page to increase the atmosphere of the page.

Fig. 6 sub page Animation

Finally, I tested whether the web page could be opened.

Fig. 7 Test

OUTCOME

Netlify Link: You need to wait for a while to open it.

https://godofwarchen.netlify.app/

Google Drive Link:

https://drive.google.com/drive/folders/1keOKRf6AE1keN8UyFL1v9JpNm-Mk0C8U?usp=drive_link

Video Link:

https://youtu.be/wVPhaEWdQw0

Feedback

• It makes the boat move, similar to landing.
• Add a little smoke effect.
• Make the characters move and look very stiff.
• At least one of these images in the lower left corner needs to open, otherwise it becomes meaningless.

Reflections

For the advanced interaction design in this semester, I feel very difficult. I am not proficient in interaction design and animation special effects techniques. However, after Mr. Razif Mohamed's guidance and demonstration of some examples, in general, I still learned a lot of knowledge, including the production of web pages, the production of key animation, and page interaction. These are of great help to my design career.