Application Design 2—Task 2&Interaction Design Planning & Prototyping Submission

-


Week 7-Week 10

ZHANG HANYUAN(0363727)

Application Design 2 | BDCM | Taylor's University

TASK 2

INSTRUCTION




5 micro interaction animations

1.Payment feedback animation


Clicking "BUY NOW" will display two payment options, followed by a short 

animation showing payment success and failure.





2. Button feedback animation


Click the button to change the color from gray to green.


Collection feedback animation

Click the heart to turn black into red.





3.Saved successfully animation

4.Main page pop-up animation



5.Snack viewing micro-animation



Clicking on a smaller snack will enlarge it; some will be highlighted in yellow, while others will turn red.




2 macro animations

6.LOGO opening animation

Concept

A film reel scrolls by and the GSC logo appears.

7.Loading Micro Animations

Concept

Film rolling

Figma link：https://www.figma.com/design/dNjacLlAqwNNRywBJWC7MQ/GSC?m=auto&t=BWS5sybut0KKMPnB-1

Video link：

https://youtu.be/ajxakcNmxZE

Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

-
Image
22/4/2025 - 13/5/2025- WEEK1-WEEK4 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Task 1: Thematic Interactive Website Proposal List LECTURES INSTRUCTIONS FEEDBACK REFLECTION LECTURES ： Week 2: Adobe Animate (Exercise 1) In our Week 2 lesson, we learned how to draw with Adobe Animate. We were trained on how to utilize several tools, including the form tool, selection tool, and paint bucket tool. After the tutorial, Mr. Shamsul asked us to draw a boat for practice purposes. Week 3: Adobe Animate (Exercise 2) Week 4: Adobe Animate (Exercise 3) INSTRUCTIONS: Task 1  Description Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which ...
Read more

Game Development

-
Image
23/4/2025 - 10/7/2025 (Week 1 - Week 12) ZHANG HANYUAN | 0363727 Game Development | Bachelor of Design (Hons) in Creative Media | Taylor's University  Game D evelopment   Module Introduction In the first week of the fourth semester, the teacher introduced the game development module, outlining the tasks we would complete and the assessment criteria. He emphasized the key elements of game development, including game design, game art, and game technology, and stressed that every game should have a story. In the first week, we formed a team of five. My teammates were GU QIANKUAN, ZHANG Xinyue, CHEN Minhua, YOUSOF and me. Our initial task was to come up with our own game ideas. After that, we discussed, selected a concept, and further refined it through more in-depth research. In the end, the group decided to adopt the idea I proposed. GDD Basic information 1.game title Team name/ member orgranization Genre and platform 2.Concept and purpose Game overview (brief description of the...
Read more

Information Design - PROJECT 1

-
Image
Information Design -  Project 1 02.17.2025 - 03.03.2025 / Week 3 - Week 5 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Project 1 -Part 1&2 LIST Instructions Lectures Part 1: Infographic poster Part 2: Minimal animated infographic Feedback Reflection INSTRUCTIONS Lectures week 3 week 4 week 5 lecture link PART 1:--Infographic poster Require： Choose 1 infographic poster reference from Internet (Please consult before proceed) Redesign the poster into A4 size. Sketch the idea and process Redesign and simplify the poster based on visual hierarchy & typography Simplify the poster's design based on color, shape & pattern Attach your final poster on E-Portfolio with explanation and reflective writing Inspiration &  Concept (initial ideas and drafts) I found a poster reference on the Internet (Pinterst) and made a preliminary idea proposal. After showing it to Mr. Fauzi, he said that this one had been refined and suggested tha...
Read more