Advanced Interactive Design: Task 2
| 22.10.2024 - 17.11.2024 (WEEK 5-WEEK 8)
| Tang Chin Ting [ 0366473 ]
| Advanced Interactive Design/ Bachelor of Design in Creative Media
| Interaction Design Planning & Prototype
| Tang Chin Ting [ 0366473 ]
| Advanced Interactive Design/ Bachelor of Design in Creative Media
| Interaction Design Planning & Prototype
.jpeg)
INSTRUCTIONS
SUBMISSION
Project 02: Interaction Design Planning & Prototype
In this task, we had to work on our visual design and plan our website’s interactive design elements and features. Unlike traditional static websites, when it comes to interactive design where animations are present, the plan should not only include the layout visuals but also the animation example or reference. We can build our animation or user-reference animation to demonstrate the intended idea.
Requirements:
- 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 creation of the plan. (i.e.: Figma link, Miro link, etc.)
To start this task, I initially needed to refine my website interface design, which has been mentioned by our lecturer in the last few weeks. I did the prototype in Figma since it is easier to make it like a prototype, and I can also add some buttons or animations in Figma.
- Replace the title of "ABOUT"
- Realign the title of each single
- Refine the footage page
Progress
This is my final outcome after the refinement, but I will still ask Mr. Shamsul for feedback. I have made some arrangements for the merchandise page. When users click on the items, the picture will change.
Figure 1.1 Progress in Figma
Figure 1.2 Progress in Figma
Figure 1.3 Progress in Figma
Aside from that, I was also confused about which layout I needed to use for the tour details page. But I think the second one is more suitable, in which I removed the navigation bar and only added a "back" button for the user to go to the previous page.
Figure 1.4 Tour Detail Page
Figure 1.5 Tour Detail Page
Final Wireframe in Figma
Figure 1.6 Final Wireframe in Figma
FEEDBACK
Week 05: Refine the title "ABOUT" and place it before the content and not under the content. Make the title of every single one clearer, if it is just put on the vinyl, it can't grab attention. Besides, refine the contact page icon.
Week 06: Everything is okay. Just make sure the animation style is consistent.
REFLECTION
In this task, I focused on refining the prototype for my Faouzia fan page using Figma. The website includes several key sections: a loading page, home page, singles page, tour page, and merchandise page. Having previously worked with Figma on other projects, I found the prototyping process relatively smooth. My familiarity with the tool allowed me to focus more on the creative aspects, such as the layout and interactions.
One of the challenges I faced was finding animation references on Pinterest. I wanted my design to feel dynamic and engaging, and animations play a huge role in that. However, I found it difficult to gather the right inspiration that aligned with my vision for the website. Initially, I had ambitious plans to incorporate a lot of 3D elements into the design, but aI'm scared about I can't do it in the final task. With that in mind, I decided to shift my focus away from 3D and prioritize other aspects of the design that I felt more confident in completing.
One of the most interesting parts of this project was creating the loading page animation. This was my first time working on animations in Figma, and I found it surprisingly straightforward. By creating each frame individually and then linking them together, I was able to produce a simple, effective animation. This process showed me how Figma can be used for more than just static design work—it can also be a powerful tool for prototyping interactions and animations.
Overall, this task pushed me to explore new techniques while also managing my time effectively. I gained a deeper understanding of how to balance creative ambition with practical execution. It was a rewarding experience, and I feel more confident in my ability to create interactive prototypes that are both functional and engaging.
Comments
Post a Comment