Posts

Advanced Interactive Design-Task 2: Interaction Design Planning and Prototype

Image
21/5/2025 - 10/6/2025- WEEK5-WEEK8 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Task 1: Thematic Interactive Website Proposal INSTRUCTIONS: Task 2   FIGMA LINK https://www.figma.com/design/dVbiqYXy7A6eOuAnmRBbZr/sonic-movie-web-design?node-id=0-1&m=dev&t=SzPqpfBMdyt1B5Fl-1 MIRO LINK https://miro.com/app/board/uXjVIqSmfoQ=/?share_link_id=866279446125 Final demo/YouTube video REFLECTION Experience This task was fun yet challenging. At first, I struggled to connect my initial idea and moodboard, but later came up with a new concept that worked better. Creating the background was time-consuming, but assembling the elements based on my wireframe was satisfying. Using Adobe Animate was difficult at first, but after self-learning, I could follow along more easily in class. Overall, this task improved my creative thinking and deepened my understanding of how interactivity and theme work together, especially through the Sonic project....

Game Development

23/4/2025 - 21/5/2025 (Week 1 - Week 5) ZHANG HANYUAN | 0363727 Game Development | Bachelor of Design (Hons) in Creative Media | Taylor's University  Task 1: Game Design Document

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 ...

Application Design I--Project 1 : Mobile Application Proposal

Image
         Application Design I--Project 1 : Mobile Application Proposal Week 1- Week 4 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Project 1  Week 2 First draft proposal slides (with 3 companies) Week 4 Final Proposal Feedback week1: No feedback week2 I showed Mr. Zeon Wong the three ideas in the first draft, and he suggested that I choose one of the two apps, GSC and Spotify, as the app for the final proposal. He also asked me to add a picture to the "weakness" page. week3 I showed Mr. Zeon Wong the GSC final proposal PPT, and he suggested that I put Solution and Weakness on one page for easier reading. week4 After the lecture, Mr. Zeon Wong looked at the GSC final proposal PPT and gave me 3 suggestions: 1. Put a picture of GSC and another software for comparison where GSC is compared with other software. 2. Put the four pictures of Weakness 6 together, put the text layout on the far right, and la...

Information Design - FINAL PROJECT

Image
       Information Design - Final  Project   Week 1- Week 7 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Final Project -INFOGRAPHIC VIDEO ANIMATION INSTRUCTIONS FlIP GROUP PROJECT Script Storyboard Audio-Google Drive Final video: YouTube link: https://youtu.be/sUUOP8S8RY8 Feedback: Week 6 After our group presentation in class, Mr. Fauzi gave us some advice: - piechart: the other objects can be smaller while the piechart can be made bigger.  - think and reevaluate about certain scenes bcs it may too long (with voiceover included). - final editing: animate part by part. render so that we will have mov and mp4 (AE). move on to premiere pro: then can just slot in the renders based on timing.  - storytelling: eg. scene 1: highlight certain words like Mooncakes and Tang Dynasty in the animation. Reflection: Experience Through FLIP presentations, we studied multiple dimensions of information design and ...

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...

Information Design - Exercises 1 & 2

Image
Information Design - Exercises 1 & 2 02.03.2025 - 02.15.2025 / Week 1 - Week 2 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Exercises  LIST Instructions Lectures Exercise 1: Quantify & Visualize Data Exercise 2: L.A.T.C.H Feedback Reflection INSTRUCTIONS Lectures Lecture 1 Lecture 2 Exercises 1-Quantifiable Information Quantify data and visualize it to analyze and categorize objects into intuitive information layouts. Require: Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: Box of Lego Jar of button Jar of marble ball Set of colourful rubber strap In this exercise you're required to quantify our chosen objects and arrange them into  a presentable layout or chart .  The information must be presented as is, and you need to arrange the objects with relevant indicators written out with pens to help you to visualize the quantity and data. The example...