Advanced Interactive Design / Project 2: Interaction Design Planning and Prototype

30/05/2024 - 11/06/2024 / Week 6 - Week 8
Iman binti Kamarudin / 0364014
Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media

Project 2: Interaction Design Planning and Prototype

---

---

LECTURES

Week 5 

In this weeks class we learnt how to switch between pages and get it to play an animation and stop on a specific frame. We utilised the action script and button functions.

---

INSTRUCTIONS

TASK 2

Since I had already created my wireframe and prototype in the first project, I just focused on the animations for the website. I created storyboards for the pages that had bigger animations and searched for some sample animations online for the more complex parts that I couldn't really show properly in the storyboards.

Fig 1.1 - Loading Page Storyboard

For the loading screen, the text will come in from the left and then the string where the polaroids will hang from is "drawn" in underneath the text. The clips that will hold the pictures come in from the bottom of the screen and then finally, each picture pops up one by one.

Fig 1.2 - Landing Page Storyboard

Title is being "typed" in. Once users click anywhere on the screen, there will be a transition where the polaroid falls in from the top right corner, covering the screen and then moving to the bottom left corner.

Fig 1.3 - Main Menu Storyboard

Transition will continue from the landing page and the polaroid exits the scene at the bottom left corner. Main menu will feature a bunch of papers subtly moving in an almost circular motion following the shape of the hurricane. Papers in the foreground will also be moving slowly up and down.

Fig 1.4 - Purchase Page Storyboard

Receipt and paper will scale up from the middle of the stage. The receipt will be spinning 360* as it scales up. Money and coins will be sliding in as well as some pens following after and a sticky note.

After creating most of the storyboards (that were able to be clearly conveyed through static sketches), I went online to find some references and sample animations that I wanted to include.

Once I was set on how I wanted everything to be animated, I went into Procreate Dreams to create some rough animations fast. I didn't animate everything directly into Adobe Animate first because I wanted the flexibility to adjust whatever I wanted easily while I was animating. I also wanted to make sure that most of the rough drafts and edits were done BEFORE going into Adobe Animate so that the process would be smoother once I actually developed it.

Fig 2.1 - Rough Loading Page Animation

Fig 2.2 - Rough Landing Page Animation

Fig 2.3 - Transition from Landing to Main Menu Animation

Fig 2.4 - Rough Main Menu Animation

Fig 2.5 - Rough About Page Animations

Fig 2.6 - Rough Character Page Animation

Fig 2.7 - Purchase Page Animation

After I created all my animations, I converted them to GIFS and then implemented them into my Figma frames. However, for the 'About Page' and 'Purchase Page', the quality deteriorated significantly once it turned into a GIF so I unfortunately wasn't able to add them into the Figma prototype.

Fig 2.8 - Figma Wireframe

FINAL

Please click the Canva link below to be able to view all the animated GIFS and videos in the slides.

Canva link: https://www.canva.com/design/DAGHjzY039g/4t1zmALWSvd9QDxlxBE89Q/edit?utm_content=DAGHjzY039g&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Fig 3.1 - Final Presentation Slides PDF

Figma Prototype: https://www.figma.com/proto/rNH42o2AmaP7FVFmz2B9m2/Adv-Interactive-%2F-Project-2?node-id=1-4&t=Kb5nraDw8JvCkBMz-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A4

Final Project 2 Presentation Video: https://youtu.be/lpHKakksP3c

---

FEEDBACK

Week 7

Specific Feedback - The point is to show how everything is going to look like, if you can straight away animate it then that will be better but if you can't then just find sample animations and include them to show what it's relatively going to look like.

---

REFLECTION

My experience with this project was a little bit tough since I wasn't quite sure on how to animate things within Figma. Eventually I just settled on animating everything and then turning it into a GIF to import into the wireframes. Furthermore, I had a hard time figuring out how dramatic or subtle I wanted the animations to be because I wanted to create interest in each page but without making it too overwhelming for users.

I learned that translating your ideas into a physical medium is actually harder than it seems. Additionally, trying to create something that challenges you and pushes you to learn newer things but also to not make something too overly complicated that it's way above your skill level, is difficult. I found myself pausing just every few seconds, sitting there in silence, thinking on how to go about animating every little aspect in each page to be able to, not only animate it in Adobe Animate later, but also to be able to make it look good and FUNCTION properly in Figma as well.