Advanced Interactive Design - Task 2/ Interaction Design Planning and Prototype
24.10.2024 - 06.11.2024 / Week 5 - Week 7
Siang Huey Yee / 0369549Task 2 / Interaction Design Planning and Prototype
OUTLINE
INSTRUCTIONS
Module Information Booklet
TASK 2 - INTERACTION DESIGN PLANNING AND PROTOTYPE
In this Task 2, students are required to develop their visual design and begin planning the interactive elements and features for their website. Unlike traditional static websites, interactive design includes animations, so the plan should cover both layout visuals and animation examples or references. Students can create their own animations or use reference animations to demonstrate their intended ideas.
Requirements:
- Walkthrough Video presenting the plan and showing the animation examples and/or references
- Online posts in the E-portfolio as the reflective studies with links to any resource involved in the creating of the plan (i.e.: Figma link, Miro link, etc.)
Canva Slides
The Canva slides provided below has included the contents of my Harry Potter-themed website's Art Direction; Web Contents; details on Loading page, Home page, Houses page, Visit us page; Flow chart and Jumplinks to the Figma Prototype.
Figma Prototype (First Version)
I originally created this prototype, but after receiving feedback from my lecturer, Mr. Shamsul, I was advised that the first version of my Harry Potter-themed website had too many boxes, making it overly complex and lacking creativity. He suggested incorporating more graphic elements from Harry Potter itself to make the website more relevant and visually aligned with the theme.
Figure 2.2 Figma Prototype Design (First Version)
After the feedback session with my lecturer, I redesigned my prototype by incorporating more graphic elements into the website. I also revised the design by reducing the number of boxes or columns used, making it more creative and visually appealing.
Figma Prototype (Modified Version)
Here is the Figma prototype design for my Harry Potter-themed website after making modifications based on feedback and suggestions. I have also added prototype animations in Figma, such as the parallax scrolling effect, to better showcase what the website will look like for my final project.
Figure 2.3 Figma Prototype Design (Modified Version)
Presentation Video
This is my presentation video for Task 2, which focuses on the Harry Potter-themed website for Interaction Design Planning and Prototype. I have included examples and inspirations from Pinterest, along with my Figma prototype design, to better showcase my ideas for Task 2. I have also uploaded this presentation video to Youtube Platform.
FEEDBACK
Week 5: -
Week 6:
Mr. Shamsul advised me to revise my initial Figma prototype design. He suggested using more graphic elements from the Harry Potter movie, like chalkboards and school logos, to enhance the theme and make it more representative of the topic. He also recommended avoiding excessive use of boxes, which made the design look overly complex and dull and encouraged a more creative approach to the redesign.
Week 7:
Mr. Shamsul noted that the modified design was much improved compared to the first draft. He suggested making it more complete and slightly reorganizing the content for the five aspects of each house, as the information appeared cluttered and was somewhat difficult to read.
REFLECTION
Throughout Task 2, I learned how to organize website content by studying other websites that are both user-friendly and visually appealing. I also deepened my knowledge of Figma’s prototyping features, which allowed me to add simple animations like the Parallax Scroll Effect to my website design, making it easier to demonstrate my progress to my lecturer, Mr. Shamsul. Additionally, my research for this topic gave me greater insight into the background stories of the four Hogwarts houses. In addition, I also get to apply my newly acquired skills in Adobe Animate that learnt during class sessions, including button and text animations. I am grateful that this module has allowed me to learn new skills and apply them effectively.
Comments
Post a Comment