Advanced Interactive Design

13/05/2025 - 10/06/2025 ( Week 4 - Week 8)

Lam Hui Zhen / 0374770

Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media / Taylors University

Advanced Interactive Project 2

Instructions
Project 2

Instructions

Fig 1 Module Info Booklet Advanced Interactive Design pdf

Project 2

During this project student are required to decided their overall animation of the website, create the detailed wireframe and come with a prototype.

Based on my website's theme, I’ve decided to use a black cat as the main element. Users browsing the site will explore hidden corners of the world through the perspective of an insomniac black cat, while also learning about the topic of insomnia.

Fig 2 Project 1 Visual Reference

Based on my previous visual reference and art direction. I started to look for more visual reference on Pinterest before I create my illustration. After this I start create the illustration follow my wireframe. At the same time I also decided the page transition between each pages and also the animation on each pages.

Fig 2.1 Pinterest Reference

Fig 2.2 Draft of Each pages

After done with the Draft I start to work in Illustrator to crate a proper elements and webpage

Fig 2.3 Progress In Illustrator

Fig 2.4, 2.5, 2.6 Some of the Outcome

All the image are done by using Illustrator, some of the picture are original created by me and some of them I get reference form Pinterest and make some minor changes on its.

After this I put all my Image into Figma to see overall flow of the webpage.