23/06/2024 - 03/08/2024 Ng Zheng Kai 0359424 Bachelor of Design in
Creative Media Advanced Interactive Design Final Project
INSTRUCTIONS
Project 3 - Completed Thematic Website
For this project, we are to create a thematic website based on our prototype
on project 2. we are to integrate visual asset and refine the prototype into a
complete working and functional product experience using Adobe Animate
Before starting the project, I watched some helpful tutorials online on how to
better utilize Adobe Animate.
Fig 1.1 Masking and Adding Buttons in Adobe Animate
Fig 1.2 Creating a Simple Website Using Adobe Animate
After that, I started to create assets in Adobe Illustrator and import it to
the library in Adobe Animate.
Fig 1.3 Importing assets into library
I then created different animation transitions for each page and made labels
on the "action" layer.
Fig 1.4 Start page
Fig 1.5 Transition
Fig 1.6 Main menu
Fig 1.7 Bearings page 1
Fig 1.8 Bearings page 2
Fig 1.9 Bearing details page
Originally, I planned to implement a page for customizing a skate deck with
various selection of colour palettes but it proved to be too complicated and
beyond my understanding of Animation and JavaScript.
After completing some sections of the animations, I started to code, I used an
"actions' layer and label each section of the animation. I used code snippets
for quickly adding my code into the specific frames.
Fig 1.10 Codes
Fig 1.11 Frames used for coding
Final Submission
Below is the video recording of the walkthrough of the website.
As I am undertaking the final project of Advanced Interactive Design, I found myself deeply engaged with both the technical and creative aspects of the task. The process of designing animations in Adobe Animate and crafting a thematic website challenged me to apply my technical skills in a meaningful way. It was an opportunity to explore the software's capabilities, from simple frame-by-frame animations to more complex interactive elements. Each step required a meticulous approach, from planning and storyboarding to executing and refining the animations.
Through this project, I gained a deeper appreciation for the competencies required in digital design and animation. I recognized the importance of attention to detail, user-centered design, and effective communication. These skills are invaluable, not only in the context of this project but also in my future endeavors, whether they involve creating digital content, working in a team, or pursuing a career in a related field.
This experience has also highlighted the significance of self-assessment and seeking constructive feedback. Understanding my strengths and areas for growth has empowered me to set specific goals for improvement, such as mastering advanced animation techniques and enhancing my understanding of user experience design.
In conclusion, this final project was more than just an academic exercise; it was a journey of self-discovery and skill development. By aligning with the learning goal of "Appraising and Valuing Competencies," I was able to use technology not only as a tool for creation but also as a means for self-reflection and improvement. This project has equipped me with the skills and mindset needed to continue growing as a learner and a creator, preparing me for future challenges and opportunities in the ever-evolving digital landscape.
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 ...
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 ...
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...
Comments
Post a Comment