Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal
TANG LILIN (0376668)
Advanced Interactive Design
Task 1: Thematic Interactive Website Proposal
22/9/2025 - 15/10/2025 （ Week 1 - Week 4 ）
Bachelor OF DESIGN (HONERS) IN CREATIVE MEDIA
LIST
LECTURE / TUTORIAL
Week 3
In Week 3, Mr. Shamsul taught us how to use Adobe Animate. To familiarize us with the software, he walked us through making a beach ball, step by step. He then found a picture of a sailboat and had us replicate it in the software.
Week 4
在这周的课上，Mr. Shamsul带领我们走进更深入的Adobe Animate。我们开始制作动画。
在开始之前，Mr. Shamsul让我们知道了制作动画的原则
Squash and Stretch: Expresses changes in weight and volume. For example, a bouncing ball will flatten upon landing and stretch upon rebounding.
Anticipation: Adds pre-emptive movements before the main action to prepare the audience. For example, a squat before a jump.
Staging: Clearly conveys the animation's intention and mood. Use composition, lighting, and emphasis to draw the audience's attention to the main character or action.
Straight Ahead: Draws frame by frame from beginning to end. This results in smoother movement but makes it difficult to control the length.
Pose to Pose: Draws the key action first, then adds in the in-between frames, making it easier to control the rhythm and performance.
首先，Mr. Shamsul一步步带领我们制作弹动的绳子。
使用line tool画出一条直线，并建立keyframe，在第五的位置创建下一个keyframe，将绳子向下弯曲并触及画布底部。在第十的位置创建第三个关键帧，将绳子向上弯曲。重复操作。接着创建shape tween。
接着，我们开始制作bouncing ball。同样的，在每一个球的变化形态节点制作关键帧，并更改球的形态，让其看起来更加生动。接着创建shape tween。
最后制作形状变化的动画。首先创建一个蓝色矩形并创建出关键帧。接着隔一段距离创建下一个关键帧，删除这个蓝色的矩形，制作出粉色的圆形。创建shape tween。接着隔一段距离创建下一个关键帧，粉色圆形保持静止。根据此步骤接着制作出一个灰色的三角形，并创建shape tween，就能得到此动画。
PROGRESS
Week 1
In the first week, Mr. Shamsul introduced the overall structure of the module and explained the details of Task 1. During this session, we were required to start brainstorming the theme for our own Thematic Interactive Website. Mr. Shamsul provided several possible directions, including game-based, movie-based, and culture-based themes.
After considering different ideas, I decided to explore two directions — game and culture. For the game theme, I was inspired by Two Point Hospital and Diver Dave; for the cultural theme, I chose Peranakan tiles, which represent the vibrant heritage of Nyonya culture. Following that, I began preparing my Topic Proposal Slides to present these ideas and develop my concept further.
Week 2
During the class discussion with Mr. Shamsul, I shared my initial ideas for the website theme. He found the Peranakan tiles concept very interesting and unique, while noting that many students had already chosen game-related topics. Mr. Shamsul also emphasized that in this section, I needed to focus on the website's artistic style, with the subsequent focus on the website's content. Based on his feedback, I decided to focus on the cultural theme and conduct a deeper exploration of Peranakan tiles.
After further researching their history, symbolism, and visual characteristics, I began developing my Task 1 Proposal Slides according to the assignment instructions. I also created the wireframe to outline the website's structure and user flow, ensuring that my concept could be effectively translated into an interactive experience.
During my research, I discovered two distinct art styles for Nyonya tiles online. One style features realistic images of the tiles, while the other is a more modern aesthetic, with the colors and patterns preserved. I decided the latter would be a good choice for establishing the overall aesthetic of my website. For the website's color palette, I used four colors that are very Nyonya-inspired: cyan, yellow, pink, and blue. To give the website a more modern feel, I decided to use a serif font for titles and a sans-serif font for body copy.
After some research, I discovered that the nyonya tile theme website would be a good candidate for designing a layout based on an art gallery's website. This would not only add interest to the website but also make it easier to showcase different tile styles. So, I began searching online for excellent examples of art gallery websites. I then extracted a simple and elegant layout suitable for displaying multiple photos.
The Nyonya Tile website aims to showcase the rich aesthetics and cultural heritage of Nyonya tiles while allowing users to interactively experience their unique charm. Combining cultural storytelling with user engagement, the website allows visitors to not only appreciate the visual beauty of the tiles but also delve into their history and symbolic meaning.
Interwoven within interactive pages are content sections that explain the origins, symbolic meanings, and craftsmanship of the tiles, allowing users to gain a cultural understanding beyond the visual experience.
In addition, the website features a dedicated interactive section (Tile Wall) where users can freely create and collage their own tile combinations. This feature enhances immersion and creative expression, reinterpreting traditional Nyonya elements in a modern way. Through this fusion of storytelling and interaction, the website fosters a more engaging and exploratory experience of cultural heritage.
Week 3
I sent my preliminary wireframe to Mr. Shamsul. He advised that the layout was fine, but suggested I change it to landscape for easier production. I then revised my wireframe.
Below is the wireframes and flowcharts that I create：
Week 4
我根据得到的feedback，修改了我的wireframe和flowchart。设计出了更加干净整洁的layout。并保证网站中的layout 语言统一。并补齐了loading page的wireframe。
由于之前的tile wall不可使用，我想出了新的板块，也就是展示tile的制作过程这个板块。这样能够是网站内容更加连贯。并根据这个想法和内容制作出了新的flowchart。
FINAL SUBMISSION
FEEDBACK
Week 1
General Feedback: Mr. Shamsul introduced us to the projects for the entire module.
Specific Feedback: No specific feedback this week.
Week 2
General Feedback: In class, Mr. Shamsul once again showed us our excellent work and began reviewing our progress on the web themes we had come up with last week.
Specific Feedback: I showed Mr. Shamsul my progress. I had come up with three themes: Nyonya Tiles, a cultural theme, and Diver Dave and Two Point Hospital, two game-inspired themes. He suggested that the first theme looked interesting, but too many people chose the game-themed themes for the second and third.
Week 3
General Feedback: In class this week, Mr. Shamsul taught us how to use Adobe Animate. He first walked us through the steps of creating a beach ball, then gave us a picture of a sailboat and asked us to replicate it. After the lecture/tutorial, Mr. Shamsul began reviewing our progress from the previous week.
Specific Feedback: I sent the preliminary wireframe to Mr. Shamsul. He advised me that the layout was OK, but suggested that I change it to a landscape layout to facilitate subsequent production.In class, I presented my revised wireframe and slide deck to Mr. Shamsul again. He gave me feedback, saying that the PPT looked fine, but that I just needed to create three different wireframes. I then began creating wireframes and flowcharts with different layouts.
Week 4
General Feedback: Mr. Shamsul took us deep into Adobe Animate. We started creating animations: bouncing ropes, bouncing balls, and changing shapes.
Specific Feedback: I showed Mr. Shamsul three wireframes I had created. He gave me feedback, saying the third layout looked the best. He also pointed out that the others lacked consistency and that he needed to ensure a clean layout. I asked him if I could create the feature in Adobe Animate where users could select Nyonya tiles and create their own tile wall. He said it was possible in Adobe Animate, but it would require JavaScript, which I couldn't implement.
REFLECTION
Experience
This experience was truly fascinating. Initially, I struggled with topic selection, unsure of which angles to approach, especially given the restriction of not being able to use photos and the need to choose a theme I could draw and present myself. After much deliberation, I settled on "Nyonya Tiles" as the website theme. Tiles not only have clear graphic characteristics, making them easy to draw, but also visually unify the overall art style. To further inspire ideas, I browsed numerous excellent web design examples, focusing particularly on those featuring interactive animations. I primarily used gallery-style websites as references to showcase the diversity and cultural stories of tiles.
When I entered the wireframe phase, I initially focused more on the "aesthetics" of the page, such as novel typography and rich elements, but neglected overall consistency and a unified design language. After consulting with my mentor and reflecting on myself, I realized adjustments were needed and began refactoring the interface to maintain a consistent style, elements, and flow.
Observation
When analyzing multiple website references, I found that while excellent websites appear visually rich, they all adhere to a unified design system. This system might manifest itself in a consistent grid structure, button styles, animation rhythm, and even consistent use of fonts and colors. In contrast, while my original wireframe design looked beautiful, it lacked overall coherence, making it easy for users to feel disconnected or disjointed when browsing.
This process made me realize that design isn't just about visual aesthetics, but rather a systematic construction. Especially in web design, "looking good" is merely a basic requirement; clear structure, organized information, and visual consistency are the key to truly impressing users. Establishing a unified design language can create a closer connection between content and users, reducing the amount of thought required during browsing and fostering a sense of immersion
Finding
I realized that a successful website requires not only engaging content and interactive features, but more importantly, adherence to a unified design language. This includes consistent layout, graphic style, color scheme, font selection, and interactive behaviors. This consistency helps users understand information more smoothly, enhancing the overall experience and further demonstrating the designer's professionalism and logical thinking.
Comments
Post a Comment