Advanced Interactive Design / Task 2

on

 20/05/25 - 10/06/25 Week 4 - Week 8

Sheren Princessa Davon / 0362134

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 2: Interaction Design Planning & Prototype

INSTRUCTIONS


EXERCISES

Week 5: Intro to Animation


Fig 1.2 Week 5 Exercise

Week 6: Button Animation



Week 7: Website Intro Animation



TASK 2: Interaction Design Planning & Prototype

This task is a continuation of Task 1 where we did our proposal for our thematic website. I finalized my color palette and decided to first illustrate the icons that I planned to use for the icons used in the home page.

Fig 2.1 Illustrator

Fig 2.2 Assets Illustrated

Prototype
Then I started working on the prototype itself on Figma. I struggled with the navigation bar, especially making it responsive so I decided to let it be for now ><

Fig 2.3 Figma process

FINAL SUBMISSION

Here's the link to my Prototype on Figma: CLICK HERE

( https://www.figma.com/proto/L2ODs0oOG1CIqZ9HxaIvmj/Prototype?node-id=65-14&t=OO2zImCidwUpJb5V-1&scaling=contain&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=65%3A14 )

Presentation Slides:
Fig 2.4 T2 Final Slides
T2 Prototype 


Prototype Website Walk-through:

Fig 2.5 Prototype Website Walkthrough - Week 7 (10/06/25)

REFLECTION

Creating the prototype was actually quite fun as it was a topic that I personally chose. I've always loved this movie and I wanted to capture the whimsy and character of Mr. Fox. At first I struggled on how to properly combine the concept of the book (illustrations) and Wes Anderson's filmmaking and visual style. Though both book and movie was quite visual in their storytelling, I wanted my website to be more minimalist yet convey the same whimsy and aesthetic of the story. 

After not using Figma for a while, I also struggled in creating a functioning prototype, especially with the navigation bar that I didn't have time to fix. I also struggled in finding good examples and references that I could use in my website to maintain the overall vintage/soft aesthetic of my concept. Some of the animations were very complex and I was scared that it would be too much. This is a thing to take note of when I'm actually building my website later on in the final project. But with the help of the in-class tutorials, I have a rough idea of what and how to incorporate these animations and effects in my website later on.






Comments

Post a Comment