Advanced Interactive Design: Task 3_Final Project
June 08, 2025
Advanced Interactive Design: Task 3_Final Project
22 April 2025- 26 July 2025
FANG YAOYUE (0372006)
Advanced Interactive | Bachelor of Design in Creative Media | Taylor's University
Task 3
List
LECTURES
INSTRUCTIONS
FEEDBACK
REFLECTION
LECTURES
INSTRUCTIONS
TASK3
I created the "community" interface based on the sketch drawn for me by Mr. Hamimi. I also incorporated elements from "DEAD BY DAYLIGHT" to create a tense atmosphere.
Fig1.1 The sketch drawn by Mr. Hamimi for me
Fig1.2 community
And I also added a question discussion interface, which enables players to have discussions with each other. These are some common questions. You can directly click on the question to enter the discussion.
Fig1.3 community
On the left is the original button, while on the right is the improved one.
Fig1.4 button
Fig1.5 The improved interface of the button
Fig1.6 The subsequent Figma page
This week, I completed my animation. I drew the killer, the survivor, the bloodstains and the game logo in Procreate, and then imported them into Photoshop. After that, I proceeded with the animation production. Here is the final product of my animation.
Fig1.7 Game logo design
Fig1.8 Animation layer
Fig1.9 Animation drawing
Animation production
Fig1.10 home page
Fig1.11 Gameplay Introduction
The website introduced the gameplay concepts for both survivors and killers, and also updated the latest killer skills to help players deal with unfamiliar new killers.
Fig1.12 Video insertion
Fig1.13 Video insertion
Fig1.14 Video insertion
Fig1.15 Video insertion
Videos have been added to the home, community, merch and media sections, creating immersive experience websites.At the same time, you can also click the volume button on the top right to choose whether to play the sound or not.
Fig1.16 Slider image / Carousel image
Fig1.17 Slider image / Carousel image
Fig1.18 Slider image / Carousel image
Of course, I also added a large number of promotional posters as carousel images to enhance the visual effect and improve the reader's experience.
Fig1.19 Community Page
Fig1.20 Community Page
For the "community" page, I followed Mr. Hamimi's advice and studied the Steam community interface. Then, I made some modifications based on my own ideas and designed the webpage to look like it did in Figma at that time.
Click here to view the website "Dead by Daylight" created by Fang Yaoyue
Note: Please do not access this webpage using the Taylor campus network. I don't know why I can't access it. Please use your home Wi-Fi instead. Thank you.
Webpage displays the video link of "Dead by Daylight"
FEEDBACK
WEEK 11
"Dead by Daylight" is a game primarily available on consoles and PCs. Its user base usually accesses the website using a computer browser. However, considering that there are also many mobile users, I made the following optimizations to the page modules. Through these efforts, I gained a deeper understanding of how to maintain the visual style while also focusing on accessibility and compatibility. The case studies in the course also taught me some commonly used debugging techniques in the industry.
WEEK12
This week, our focus was on interface fine-tuning and detail refinement, particularly on enhancing the "pleasure" aspect of user experience (UX). In the prototype, I incorporated more natural page transition effects and micro-motion effects. Although these details do not affect the main functions, they can significantly enhance the professionalism and immersion of the website. I also learned from the teacher's comments that "rhythm" is important for user experience - animations should not be excessive but should be appropriately placed to complement the interaction nodes.
WEKK13
This week, we began preparing the final project presentation and report materials. I have compiled the entire process of the "The Early Dawn Murder" special website, from its initial conception, design exploration to the final product. Through the organization during the preparation stage, I have also gained a clearer understanding of my strengths and weaknesses. For instance, I performed well in terms of visual consistency, but there is still room for improvement in the clarity of content hierarchy. The suggestions given by the teacher made me realize that both detail control and presentation logic are equally crucial.
WEEK14
This is the final week. This is an opportunity to systematically present all the design outcomes, user research, and iterative processes. I used the website themed around "The Walking Dead" as the project outcome. I particularly emphasized how to combine the original atmosphere of the game with the usability of the webpage, as well as my own growth in motion effect handling and responsive optimization.
I also inserted the "Dead by Daylight" animation onto the homepage of the website. The entire animation and the website are very well-matched. The teacher and my classmates also thought the entire animation was very interesting. I will keep working hard.
REFLECTION
Experience
Throughout the Advanced Interaction course, I worked on designing a fan-based website for the horror-survival game Dead by Daylight. The experience was both challenging and rewarding. From initial research to final presentation, I went through a complete UI/UX design process — including wireframing, high-fidelity prototyping, interaction animation, and user testing. This was my first time applying such a structured workflow to a themed project, and it gave me a practical understanding of how real-world digital design projects operate.
Observations
As I worked on the project, I observed that users engage with horror-themed websites differently than with typical interfaces. They expected a strong narrative presence, atmospheric visuals, and immersive transitions. However, too much animation or overly dark visuals can quickly compromise usability. I also noticed that users prioritized clarity and quick access to character skills, especially in a game like Dead by Daylight where player decisions rely heavily on detailed knowledge of in-game mechanics.
Findings
One of my key findings is that the balance between thematic immersion and functional design is crucial. A well-designed horror-themed interface must not overwhelm the user with visual effects at the expense of clarity. User testing revealed that micro-interactions, tooltip guidance, and responsive layouts significantly improved the user experience. I also learned that early feedback and iteration are vital. Without usability testing, many small but critical issues would have gone unnoticed — such as the placement of navigation buttons and mobile loading time.
评论
发表评论