Advanced Interactive Design: Thematic Interactive Website Proposal

20/4/26 - 14/6/26 (Week 1 - Week 8)

Choong Yee Leng || 0381980

Advanced Interactive Design || Bachelor Degree in Creative Media || Taylor’s University 

Task 1: Thematic Interactive Website Proposal

TABLE OF CONTENT

1. Instructions

2. Work Process

3. Submission

4. Feedback

5. Reflection 

INSTRUCTIONS

Document 1.1 Module Information

WORK PROCESS

Before starting the proposal writing, I developed three initial ideas with rough mood boards to explore different directions. After reviewing the concepts, I found that Idea 3, The Italian Renaissance, had the greatest potential to create a strong and engaging theme. The proposed ideas are shown below:

proposing theme by yee leng

Before beginning the design process, I did research to explore visual styles, page structures, and transition effects. 

Pinterest board: https://pin.it/1cMJFddBp

Figure 2.1 Pinterest board

The wireframes were then developed in Adobe Illustrator which allows me to experiment through different layouts and compositions.

Figure 2.2 Wireframes in Adobe Illustrator

During feedback, Mr. Shamsul suggested that the "back" icon can be refined into a 90-degree shape.

Figure 2.3 Icon refinement

The prototype is carried out in Figma. All the animation, transitions and button effects included can be viewed in the prototype.  

Scrolling animation in homepage tutorial: https://youtu.be/wCi14CPfb4A?si=gN6IgikK9MxrMiys

Figure 2.4 Figma Prototype

SUBMISSION

Proposal Slides: https://canva.link/hkoq5abbudrh1l9

Prototype View: https://www.figma.com/proto/6rTf1IZVMyPFLVfok0z5kW/The-Italian-Renaissance--Prototype?t=O3UGQzJGQlKn1HGT-1&scaling=contain&content-scaling=fixed&page-id=0%3A1&node-id=1-3&starting-point-node-id=1%3A3

The Italian Renaissance- Proposal by yee leng

FEEDBACK

Week 3: Idea 2 is good to go

Week 7: 

• The website structure is clean, transitions are enough. 
• Change the "back" icon to a 90-degree icon
• Make sure there's an effect that allows user to know how to get to next stage in the timeline.
• Add a logo in navigation bar

REFLECTION

Throughout the lectures, practical sessions, and website structure development process, I gradually gained confidence in creating an interactive website. During the research phase, I explored many references and gained ideas for more engaging and interactive transitions. These approaches felt more dynamic compared to static websites. As the project developed, I became more interested in designing interactions that improve both usability and storytelling. This has encouraged me to explore more creative transition effects. I am now looking forward to developing the website in Adobe Animate and bringing these ideas into a working interactive experience.