Labels

Advanced Interactive Design Task 1 : Thematic Interactive Website Proposal

Advanced Interactive Design Task 1: Thematic Interactive Website Proposal


Zhang Wan Ru 0368214

22/09/2025—26/10/2025 (Week 1-Week 5)

Advanced Interactive Design  / DST60804

Bachelor of Design in Creative Media  / Taylor's University

TABLE OF CONTENTS





Instructions



1. A specific product of a particular brand launch/special (i.e., Nike's brand-new shoe), a beauty product launch (i.e., Sephora's compact powder)
2. Movie promotion
3. Game release promotion
4. Gallery/Museum exhibit launch
5. Band/Artist's latest release
6. Or anything else you have in mind (subject to the module coordinator’s approval)

Lecture

Week 1: Briefing
  • Understanding the marking rubric of the module.
  • Read through the module information booklet.
  • Select an idea for the website to work on.
Week 3: Introduction to Adobe Animate
  • Select HTML5 Canvas, set the Frame Rate to 30, and select the Very High preset
  • Use Shift to maintain proportions
  • Use the option to draw from the center
  • Press Command+B to explode an object
  • Enable object drawing mode
  • Draw a beach ball, including basic shapes, Segments , coloring, and adding shading

Fig 1.1 Beach ball (08/10/2025, Week 3)
In order to become more familiar with all the tools in Adobe Animate, we continued to practice in class.

Fig 1.2 Trace the boat (08/10/2025, Week 3)
Week 4: Animation in Adobe Animate

12 Principles of Animation:

This week, we learned how to animate our drawings in Adobe Animate. Initially, Mr. Shamsul walked us through the 12 principles of animation and watched video tutorials.
Initially, I learned how to create animations step by step—starting with large movements, then transitioning to smaller ones, and finally returning to the original position. He also demonstrated how to adjust the animation speed, teaching us how to smoothly speed up and slow down the movement for a more natural effect.

Later in the tutorial, we were asked to draw a line and animate it to simulate an up-and-down motion, as if being pulled and released.

Fig 1.3  Line and animated (15/10/2025, Week 4)

After class, Mr. Shamsul had us practice animating a bouncing ball. We needed to learn how to adjust timing, spacing, and squash and stretch effects to make the ball's movement look more natural. I then searched online for photos of the ball's bouncing process.


Fig. 1.4: Animating a bouncing ball example  (15/10/2025, Week 4)

Fig 1.5: Animating a bouncing ball (15/10/2025, Week 4)







Task 1: Thematic Interactive Website Proposal

We needed to come up with three themes for our website design. I started thinking about what I was interested in to ensure I wouldn't get bored or lose motivation while completing the project.

After some research, I settled on the following three themes:

Fig. 2.1 Idea PDF (24/09/2025, Week 1)

Thematic Interactive Website Idea: Chinese Long Jing Tea

When I first started working on this theme, I needed to think about the style first. I started looking at more excellent examples and got more inspiration from them.

Inspiration

Fig. 2.3 Inspiration (08/10/2025, Week 2)

So I want to combine tea tree with the modern Chinese aesthetic, with the fragrance of tea tree and the style of the Chinese web.

Concept:

From a Leaf to a Cup of Tea

This website invites users to follow the journey of tea from the moment a leaf is picked to the final cup that warms the hands. Inspired by the map of West Lake, the experience unfolds like a cultural voyage, guiding users through the history, tea-making, and tasting rituals.

The design concept combines the natural imagery of forest tea trees with a modern Chinese aesthetic, creating a calm yet elegant atmosphere. Through interactive visuals and gentle motion, the site allows users to feel the harmony between nature and culture that defines the world of tea.

Mood Board:

Color Palette

The color palette is inspired by the natural world of tea and the elegance of oriental culture.

  • Dark Green (31511F): the color of Longjing tea, calm and refined.

  • Lake Blue (7BA694): reminds me of West Lake’s gentle water.

  • Bamboo Green (C4D7B2): represents tea fields and bamboo forests.

  • Xuan Paper White (F9F6F0): like traditional Chinese paper, simple and pure.

Together, these colors create a peaceful and poetic atmosphere—just like enjoying a cup of tea.


Fig. 2.4 Color Palette (08/10/2025, Week 2)


Font

The website highlights both visuals and content, ensuring that users’ attention stays on the stories and imagery of tea culture. The font style is intentionally simple, avoiding conflict with traditional visual elements such as tea gardens, bamboo leaves, and blue-and-white porcelain.

