Task 2 Planning & Prototype

23.05.2024 - 13.06.2024 / Week 5 - Week 8
Michael Chan Henn Loong / 0363611
Advanced Interactive Design / BA of Design (HONS) in Creative Media / Taylor's University
Task 2 Planning & Prototype

LECTURES

Refer back to Task 1

INSTRUCTIONS

Task 2 Interaction Design Planning & Prototype

Requirement

In this task we are required to work on our visual design and start planning our 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. We can build the animation or use reference animation to demonstrate the intended idea of our interactive website.

1st Attempt

So firstly I started working on the proposal I submitted in Task 1 I followed all the themes and concept that I've mentioned there.

Fig 1.0, Inserting wireframe into Uizard, (11.06.2024)

I inserted the wireframe I created in for the portfolio into Uizard, a new platform that I found out while I'm doing some research.

Fig 1.1, Wireframe created by Uizard, (11.06.2024)

So after inserting the wireframe Uizard created a wireframe for me based on it's analysis but apparently it doesn't suits the wireframe that I've created so I proceeded and changed the colors and the layout of the artboard created by Uizard.

Fig 1.2, 1st version artboard, (11.06.2024)

So I followed the wireframe thoroughly and used a charcoal black as the background color and orange for the buttons as mentioned in the proposal.

Fig 1.3, Redesigned artboard, (11.06.2024)

But after a few minutes of rest, when I got back to the artboard I felt like charcoal black is too dull, I can't really feel any passion or maybe I don't think that the users will feel excited looking at something like that so I changed the color into red color which represents Hades as well as brings in more passion and maybe some feelings of danger and excitement.

Fig 1.4, Character research, (11.06.2024)

After finishing with the artboards I went to Google and did some more research on the game and copied a Character image so that I know what characters should I include in my website.

Fig 1.5, Fonts comparison, (11.06.2024)

When I'm done with all the images and buttons for the art board I went and did some research and comparison on the fonts, to figure out which font will I be using for the heading and body text. And my Final choice for the body text is Lora and Cinzel for the headings.

Fig 1.6, Final artboard, (11.06.2024)

Fig 1.7, 1st attempt on prototype, (11.06.2024)

So this is the final artboard of my first attempt on making my prototype. After I've finished this prototype I left it there for few days and went back to it on 10th of June, after giving it a look I feel like this whole design is very bad and it doesn't looks interactive and attracting at all. So I decided to work on another prototype.

Fig 1.8, x16 short vid of 1st attempt, (11.06.2024)

2nd Attempt

After the 1st attempt I noticed that my whole wire frame is bad and it doesn't interacts with the users at all so I started everything all over again, went and did some research on successful interactive websites and took a look on how they design their website to get some ideas on how to make mine.

I went through pretty much every websites that I've found in these 2 links that I'm showing here https://blog.hubspot.com/website/interactivewebsites & https://qodeinteractive.com/magazine/playable-interactive-websites/#violence-conjugale all of the websites that are listed inside are pretty well designed and all of them are unique and also inspired me and taught me that websites have an endless range of possibility.

One of my favorite and most impressed is the website project named Normadic Tribe created by the interactive studio makemepulse. All the scenes are majestic and magnificently illustrated, the animations are smooth too everything is welly organized. Below is a short video of me going through the interactive website name Normadic Tribe, I sped it up to x1.5 so that it wont take so long to finish up the video, enjoy!

Fig 2.0, Normadic Tribe by makemepule, (11.06.2024)

After doing all the research I went back to Figma and started back my 2nd attempt on the prototype and I started with the loading page and the start page.

Fig 2.1, Loading page (left) & Starting page (right), (11.06.2024)

So I was thinking that at the very start of the loading page the silhouette will be whole black and slowly the colors comes up while the loading progresses, after the loading page the Hades word slides in and when the user hovers the cursor over to the word the cursor changes into something else, informing the users that this Hades word is interactive and maybe they should click it to proceed into the home page.

Fig 2.2, Home page (Top) & Introduction (Bottom), (11.06.2024)

After the starting page the users will directly get into the home page and this whole website will be interacted by scrolling down with the mouse. So when the users scroll down on the mouse the website will show them the long paragraph of Hades introduction. After they are done reading the text, they can proceed with scrolling down and they'll get to the characters profile section.

Fig 2.3, Scroll down Effect, (11.06.2024)

Fig 2.4, Character Profile, (11.06.2024)

So in the character profile section there will be images of the characters and also some descriptions of them in the same page. There will only be total of 5 characters in this section, there's only 5 because if I include all the characters there will be too much to handle that's why I've chosen 5 main characters that are family members as the main character.

Fig 2.5, All Character Profile, (11.06.2024)

After the character profiles we'll proceed to the map section,

Fig 2.6, Full underworld Map, (11.06.2024)

So the first page of the map would be the full map of the underworld consisting of Tartarus , Asphodel, Elysium and Temple of Styx. So the idea I thought of is that when the users hover to any of the 4 areas the cursor turns into another form and indicates that the map is clickable and when clicked the map zooms in and show any one of the map that the user have chosen like below.

Fig 2.7, Zoom in Effect, (11.06.2024)

The zoom in effect will be similar to Fig 2.7 but it will not be 3D and when zoomed in for my map it will Fade in to a black screen then fade out to the images shown in Fig 2.8.

Fig 2.8, Areas of Underworld, (11.06.2024)

So each of the areas have their own descriptions and image to show the players how they look and also the back story of the area. After the map we proceeds to the guides with the boons and boss.

Fig 2.9, Guides, (11.06.2024)

So in the guide sections I'm thinking of making it into two sections, so I'll probably add in an effect that will cut the image into two sections and when hover over it'll change image and shows which section the users are choosing.

Fig 2.10, Hover effect example, (11.06.2024)

So the hover effect will be something similar to Fig 2.8 so that users can choose whether they wanna have a look at the boons or bosses.

Fig 3.0, Boons and Boss fights, (11.06.2024)

There will be a total of 8 boons and 4 bosses so there will either be a short voice description of the boons or maybe I'll just include texts inside there to describe the boons, and as for the boss guides I'll probably insert videos of the boss guides in it like in front of the images, something like Fig 3.1.

Fig 3.1, Video on Background effect, (11.06.2024)

Fig 3.2, Multimedia, (11.06.2024)

Last but not least the multimedia section I plan to insert some promoting of the games inside then probably will insert the trailer and also maybe 2-3 clips of in game videos for that section and that's all.

Fig 3.3, Short video of working on 2nd Attempt, (11.06.2024)

Final Presentation Video for Task 2

Fig 4.0, Task 2 Presentation video, (11.06.2024)

FEEDBACK

No feedback.

REFLECTION

In Task 2 of our Interaction Design project, the objective was to delve into the visual and interactive design elements of our proposed website. This task required us to move beyond the static layouts typical of traditional websites and embrace the dynamic nature of modern web design.

It was a fun experience, I enjoyed this task pretty much as we get to pick our own topics or themes so there not really a limit, the only limit is our own imagination and creativity. So I struggled pretty hard from Task 1 and the starting of Task 2 but after doing some research my views are refreshed and ideas starts to come in so it got easier and fun, but there's only one problem which is I'm not sure whether I can really create all the effects that I can think of. I'm not sure of my own skills in creating a website like that, other than that it's fun.

Search This Blog

Michael Chan Henn Loong (0363611)