Advanced Interactive Design: Task 1_Thematic Interactive Website Proposal

 April 21, 2025

Advanced Interactive Design: Task 1_Thematic Interactive Website Proposal

22 April 2025-

FANG YAOYUE (0372006)

Advanced Interactive | Bachelor of Design in Creative Media | Taylor's University

Task 1: Thematic Interactive Website Proposal

List

LECTURES

INSTRUCTIONS

FEEDBACK

REFLECTION

LECTURES：

Week1

Your task is to create a small interactive website, centering on a clear theme and attracting people's participation in a good-looking and interesting way.

This website is not an ordinary introduction page. Instead, it aims to allow viewers to click, swipe, select, explore and experience it themselves.

The theme can be selected from these directions:

A new product of a certain brand (such as Nike's new shoes)

New beauty products (such as Sephora powder compact)

Movie promotion (such as the premiere of "Dune 2")

Game release (such as the launch of a new game)

Museum or gallery exhibitions

The new albums of the band and the singer have been released

Other things you want to do (but with the approval of the teacher)

Pay attention when doing it:

Unified style: For instance, the sports shoe page should be cool, and the art exhibition page should have an artistic sense.

There must be interaction: not just watching, but allowing people to click, play and experience.

Smooth experience: The page is simple and easy to operate, and it's also very comfortable to view on a mobile phone.

Don't have too much content: Be concise and focused. About 3 to 5 sections are enough.

Interesting and memorable elements such as mini-games, personalized generation, and virtual experiences.

Week 2

In this week, we were giving tutorial for Adobe Animate.

Some takeways:

Adobe Animate is vector based software. 

Choose HTML canvas for the output to be HTML. 

Align canvas on center. 

Two options to import external assets:Import to Stage

Import to Library

Object Drawing (J)A mode that treats each shape you draw as a separate

 object，In class, we learned to draw this small boat by imitating the picture

 given by the teacher.

Fig.1.1

INSTRUCTIONS:

Task 1 To-do List: (Deadline: Week 4)

Proposal (at least 3 ideas)

Process (wireframes, mood boards, flowcharts)

Prototypes in Figma (Displaying "intentions")

Proposal 

WEEK3

I have three projects, namely,
1 Cyberpunk 2077
2 Immersive Gamebox
3 Dead by Daylight

I selected three different web pages for analysis. All three belong to the gaming field. The first one, Cyberpunk 2077, is a science fiction game. I think this is a relatively popular and classic game in the past two years.

The second one is an immersive game experience website where you can visit and play many games, such as Angry Birds.

The third one is Dead by Daylight, which I'm currently playing. I think it's also quite representative among horror games and the one I'm most familiar with among these three themes.

Fig.1.2

Fig.1.3

This week, I showed my proposal to my teacher. Mr.HAMIMI gave me a lot of valuable suggestions. He thought the last two were relatively easy to implement. For instance, there are too many people making Cyberpunk 2077, and I'm a bit tired of it. So he recommended that I do the second or the third one.

After my own consideration, I chose to do Dead by Daylight because I'm familiar with this theme and rarely see websites like this on the Internet.

Click to browse the official website of Dead by Daylight

WEEK4

In class, Mr.HAMIMI guided us step by step to make new animations. Today, we mainly learned tween animation, which was very interesting. We made the ball move in the form of a parabola and also made the car drive on the road.

Fig.1.4

Right-click on the layer > Add Classic Exercise Guide

Draw a line with the Pen tool to create a motion curve.

Go to the first frame and capture the object at the initial point.

Go to the last frame and capture the object at the end point.

Fig.1.5

Fig.1.6 Layout

Fig.1.7 Layout

Fig.1.8 Layout

Fig.1.9 Layout

Fig.1.10 Layout

Fig.1.11 DEAD BY DAYLIGHT WEBSITE

After communicating with Mr.HAMIMI, I delved deeply into my proposal. I incorporated all the sketches and processes into my ppt.

ART STYLE

Design style

Terrifying,

Dark

My sterious

Oppressive (but not overly bloody and violent)

Font style

The main text font is Roboto, Inter, or Open SansAdd

Some elements of horror gamesSuch as bones, spiders, blood, ghosts

Fig.1.12 MOOD BOARD

The final proposal for the Dead by Daylight horror game website

FEEDBACK

WEEK1

This week, Mr.HAMIMI told everyone about our arrangements for this semester. And there is an assignment deadline in the fourth week. We need to complete the production of a web page by the end of the semester. This web page needs to first make a proposal to tell the teacher your ideas.

WEEK2

In class, we made simple animations. The animations were very interesting. Mr.HAMIMI often came to help me figure out where the problems were. He is a careful teacher.

WEEK3

This week, I determined the theme of my website. I decided to create a website with a strong immersive experience and high interactivity. I hope that when everyone browses my website, they can all experience this terrifying and tense atmosphere.

Mr.HAMIMI also said that my theme was good and that more animations could be incorporated into it.

WEEK4

After class, I showed Mr.HAMIMI the animation of the car's movement trajectory I made in class. He thought there was one drawback, which was that it didn't go around the largest circle, but it was still good. Secondly, after looking at the sketch of my web page layout, I could make it more in-depth and write a paragraph to explain and introduce my web page.

REFLECTION

The understanding and practical ability of interaction design have been significantly improved. Through the combination of theoretical learning and project practice, and with Mr.HAMIMI leading us to learn the new software adobe animate in class, he is very careful and patient. I will study hard and hope to have a good grade this semester.

We learned Adobe Animate, which is a software that I had never come into contact with before. Try to create your own animated works. Through practice, I have mastered the basic principles of keyframe animation and tween animation, and realized that animation in interaction design is not merely for decoration, but an effective way to enhance user experience and guide user behavior.