Application II Task 2

-
 Ding Jiaqi/0379388
Games Studies 2/ Bachelor of interactive spatial design



Task 2：Interaction design proposal and planning

The objective of Task 2 is to develop a structured interaction design strategy for a mobile web application project. This includes the creation of wireframes, user journey diagrams, and both macro- and micro-level animation prototypes. The task emphasizes the need for clear visual representations and well-defined interaction patterns—such as swipe gestures and transition effects—to collectively improve the user experience and enhance the visual dynamics of the interface.

flowchart：


Story board:


Flowchart and  Story board link :
https://www.canva.cn/design/DAGpY7wjpGI/v4v9BFpG2oSykD9gYQxKFg/edit?utm_content=DAGpY7wjpGI&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton


Bottom navigation bar：

Add：

Add a morphing ball animation

eg：


Function：

Adding a morphing ball animation to the navigation bar enhances the user experience by making transitions more fluid and visually engaging. It helps users better perceive navigation flow, provides smooth feedback on interactions, and gives the interface a more dynamic and modern feel.


"Categories" and "for you"  

Add：

Card loading animation and Zoom effect

eg：

Function：

Card loading animations improve user experience by indicating that content is loading, avoiding blank screens, and enhancing visual appeal to make waiting feel smoother and more pleasant.

Delete

Add：

Swipe left to delete
eg：


Function：
Quick delete action
Saves screen space
Matches user habi


Add to Cart

Add：
Interactive button


eg：
Function：
Quick delete action
Saves screen space


Visit Store

Add:

Add animation to buttons


eg：


Function：
1. Improves user experience
Animations give clear feedback and make interactions feel smoother.
2. Draws user attention
Animated buttons can highlight important actions and guide the user’s focus.
3. Enhances interactivity
Motion makes the interface feel more responsive and alive.


Reflection：

I found that animation is very important in web design. It helps the page connect with users and makes the experience more fun. Animation can guide users, show them what to do next, and make the page easier to understand.
It also adds life to the page. Moving buttons, loading effects, and smooth transitions make the design feel more friendly and interesting. This helps users enjoy using the website and stay longer.
In short, animation is not just for decoration. It makes websites easier to use and more fun, and it helps create a special style for the product or brand.

presetation link :https://youtu.be/JLjM0Nif7rE

Figma Link：https://www.figma.com/design/dzuRSyre8lYRHtUktjyvvM/%E8%B4%AD%E7%89%A9%E8%BD%AF%E4%BB%B6-%E4%BA%A4%E4%BA%92?node-id=0-1&t=uFepbyGTXxbN2B2K-1

Comments

Post a Comment

Popular posts from this blog

Games Studies

-
Image
Ding Jiaqi/0379388 Games Studies 2/ Bachelor of interactive spatial design Week 1 Course Tasks Overview Individual Tasks:  Complete two exercises:   1. Describe a favorite game and its fun elements.   2. Explore the evolution and improvement of games. These aim to build personal skills and support group design efforts. Organize and evaluate project updates. Write a personal reflection at the end of the semester. Compile everything into a digital portfolio. Group Tasks: Create a tabletop game prototype in phases, progressing with weekly tasks. Peer evaluation of team member contributions at the end of the semester.   Course Timeline Preparation Phase (Weeks 1–4): Course introduction Learning about fun and educational elements Game experience and dynamic system design Start individual exercises Finalize game concept and begin developing the alpha version Prototype Development and Testing (Weeks 5–12): Present initial proposal and framework Conduct multiple testing roun...
Read more

Embedded System

-
Image
Ding Jiaqi/0379388 Embedded systems / Bachelor of interactive spatial design Week 1 Class Summary and Reflection In this class, I gained a deeper understanding of the integration of embedded systems and interactive spatial design. I learned that embedded systems are widely used in fields such as smart homes and industrial automation, while interactive spaces enhance user experiences through technologies like holograms, LED walls, and VR/AR. Additionally, the class provided a detailed explanation of the requirements and content of Assignment 1, helping us understand how to complete it effectively, including selecting appropriate embedded system concepts and interactive design approaches and integrating them to create an engaging interactive space. During the class discussion, we conducted a group discussion on Assignment 1, exchanging ideas and ultimately deciding on our project’s theme—conveying the concept of environmental protection. We aim to use embedded systems and interactive sp...
Read more

INTERACTIVE DESIGN: EXERCISE 1: WEBSITE ANALYSIS

-
Image
INTERACTIVE DESIGN: EXERCISE 1: WEBSITE ANALYSIS  —— Start from 3.9.2025 23.9.25-1.10.2025/Week1- Week2 Ding Jiaqi/0379388  Interactive Design/ Bachelor of interactive spatial design —— EXERCISE 1: WEBSITE ANALYSIS      1. Select Websites: Choose five (5) websites from the provided link. 2. Analyze Websites: For each selected website, review it carefully by considering: The purpose and goals of the website and whether they are effectively communicated to users. The visual design and layout, including the use of color, typography, and imagery. Functionality and usability, including navigation, forms, and interactive elements. The quality and relevance of the content, including its accuracy, clarity, and organization. The website’s performance, such as load times, responsiveness, and compatibility with different devices and browsers. Identify the strengths and weaknesses of each website and how they impact the user experience. 3. Write Reports: Write a brief repor...
Read more