Advanced Interactive Design - Task 1

22.9.2026 - . . 2026 (Week 1 - Week 14）

Ke BoZhi / 0362533

Design / Bachelor of Design （HONS） in Creative Media
Advanced Interactive Design - Task 1

Instruction

Task 1

Web 1 link: https://no.merci-michel.com/en/（Arm wrestling game）

Advantages: The style is interesting and it has the basic interactive functions of a website. 

• The visual rotation effect of the web page background.
• The text on the website is very clear. All the buttons that can be used on the main page are very distinct.
• The background music is in harmony with the content and name of the website. The sliding titles at the top of the website are highly attractive.
• The website is rich in content, with sections for "Topics", "Competitions", "Encouragement Texts", "Failure Texts", and the list of top terms in the lower right corner. Users have a strong sense of participation.
• The rewards after winning and the animation of failure create an urge for the player to keep challenging.

Disadvantages: 

• The response speed is too slow, and it takes a considerable amount of time for the page related to the creator to load. 
• There are no particularly clear play tutorials during the process of playing the games on the website.

Web 2 link: https://www.unbelievablycrap.com/  (Enter an unknown coordinate and find a way to escape.）

Advantages: The style of the website is very unique, and there are some distinctive areas in each section. Each area has its own functions, and these functions are in line with the theme of the website.

First Part:

• In the upper left corner, there are X/Y coordinates and a red dot that is currently displaying the exact position of the mouse on the screen.
• The scroll wheel on the upper right corner of the webpage corresponds to the mouse. When you scroll down further, the achievements in the upper right corner will scroll in real time like the text at the end of the movie.
• At the bottom right corner of the webpage, there is a progress bar ranging from 000 to 100. This progress bar gradually increases as the website slides down until it reaches the second section.
• In the middle of the webpage, there is an automatically rotating portrait designed by the author based on their own appearance. When the mouse passes over this portrait, there will be a kind of X-ray-like perspective image. As you scroll down the website, the text about the design concept and background of this website will gradually pass by on both sides of the portrait, and when the portrait rotates, the text on both sides will automatically give way.

Second Part:

• The background changes from black to white. Many black pixels create a feeling like smoke. The middle figure is enlarged and replaced with a skull. The text in the middle transforms into some reversed adjectives. As the website continues to scroll down, these texts will change back to their normal form.

Third Part:

• At the end of the website, there will be a prompt asking us to find the way out. The entire website turns red. After finding the correct button, it will redirect us to the final interface.

Disadvantages: 

• The entire website is completely silent, with no sound or button sound effects interaction. When entering this website, one would be overwhelmed by a large amount of small text, making it difficult to determine where the website's focus should be.
• When scrolling down to the second chapter of the website, all operations could no longer be performed except for the rotation of the avatar and the sliding of the webpage. Compared to the first part, the level of entertainment value has significantly declined.
• When using the final part, the contrasting colors can make people's vision feel tired or even uncomfortable. The website told me that I needed to find the exit, but it didn't provide any hints. The entire process was somewhat boring and painful. After finding the exit, it only redirected me to an error interface. The ending seemed rather sloppy.

Web 3 link: https://www.gatewaygalaxy.com/（Super Mario Bros. Movie / Gateway Station of the Galaxy) 

Advantages: The design prototype of this website is the scene "Galaxy Gate" from the Super Mario Bros. movie. The background music and colors of the entire website are fully in line with the theme, and the corresponding functions and button designs are exactly the same as those in the movie scene.

• Salute to Mario's pipe-based game system
• A perfectly matching style and music
• The button in the middle of the website corresponds to the Easter eggs(the stolen backpack and the turtle shell) in the movie.
• The real-time world time and morning/afternoon status in the upper right corner
• The robot customer service at the bottom right corner can answer questions and directly press the button to jump to the desired interface. There is no need to figure things out on your own.
• The background music and dynamic effects of the entire website can be paused at any time.

Disadvantages: 

• The style of the website is completely uniform and entirely in line with the movie theme. However, it has little appeal for users who haven't watched the movie or are not interested in it.
• The functions of the website can be fully experienced within just a few minutes, but it lacks good interactivity.

Feedback

Week 1: Select a website for analysis and point out its advantages and disadvantages.

Week 2: Websites with game or anime themes need to pay attention to their target audience. When creating the website, they should understand what the website is about or what kind of story it is telling.