Advanced Interactive Design Task 2
23/9/2024-20/10/2024 Week1-Week 4
Jie Xuan/ 0356515
Application Design/ Bachelor of Creative Media/Taylor's University
Project 2: Interaction Design Planning and Individual Prototype
TABLE OF CONTENTS
1. Lecture
2. Instruction
3. Project 2: Interaction Design Planning and Individual Prototype
4. Feedbacks
5. Reflections
LECTURES
Week 5-Week 11
Within this few week Mr. Shamsul teach us to do the welcome animation and the button click effect.
tutorial exercise
tutorial exercise
INSTRUCTION
Module Information
Instructions:
Students are required to work on their visual design and start planning their website’s interactive design elements and features.
Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference.
Students can build their animation or user-reference animation to demonstrate the intended idea.
Requirements of contents:
Walkthrough Video presenting the plan and showing the animation examples and/or references.
Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)
A. Design Planning
Moodboard
I started working on Task 2 by exploring different art styles to see what would suit my theme best. I continued searching for inspiration on Pinterest, going through various designs. After some thought, I decided to go with cute style that feel creative and playful, which I think will give my work a fun and approachable look.
Website Elements
I decided to download image from Pinterest and google for my website elements. After downloading all the image I import into Figma and start designing my website.
Element#1
Element#2
Sample of animation
Loading page animation inspiration: https://pin.it/6k1QwR7cI
Home page animation inspiration: https://pin.it/6zgLNlGb7
Character page animation inspiration: https://pin.it/69TfWFKTu
Riley's emotion animation inspiration: https://pin.it/6AkNuidrj
Teaser page animation inspiration: https://pin.it/3ODsOD7Oe
B. Wireframe and Prototype
Wireframe Link: Click Here
Prototype Link: Click Here
C. Task 2 Presentation
Presentation Slide:
Task 2 Interactive Design by Xuan Jie
Presentation Video:
Mr. Shamsul gave me feedback that My font can be change to more readable font and can be more fun because font need to be consistent, the colour need to be more contrast because is hard to read my content.
Experience
In this project, I learned valuable skills in both the technical and creative sides of website development. By using Adobe Animate, I learned to create animations from scratch. Each task, from copying a boat image to animating a spider, improved my understanding of keyframes, masking, and button function. In this few week, preparing building an interactive inside out website allowed me to combine creativity with technical tools like wireframing and flowcharts, which helped me organize the site's structure and user experience. Additionally, working with Figma taught me a lot about designing and arranging components effectively. I learned how to create reusable components, maintain design consistency, and structure layouts efficiently. This made the design process smoother and ensured a clean and professional final product.
Observations
I noticed how important it is to balance design and usability in an interactive website. While eye-catching visuals are important, smooth navigation and easy interaction are just as crucial. Feedback from Mr. Shamsul helped me see the value of adding more interactive content. Consistent font, background colour or interactive button can make the user experience more engaging.
Findings
Planning and structuring are essential before starting the design process. Wireframes and flowcharts made it easier to visualize the final product and work more efficiently. Research was also a key step, as exploring other interactive websites gave me inspiration and ideas. Finally, I realized that interactive elements, like animations and clickable areas, make the website more engaging and enjoyable to use.
Comments
Post a Comment