To convey professionalism and credibility, the design adopts Roboto, a clean and modern typeface. Its crisp structure reflects the refined heritage of Longjing tea while harmoniously blending traditional Chinese culture with contemporary aesthetics.

Fig. 2.5 Font (08/10/2025, Week 2)

Wireframe:

Loading Page:

  • Background: A full green background with a tea garden gradient.
  • Main Elements: Central visual element: A gently rotating circular tea leaf pattern (loading icon) indicates loading. Also depicted are falling tea leaves.
  • Title: Main title: "The Story of Longjing Tea"; Subtitle: "From the West Lake to Your Cup." Slogan at the bottom: "Where the mist meets the tea, a story begins."
  • Navigation: Menu in the top right corner.
  • Interaction: Click the circular tea leaf pattern in the center to access the homepage.

Fig. 2.6  Loading page (15/10/2025, Week 4)

Home Page:
  • Background: The background fades to lake blue.
  • Main Elements: Displays the main visual for the "West Lake Tea Garden Map."
  • Title: Main title: "Discover the Essence of Longjing." Tagline: "Where the mist meets the tea, a story begins."
  • Navigation: Menu in the top right corner.
  • Interaction: Clicking the button fades the page to the next section (Introduction).

Fig. 2.7  Home page (15/10/2025, Week 4)

Introduction Page:
  • Main Elements: Images of Longjing tea, showing the tea from different angles.
  • Title: Main title: "A cup of Longjing tea, a thousand years of flavor." Also included is a brief introduction to Longjing tea.
  • Navigation: Menu in the top right corner.
  • Interactions: Image switching, navigation jump, and a button to jump to the next page.
Fig. 2.8 Introduction page (15/10/2025, Week 4)

Timeline Page:
  • Background: Primarily features an enlarged image of tea leaves, primarily green.
  • Main Elements: Showcases the history and key events of Longjing tea.
  • Navigation: Menu in the upper right corner.
  • Interactions: Click on the image to jump to the next page or to navigate to the next page.

Fig. 2.9 Timeline Page (15/10/2025, Week 4)

How to make a page:
  • Background: Predominantly green
  • The slogan is “Picking the finest bud and leaf ensures delicate aroma and freshness.”
  • Main Elements: Demonstrates the traditional Longjing tea-making process, from picking, withering, cooling, and roasting.
  • Interactions: Click the button in the image to jump to the next page or navigate to the next page.


Fig. 2.10 How to make Page (15/10/2025, Week 4)


Tasting & Gallery Page:
  • Key Elements: Showcases Longjing tea's color, aroma, taste, and shape, along with gallery images and videos.
  • Interactions: Click buttons to jump to the next page or navigate to a new page.

Fig. 2.11 Tasting & Gallery Page (15/10/2025, Week 4)
User Flow Chart:

Fig. 2.12 User Flow Chart (15/10/2025, Week 4)

FINAL PROPOSAL SLIDES


Here is the Canva [Link].



Feedback 

Week 1:
  • Come up with thematic interactive website theme content you want.
Week 2:
  • Mr. Shamsul helped me choose the third idea, Chinese Longjing tea.
  • Encourage innovative thinking and avoid simply copying existing works.
  • Decide on a style and choose an artistic style that reflects Chinese culture. Develop a unique style for storytelling and visual elements, maintaining creative integrity and originality.
Week 3:
  • No Feedback
Week 4:
  • Mr. Shamsul told me that web design lacks balance between images and text, as well as hierarchy. You can use pen and paper to draw the first idea in your mind and remember the design principles.



Reflection 

While designing my interactive website, "The Story of Longjing Tea," Mr. Shamsul's guidance prompted me to re-examine some fundamental design principles I had previously overlooked. Initially, I focused too much on visual aesthetics and cultural narrative, neglecting the principles of balance, hierarchy, and consistency. As a result, the initial layout felt fragmented and lacked clear user interaction guidance.

During the revision process, I began to consciously reintegrate these principles into my design. For example, I employed a clear visual hierarchy to distinguish between text and imagery, used consistent spacing and typography to enhance readability, and maintained harmony between traditional Chinese elements and modern interface design. These measures helped the website better convey the tranquil and elegant essence of West Lake Longjing tea while ensuring a smooth and immersive user experience.

Looking back on this process, I realize that good design isn't just about creativity or aesthetics; it's about adhering to principles that make a design functional, usable, and meaningful. This project reminded me that every visual decision should balance form and purpose—just like tea, design requires patience, balance, and refinement.



Labels:

Comments

Post a Comment

Popular Posts