Advanced Interactive Design
23.5.2025 - 13.5.2025 (Week 5 - Week 8)
Qian Guoyi | 0353422
Bachelor of Design (Honours) in Creative Media
Task2:Interaction Design Planning and Prototype
INSTRUCTIONS
Project 2 : Interaction Design Planning & Prototype
Requirements :
Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.
- Walkthrough Video presenting the plan and
showing the animation examples and/or references.
-Online posts in your E-portfolio as your
reflective studies with links to any resource involved in the creating of the
plan. (i.e.: Figma link, Miro link, etc.)
Find references
Fig1.1
I chose the minimalist style as the leading style, which is not only an aesthetic expression, but also a deep fit with the temperament of tea itself. Tea, originating from nature, returns to its original simplicity. Its charm lies not in publicity, but in restraint and tranquility. We hope to convey the plain, simple and restrained beauty of Chinese tea culture through minimalist design language.
We use a lot of white space, soft and natural tones (such as the light green of tea leaves, the gray of pottery pots, and the original color of kraft paper), with clear and easy-to-read typography and rhythmic page layout, so that users can browse as if they are in a quiet tea room, and get a soothing experience wrapped in nature.
At the same time, in order to be close to the aesthetics and usage habits of the younger generation, we added modern interactive details to the minimalism, such as micro-animation, sliding transition, modular layout, etc., so that traditional tea culture can be presented in the digital world in a more intimate and easy-to-understand way.
Web Design
Fig1.2
In the design of the start page, the first screen after entering the website is a group of selected tea products. We use tea picture cards arranged in a grid. When the mouse hovers over each tea image, a magnified visual effect will appear, as if the user is leaning over to take a closer look at the tea in his hand, creating a microscopic and delicate observation experience.
Below the picture is a simple rectangular information block, which also triggers the text introduction to appear when the mouse hovers, including the name of the tea, the type of tea, and the taste keywords. This design enhances the fun of exploration, allowing users to independently choose products to learn more about without being disturbed by redundant information.
In the design of the home page, the home page uses a high-quality tea or brewing scene as a full-screen background image to enhance the visual impact, and through the dynamic addition of natural elements, it gives the page a sense of life.
We designed a micro-animation effect of tea leaves falling slowly and petals floating, simulating the feeling of tea stretching and sinking naturally in the water, conveying the brand concept of "slow down and have a cup of tea". The background animation is smooth and low-key, avoiding interference with information browsing, and is more for rendering the atmosphere and guiding users into a state of concentration and relaxation.
In the design of the loading page, we designed an oriental tea pouring animation during the loading process. A simple ink-and-wash style teapot slowly tilts, and clear tea flows into the teacup. As the teacup is full, the page is loaded.
This animation not only continues the brand's visual language, but also cleverly transforms "waiting" into a sense of ritual. It reminds users: some beauty is worth waiting for, just like a cup of good tea, which needs time to soak and bloom.
Where is the prototype design? I want to see the figma. Overall design of your interface can be improve. The theme is not very clear
回复删除