Task 2 / Interaction Design Planning and Prototype

Shim Yi Xun || 0363292

Bachelor of Design (Honours) in Creative Media
  Advanced Interactive Design DST 60804  

Advanced Interactive Design - Task 2

  Overview  

> Instructions

• Visual Art Direction
• Visual Design
• Animation Planning
• Prototype
• Video Presentation

> Feedback

> Reflection

---

  Instructions  

  Task 2  

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static websites, 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 user-reference animation to demonstrate the intended idea.

Requirement:

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 creating the plan (i.e.: Figma link, Miro link, etc.)

  Visual Art Direction  

Considering to align with the theme of my chosen game, Monument Valley, I intend to follow the game theme and extend this visual aesthetics into my website design. After a series of research into the game elements as well as its style, I ultimately used minimalist and illustration art styles as my overall thematic visual design.

Art direction:

I arranged the art direction for my website's visual style, including the colour palette, fonts, elements and icons, and visual design references.

  Visual Design  

Based on the wireframe and flow chart that I had planned for Task 1, I started to design the website prototype in Figma. I planned to design my website in 2D graphic illustration art style. The scene will have a sense of visual layering, with distinctions between foreground, middle ground and background layers. This will not only ensure my ability to successfully create animations, but also adding a more three-dimensional and immersive feeling to the image.

Since I wanted to show every scene of that game's chapter, so I began by drawing out scenes and button components in Adobe Illustrator first, then imported them into Figma. 

Components in Adobe Illustrators:

Progress in Figma:

Loading Page:
The loading page is very minimalist, and the centre is the mascot of Monument Valley, named Totum.

Home Page:
There will be two navigation buttons at the top, the Home button (left) and the Timeline button (right). In the middle will show the game title: Monument Valley, and you can click the explore button to browse for more content.

Character Intro Page:
This page will briefly introduce the protagonist of this game, Ida.

Scene 1:
Move on to Scene 1, it will start from an island, there will be an interactive button and if you click it, it will zoom into the red flower. 

Scene 2:

Scene 2 is a funnel-shaped cave that passes through a tunnel.

Scene 3:

There will be a mirror next to the tunnel. Same as in Scene 1, clicking the interaction button will magnify into the mirror and reveal Ida's true identity. When you leave the mirror, you'll come to the stairs.

Scene 4:

There will be a spirit talking with at the end of the stairs. Keep dragging the page and there will be a row of coffins. Finally, after interacting with the button, you will place a flower in front of the coffin. 

Footer:

The footer will include the CTA buttons for official social media and website. 

  Animation Planning  

Based on my design conception, I further researched and studied several websites to inspire me on how can I present the sense of visual layering in the website. After then I detailed the design of every transition for each scene and paid attention to the flow whether is it natural or smooth. 

I listed down all the parts I will animate and references that I will refer to in my work. Overall my animations mainly use the ripple effect and transition effect.

  Prototype  

Click here to view Figma Prototype.

  Video Presentation  

Click here to view video presentation.

---

  Feedback  

Week 5

  General  

-

  Specific  

Feedback for prototype design: 
1. Display the full timeline so you won't confuse viewers.

2. You can create a tab for the footer at the scene.

3. For Scene 3, the stairs can show a little bit below the screen to show the viewers that there is more content below.

Suggestion for animation: 
1. The interactive button can add a twinkling effect to let the viewers know that it can be interacted.
2. When making animated parts, you will need to separate your text into different layers for better results.

3. For the spirit animation, you can either draw a mouth and animate it to talk, or the text shows out word-by-word, to make viewers know that it is talking,

Week 6
  General  
If you are in the intent stage, you can choose to display the references of your choice using Canva. If you definitely have an idea for your animation, then you can directly create it in Figma. So when you come to the video presentation, you can just show your Figma prototype and animation.

  Specific  
-

Week 7
  General  
-

  Specific  
-

---

  Reflection  

When reflecting on the interaction design planning and research for this assignment, I realized the importance of a user-centered strategy that balances functionality and user experience. This assignment encouraged me to examine how each design element affects user engagement, usability, and satisfaction. Exploring various interaction technologies gave me a greater understanding of how user needs shape the design process and gave me an appreciation for the iterative process required to refine ideas into functional, intuitive interfaces. Overall, it highlights the importance of empathy and detail-oriented thinking in effective design.