Task 2: Interaction Design Planning and Prototype

22.10.2025 - 05.11.2025 (Week 5 -  Week 7 )
Diane Sani Alexander Wan / 0378712 
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media 
Task 2: Interaction Design Planning and Prototype
TABLE OF CONTENT

1. Lectures
2. Instructions
3. Task 2
4. Feedback
5. Reflection
LECTURES

Week 5

In todays lecture, Mr. Shamsul taught us the basics of animating like creating the character or object and taught use how to move specific parts. Graphic symbol 

Week 6

We learned how to use masking in Adobe Animate and create a simple animation for the website. For example like a box animation around the text to create a smooth animation and understand masking. 

Week 7

In this class, we learnt how to create a simple button on adobe animate and using wizard for action. During this class, it took me a while to understand how to make the button. But after a few tries and trial and error, I managed to get the task done.
INSTRUCTIONS

TASK 2

Week 5

I started off by making the wireframes and understanding the placement for each object. Since I'm inspired by the cut and paste look, I had to find for images and cut out each image in Photoshop. 

Reference for how I want the slices of bread to fall of. Here

Week 6

Still continuing working on my prototype and bettering it on Figma. Understanding where I want to place the animations for my site. 

Week 7

I had to find for a few examples of how I want my animation to look like. There were a few struggles to thing about how I want the buttons to animate into. 
Access to prototype presentation here. 


FEEDBACK

Week 5: Make sure to understand the composition for the website. 
Week 6: To not over crowd the whole page so it doesn't look messy. 
REFLECTION

Throughout this task, I wasn't sure on how I want my website to look like or how I want the animations to be like, but after many examples and research I gained a few inspiration on the overall look of it. I wanted it to be be fun and interesting with a good amount of information in the website. I didn't want anything too complicated as well and that is easy to navigate. I have to enhance the composition and make it better and understand more about the design hierarchy to make the overall website look neat and presentable.  

Comments

Post a Comment

Popular posts from this blog

Advanced Typography / Task 1:Typographic System & Type and Play

Image
21.04.2025 - 13.05.2025 (Week 1 -  Week 4) Diane Sani Alexander Wan / 0378712  Information Design / Bachelor of Design (Hons) in Creative Media  Task 1 / Exercises: Typographic System & Type and Play  TABLE OF CONTENT 1. Lectures 2. Instructions 3. Exercises 4. Feedback 5. Reflection 6. Further Reading 1. LECTURES WEEK 1: LECTURE 01 Typographic Systems 8 major variations:  Axial Radial Dilational Random Grid Modular Transitional Bilateral The typographic systems are what architects term 'shape grammars'. These systems are similar that the systems set of rules are unique and it provides a sense of purpose that focuses and directs the decision making. (Elam, 2007) While these systems may seem to limit creativity, they actually help learners build a strong foundation. Axial System: All elements are organized to the left or right of a single axis.  Radial System: All elements are extended from a point of focus. Dilation System: All elements expand from a ce...
Read more

Exercise 1 - Web Anaylsis

Image
 25/09/2024 - 5/10/2024 Diane Sani Alexander Wan / 0378712 Interactive Design / Bachelor of Design (Hons) in Creative Media Exercises 1. TASKS Week 2:   Exercise 1 - Web Analysis We need to pick 2 websites that were given in Google classroom and then interpret the websites and see how it impacts the user experience. We have to consider the purpose and goals of the website and identify the strengths and weaknesses of the website.  WEBSITE ANALYSIS Awwwards  https://www.awwwards.com/ After some exploration on this website and scrolling through, this website targets UI/UX designers as the main purpose of the website is to show the 'site of the day' and also the 'site of the month'. You are able to gain inspiration from this website and also purchase a design you desire. They also offer a wide range of courses for those that want to learn more and increase their skill and knowledge.  Content The website itself is also visually aesthetic, so it relates to how rele...
Read more

Intercultural Design

3.02.2025 - 21.03.2025 (Week 1 -  Week 7) Diane Sani Alexander Wan / 0378712  Information Design / Bachelor of Design (Hons) in Creative Media  Intercultural Design INSTRUCTIONS PROCESS These are all the powerpoint presentations we did.  Figure 1. Proposal  Figure 2. Data collection Figure 3. Final Project. This is our groups tiktok page.  @puakumbu_14 REFLECTION Experience: This module gave me a great experience through learning about culture we had to research in depth about. My group picked a culture that I was invested in so learning and researching more about it gave me great knowledge about the Pua Kumbu. My group and I went to go to a textile museum to observe more on the chosen topic, and it was a fun way to get the group together to go explore more on the history of the Iban culture. Though there isn't much Sarawakian textiles in KL, we still managed to get the information for our data collection.  Observation: The learning process throug...
Read more