Advanced Interactive Design - Task 2

30.10.2024

Graciella Limpah / 0364517 

Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors University 

Task 2 : Interaction Design Planning and Prototype

---

INSTRUCTIONS

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, 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.

Week 6

In week 6, I let the lecturer see what I have done to my prototype, and he advised me to decide on the theme first before doing it, so it is going to be easier. After that, I decide my theme to be streetwear theme. Here are some of the references : 

fig 1.1 References

fig 1.2 References

This is the flowchart : 

fig 1.3 Flowchart

FIRST DRAFT

For the loading page, I make it simple and have a cat paw since the theme is Meovv and it is associated with cat. I also changed my font type from what I have proposed before because it did not seems to reflect the theme which is street wear. 

Here is the loading page

fig 1.4 Start page

For the Main page after the loading page, I make animation for the background popping out the meovv picture in the middle, continue to the description of meovv and button to member and music.

fig 1.5 Home page

After the main page, there is a sliding animation for the member, this part is to first introduce how many member are there in meovv, as well as adding a page before introducing each of the member.

fig 1.6 Member Page

This is the individual member page. I make it circular in the side because I think it is fun, also adding brush texture behind the member picture itself to make it look more 'streetwear'.

fig 1.7 Member page

For the member, I make the animation to turning animation while pressing the left or right button. then, when hovering to the member picture on the above part, it's going to change into the bottom part.

For the music part, I am going to put the video for the background as well as the link to the music video in the page.

fig 1.8 Music Page

Here is the full screenshot of my first draft : 

fig 1.9 Full Screenshots

FINAL PROTOTYPE DRAFT

In week 7, I ask the lecturer for feedback, and he commented that my prototype is not consistent, as for the background color, the element that I use, and he suggested me to change and have initial sketch first so it will be lot more easier for me. Then I go to my figma and start a new draft for this final prototype and make it as consistent as I could. Here is the changes I made.

First, for the loading page, the lecturer suggested me not to use the border on the start button because it looked weird. So, I deleted the border and leave it to just text. Then, I also add the hovering effect at the start button to make it look better.

fig 2.1 Loading Page

Next, for the main page part, I didn't really change anything because as from the feedback, the lecturer said that it is okay. Here is the main page.

fig 2.2 Main Page

Next, is the member page. In this page, I do change almost all of it, as well as the components because from the previous draft, the member page is really not suitable because of the inconsistent. Here is the updated member page.

fig 2.3 Member Page

I also add the arrow effect in the member's picture so that there are more picture.

Last one, is the music page. I just change the text of the music. And for this page, I wanted the background to be a video but I can't do it on figma, so I stay using a picture.

fig 2.4 Music Page

After updating the prototype, I felt this is much more consistent than the first draft.

Video Presentation

Figma Link

https://www.figma.com/proto/hWhOQ92yOxEhRA9bBFR79k/MEOVV-final?node-id=3-46&t=tWXIoMXHFh0nJAtn-1

---

REFLECTION

Doing the prototype for me is kind of confusing, because not only what content should I bring in, but also I need to think of the animation, layout, theme, etc. Finding the right typeface that suit is also not that easy. Feedback from the lecturer really help me to think more about the theme since I don't have any theme in the first place. After deciding what is the theme gonna be, it is easier for me to do the layout as well as thinking how the animation should look like and what elements I should put on. Moreover, I also need to think how can I bring this prototype to animate and make the animation look simple but good, therefore I try to make the animation simple but appealing. For me this task is quite challenging but I know the next task, which is doing this in animate will be more challenging.