Advance Interactive Design - Project 2: Interaction Design Planning and Prototype

on

20.5.2024 - 10.6.2024 ( Week 5- Week 8)
Gam Jze Shin / 0353154
Advance Interactive Design / Bachelor of Design in Creative Media
Project 2: Interaction Design Planning and  Prototype 

Index

1. Instructions
2. Project 2: Interaction Design Planning and Prototype 
fig 1.1 Design Research Methodology MIB

Project 2: Interaction Design Planning and Prototype

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 use reference animation to demonstrate the intended idea. 

Requirements:
  1. Walkthrough Video presenting the plan and showing the animation examples and/or references. 
  2. 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.) 

Progress 
In this project, we need to build the website prototype based on our proposal. Since I already created wireframes in my initial proposal, I will use them as a foundation to create and refine the prototype.

fig 2.1 Figma

I decided to use Figma to build the website prototype. I created frames for the necessary pages: the landing page, home, sandwich page, timeline, and about us.


Since I didn't know how to create a prototype video using Figma and had only made prototypes without interactions and connection buttons before, I learned how to do it from YouTube tutorials.

Wireframes in Proposal

fig 2.2 Sources needed

Then, I found and saved all the graphics that I think are suitable and would like to use for my prototype in a file.

fig 2.3 Process in Figma

This is one of the steps in creating my prototype. The font and color palette were chosen based on my earlier decisions. However, there are some slight changes compared to the previous wireframes to make it more suitable.

fig 2.4 Process in Figma

After creating all the pages, I arranged them in order and demonstrated the differences before and after clicking the interactive buttons.


fig 2.5 - 2.6 Prototype process in Figma

Next, I used the prototype functions in Figma to connect all the pages and tested it to ensure all the buttons linked to the correct pages and nothing was missed.

Canva Slide 
Click here to view the slides in Canva.

Wireframes in Figma
Click here to view the wireframes in Figma.

Prototype in Figma
Click here to view the prototype in Figma.

Presentation Video
 
Feedback
Week 5
General Feedback: In Project 2, include both the wireframes and the prototype. Explain how the final website will be presented using animation and interactive elements to provide a visual demonstration, which is more effective than just using words. This approach will clearly show the functionality and design features of the website.

Reflection

Project 2
While working on Project 2, I realized the need to enhance my skills in creating animations to make my interactive website more engaging. I found the biggest challenge was designing a website style that encourages user engagement and continuous browsing. Before using Figma to create the prototype, I was unsure how everything would look. However, during the process, I discovered new and interesting ideas for the best presentation. Consequently, the final prototype in Figma will have slight differences from the initial wireframes in Canva, incorporating more details and improvements.


Comments

Post a Comment