ADVANCED INTERACTIVE DESIGN: TASK 2

24/09/2024 - 11/09/2025
Week 01 - Week 3
Adrianna Sofea Mohd Fauzi (0350661)
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design: Task 2

1. Lectures

2. Progress
3. Final Outcome

4. Feedback

5. Reflection

Task 2: Interaction Design Planning & Prototype

For our next task, I spent a lot of time focusing on the visual and interactive design for the website. It’s been a shift from just thinking about how it looks to consider how it feels to use it. I’m working on making the site interactive, which means planning out animations and transitions that will make the experience more engaging. I started by creating the wireframes in Figma, going through each page one by one. For each page, I thought about how the animations and transitions would work, trying to picture how they would guide the user and add something extra to the design. Pinterest and Ilovecreatives gave me a lot of great ideas to help me figure out how to bring the design to life without making it feel too overwhelming.

The main thing I’ve been trying to focus on is balance keeping the design consistent but also fun. I want the animations to feel like a natural part of the design, not something that’s added on just for the sake of it. It’s been a slow process, but each page is starting to come together. With every change I make, the design feels a little bit more in sync, and I can see it all beginning to work as a whole.

Fig 1.1 Moodboard

This mood board helped me define the visual direction for the website. I pulled inspiration from a variety of sources to establish the color palette, typography, and general feel of the site.

Fig 1.2 Website References

List of website links:

https://viens-la.com/en/ h
https://www.federicopian.com/
https://mb.studio/
https://www.dianasseafood.com/
https://knith.co/ https://estormpaperie.com/
https://baggy.studio/ https://www.houseofgul.com/
https://zavaluce.it/en-us

I gathered examples of websites that share the aesthetic and functionality I want to incorporate. These references guided my decisions on layout and interactivity.

Fig 1.3 Planning and consulting with lecturer

Fig 1.4 First attempt design

I discussed my initial ideas with my lecturer to get feedback on my direction. He mentioned that it was inconsistent and the layout is too overwhelming. This feedback helped me refine the user experience and led to some tweaks in my design approach.

Fig 1.5 Finalised colour scheme

After experimenting with various color options, I finalized the color scheme. This step was crucial to ensure consistency across the design and to evoke the right mood for users.

Fig 1.6 Figma navigation animation

I created a navigation animation to demonstrate how users would interact with the site. This helped visualize how transitions could enhance user flow.

Fig 1.7 Wireframes

I started building another wireframe for the third attempt to establish the website’s structure. This step was essential to define the user journey and ensure that the layout would support the planned animations.

Website Structure