Posts

Info Design: Exercises

Image
03/02/2025 - ??? Ng Zheng Kai 0359424 Bachelor of Design in Creative Media Information Design Exercise 1 INSTRUCTIONS Exercise 1 In the first exercise, we are required to quantify (count) our chosen items (buttons/Legos/coins/MNMs) and arrange the objects into a presentable layout or chart. The requirement is that the information must be presented as it is with relevant indicators written out with pens to help us to visualize the quantity and data.  I chose to use Skittles for my task. There are 5 stages for this exercise, which are data, sort, arrange, visualize, and storytelling. For the first stage which is data, is the initial unprocessed raw data, for this I have 65 skittles with different colours. Fig 1.1 (1) Data For the second stage, I sorted the Skittles based on the colour. Fig 1.2 (2) Sorted For the third stage, which is the arrangement, I rearranged them based on the colour type's amount. Fig 1.3 (3) Arranged For the 4th stage, I made them visually ap...

Major Project: Task 1

03/02/2025 - ??? Ng Zheng Kai 0359424 Bachelor of Design in Creative Media Major Project Task 1 INSTRUCTIONS Progress

Games Development: Final Project

Image
05/01/2025 - 12/01/2025 Ng Zheng Kai 0359424 Bachelor of Design in Creative Media Games Development| Final Project INSTRUCTIONS Progress To start expanding the prototype, I start by implementing music and sound effects for my game, I find my sound effects in royalty free sound from websites like Freesound or Pixabay . Fig 1.1 Sound Effects for my player script I have also added a block mechanic to my player so that the block negates incoming damage. Fig 1.2 Block code Fig 1.3 Functions for taking damage Then, I started working on the enemy script and enemy animations. I added a patrol mechanic for my enemy so that it patrols around certain areas of the map. Fig 1.4 Patrol Point A Fig 1.5 Patrol Point B Fig 1.6 Code for patrolling Then, for the boss room, I added an invisible box as a trigger to activate the boss in following the player, I also changed the background music to boss music when the collider is triggered. Fig 1.7 Invisible Box Collider Location Menu Scene Fig 1.8 Main Menu ...

Minor Project Reflection

06/01/2025 - 08/01/2025 Ng Zheng Kai 0359424 Bachelor of Design in Creative Media Minor Project Final Reflection INSTRUCTIONS Minor Project Reflection W1 During the first week of class, we were briefed on what we are going to do for this module, and we were asked to choose between 3 projects to take on, which are Warisan XR Immersive Expedition, Expedio Project X-Board Idea Space, and Daikin Project. I initially picked Warisan XR because the AR/VR concept fascinated me, but then my initial group was not sufficient due to the grouping requirements. So our lecturer advised me to change to another group in a different time slot. (I was in morning class and I have to change to afternoon class). I entered the class and joined this group taking on the Expedio Project. After joining the group working on the Expedio Project, I began to appreciate the value of adaptability and collaboration in a team setting. Initially, I was hesitant about leaving my comfort zone, as I had already f...

App Design 2: Final Project

Image
11/12/2024 - 06/01/2025 Ng Zheng Kai 0359424 Bachelor of Design in Creative Media App Design 2 Final Project INSTRUCTIONS Final Project Improvements After reading a tutorial I found online, I tried to input navigation bar animations to my homepage to add more life to the app, and it turns out better than I expected. I also added another animation for the "payment confirmed" page, using CSS keyframes and JavaScript. Navigation Bar For the navigation bar, I used CSS keyframes animation and also used JavaScript with the aid of AI. Fig 1.2 Navigation Bar HTML, CSS, JavaScript Code  Payment Confirmed Fig 1.5 Payment Confirmed HTML, CSS Code Flow Map Masterplan Firefly Final Wireframes Netlify Link:  https://starting-up.netlify.app/ Final Video Presentation App Walkthrough Final Reflection Completing this project has been a transformative experience that challenged me to grow as a UI/UX designer and pushed ...

App Design 2: Task 3

Image
18/11/2024 - 16/12/2024 Ng Zheng Kai 0359424 Bachelor of Design in Creative Media App Design 2 Task 3 INSTRUCTIONS Task 3 In Task 3, we will create the micro and macro animations outlined in Task 2. This involves coding all the animations and transitions using HTML, CSS, and JavaScript. App Startup Logo For the app startup animation, I used CSS keyframes animation. Fig 1.1 App Startup Logo   HTML, CSS Code Flight Selection Fig 1.3 Flight Selection HTML, CSS, and JavaScript Code Passenger Details Slide Bar and Fade Bar Fig 1.4 Slide Bar and Fade Bar HTML, CSS, JavaScript Code Reflection Embarking on Task 3, which involves creating the micro and macro animations outlined in Task 2, has proven to be both a challenging and eye-opening experience. The process requires coding animations and transitions using HTML, CSS, and JavaScript, skills that I am still in the early stages of mastering. One of the biggest challenges I have faced is my lack of experience in coding. While I understand ...

Experiential Design: Final Project

Image
15/12/2024 - 12/01/2025 Ng Zheng Kai 0359424 Bachelor of Design in Creative Media Experiential Design Final Project INSTRUCTIONS Final Project progress: For the final project, we are to continue finishing our prototype into a complete app. I continued on adding on the "What's Next" from the last post, which are complete visual guides, more scenes and refinement. I look up for images online, mostly from the official manual from the Dell website Fig 1.1 Official Manual from Dell I added more visual guides for the app and implemented some interactivity with the touch input like dragging objects and pinch to zoom. Fig 1.2 Script for dragging objects Fig 1.3 Script for pinch to zoom Combining these two scripts, I am able to drag and enlarge/shrink my objects around for better interactivity. Fig 1.4 Drag and PinchToZoom demonstration I also made an Object Appear script that toggles an object to switch between their active/inactive states. Fig 1.5 Object Appear Script Fig 1.6 ...