Advanced Interactive Design - Task 2: Interaction Design Planning and Prototype
.jpg)
TANG LILIN (0376668)
Task 2: Interaction Design Planning and Prototype
During the exploration of the loading page, I tried various loading animations, including circles, lines, three dots, and numbers, but the overall look didn't quite match the website's style, and the results were unsatisfactory. Ultimately, I adopted the method demonstrated by Mr. Shamsul in Week 6's tutorial: using the rectangle tool in Animate to create an opening animation for this website's loading screen.
When creating the Homepage, I didn't use the previous wireframe layout. Instead, I referenced a new example and added animations.
First, I completed the navigation: the logo on the left and the menu on the right. I set up a floating interaction for the navigation—when the mouse hovers over a menu item, the text becomes bold and has rounded corners. The main title is "TILE NYONYA," centered and enlarged as the visual focal point; a photo of a building covered in Peranakan tiles is embedded in the middle of the word "TILE." Below the title, I placed a website introduction and a "Next Page" button, forming a complete story guide.
Animation creation: I duplicated the Homepage frame as the second frame, slightly shortening the embedded photo and tightening the spacing between the letters "TILE"; simultaneously, I moved the navigation bar up off-screen and the main text and buttons down off-screen. I connected the two frames, setting Smart Animate + Custom Bezier in Interaction, with a Duration of 1500ms.
After completing the Homepage, continue prototyping based on the previous Origin wireframe. Retain the origin text from the wireframe and add two photos of houses adorned with Peranakan tiles; place a button below the title "ORIGIN" to navigate to the Process page.
Animation: Duplicate the ORIGIN page as the second frame. Move the title and body text off-screen to the left and right respectively, and move both photos off-screen as a whole. Connect the two frames, with the interaction settings consistent with the Homepage: Smart Animate + Custom Bezier, Duration 1500ms.
Carousel photo creation process: I first organized all the creation steps and corresponding photos, arranged them in order, and adjusted the spacing between the images and text. Next, I copied all the image and text modules to the right, and then copied this entire group of content downwards, forming two parallel groups of content.
- Then, I used Frame Selection to group them and enabled the Clip Content feature:
- The upper Frame only displays the complete left-side content;
- The lower Frame only displays the right-side content.
I converted these two Frames into Components and then set the animation connection using Interaction:
- Setting it to After Delay (delay: 1ms);
- Using the Change to action to switch to the next frame;
- Using Instant animation to enter the previous frame and Smart Animate animation to enter the next frame;
- Curve selection: Linear, duration: 10000ms (i.e., 10 seconds) to achieve a smooth sliding display.
After completing the Process page, I began creating the most complex page on the entire website—the Gallery. The challenge of this page was to showcase a large number of Peranakan tiles in different styles while maintaining visual appeal and an interactive experience. I found a webpage reference on Xiaohongshu (Little Red Book) and was greatly inspired: https://www.xiaohongshu.com/discovery/item/66c34d8b000000001d018c2e?source=webshare&xhsshare=pc_web&xsec_token=ABYp_vrymNIq2NhtxpU-q0Yq7gISAncaSiPwd7mZPWHuQ=&xsec_source=pc_share
I felt this design format was perfect for showcasing the diversity of Peranakan tiles and highlighting their rich colors and beauty. Therefore, I began collecting tiles of different styles and color schemes and categorizing them according to color. Ultimately, I divided the Gallery page into five color-themed pages: red, green, blue, purple, and yellow.
Each page's background color is derived from the main hue of the tiles themselves, using a gradient within the same color family to ensure harmony and unity while maintaining visual interest. Images are placed in central diamond-shaped containers, paired with titles, subtitles, and brief descriptions, maintaining a consistent overall structure while varying in color.
For page transition animations, I followed a Xiaohongshu video tutorial step-by-step, using the interaction settings at the top to connect each page.
After completing the Gallery page, I began creating the website's final page—NOWADAYS.
In the initial design plan, this page was intended to showcase the application of Peranakan tiles in real-life scenarios. However, during the actual production process, related content had already been presented on the ORIGIN page (such as images of historical buildings and background information). To avoid information duplication, I rethought the page's structure and decided to focus on the extension and re-creation of Peranakan tiles in contemporary society.
I retained the layout used on the ORIGIN page (black background, image on the left, text on the right) to maintain a consistent overall style for the website. The text section introduces how tile aesthetics can be integrated into cultural and creative products, such as handmade bags, everyday ornaments, and earrings; the images showcase relevant real-life photos I collected, including examples of modern designers applying Peranakan tile patterns to everyday items and accessories.
In this way, the NOWADAYS page not only concludes the website's content chain but also demonstrates the vibrant continuation of Peranakan culture in the contemporary era.
Throughout the development of the Peranakan Tile interactive website, the design process evolved from technical experimentation to aesthetic refinement. Initially, I struggled to balance the richness of Peranakan colors with a cohesive interface style. By replacing the bright and highly saturated palette with a black gallery-like background, I discovered that restraint could enhance visual focus and provide a sophisticated exhibition atmosphere. This decision not only elevated the perceived quality of the site but also reinforced the concept of cultural preservation through a modern visual framework.
During prototyping, I observed that consistent layout rhythm and interactive continuity significantly influence the user’s sense of flow. The navigation hover animation successfully enhanced engagement through micro-interaction feedback, while the Smart Animate transitions between pages created a seamless narrative journey. The PROCESS page’s 10-second auto-carousel effectively guided users’ attention and sustained visual interest, demonstrating how animation timing and rhythm can structure user experience.
Additionally, the Gallery page revealed how color theory and composition determine emotional response. Dividing the gallery into color-themed sections and using gradient backgrounds based on tile hues allowed each tile’s details to stand out while maintaining harmony across pages. This observation deepened my understanding of how visual contrast and repetition establish unity in interactive storytelling.
The final prototype demonstrated that the combination of minimalist interface design and rich cultural imagery can coexist harmoniously when guided by clear visual hierarchy. The dark background acted as a neutral stage that emphasized the ornate patterns of Peranakan tiles, making them the true protagonists of the design. Animation proved not only functional but also expressive—it became a narrative tool that invited users to explore at a natural pace.
Furthermore, shifting the final page, NOWADAYS, from architectural application to contemporary reinterpretation provided a more meaningful conclusion to the user journey. It symbolized how traditional aesthetics can evolve into modern contexts, echoing the project’s broader theme of cultural continuity through digital design.
Comments
Post a Comment