Advanced Interactive Design: Task 2_Interaction Design Planning and Prototype
22 April 2025- 13 May 2025
FANG YAOYUE (0372006)
Advanced Interactive | Bachelor of Design in Creative Media | Taylor's University
Task 2: Interaction Design Planning and Prototype
List
LECTURES
INSTRUCTIONS
FEEDBACK
REFLECTION
LECTURES
Edit Symbol: Edit symbol in Library
In class, the teacher assigned the content of task2 and the final submission date. We are about to start planning the interaction design elements and functions of the website. Unlike traditional static websites, for interactive designs that incorporate animations, the scheme should not only include layout visual effects but also animations.
Tasks in class
FIG.1.1 In class exercise（week5）
FIG.1.2 In class exercise（week6）
FIG.1.3 In class exercise（week7）
In class, the teacher hopes that everyone can incorporate the animations they have learned into Project Two, creating a transition or opening animation. What I want to do is a logo of Dead by Daylight, the process from the virtual to the physical.
TASK 2: (DEADLINE: WEEK 8)
FIG.1.4 figma sketch layout
Dead by Daylight is an asymmetric confrontation horror survival game, in which a Killer battles against four Survivors.
Survivor's winning method: Repair 5 generators, then open the gate and escape.
The killer's way to win: Prevent the survivors from escaping and hook them as much as possible (" sacrifice ").
So for some of the interfaces on the website, I have created two styles, namely Killer and Survivor.
Five main interfaces：
FIG.1.5 HOMEPAGE
FIG.1.6 NEWS
FIG.1.7 COMMUNITY
FIG.1.8 MERCH
FIG.1.9 MEDIA
FIG.1.9 Introduction to the Home Page Button
I have designed a total of seven buttons on the homepage, which are the five directories: game news, community, merch, and media. There are still two play now and one watch trailer.
A unified background is employed, which is the dark forest ridge in the game, creating a terrifying atmosphere.
The overall design uses a late-night background and white text to highlight the contrast, making it convenient for users to view.
FIG.1.10 Introduction to the NEWS Button
This is the news interface. Here you can see the latest game information and gameplay introductions of Hitman and Survivor. You can click "explore gameplay" or "see more" to access the new interface. Of course, after you click on the advanced gameplay, you can select your favorite Hitman or survivor to watch their skills and introductions.
For the entire interface design, I used two color schemes, red and blue, to represent the killer and the survivor. The killer is a red skull, symbolizing evil, while the survivor uses blue to represent the longing for life.
FIG.1.11Introduction to the COMMUNITY Button
This page presents five very famous killers, all of whom come from horror movies or urban legends. The planners incorporated them completely into the game.
The murderer Miles was panic-stricken in the moonlight
The ghost samurai of Japan
The electric shock incident in China
Chainsaw Killer Bob
The pig girl who was electrocuted by a chainsaw
I will present the entire interface in a sliding manner. Click the triangular buttons on both sides of the interface to slide.You can also click on the killer you are interested in and discuss with the players how to play the role of the killer well.
FIG.1.12 Introduction to the MERCH Button
The seven pages will be swiped from top to bottom. By controlling the button on the right or sliding the mouse wheel, you can view more game peripherals. All the displayed are electronic artworks related to the game. Players can click on the pictures to purchase them.
FIG.1.13 Introduction to the MEDIA Button
This is the media interface where you can watch the game's trailer, introducing new killer characters and new maps. At the very bottom, the "sign up" and "explore gameplay" buttons have been added, allowing you to jump to the official website interface of the game, or select the "Killer" or "Survivor" interface.
The red logo of dead by daylight was used above. I inserted "sign up" and "explore gameplay" here. Many users found the trailer interesting after watching it and would click the button to directly jump to the gameplay experience interface.
FIG.1.14 MEDIA dead by daylight game promotional video
FIG.1.15 animation
FIG.1.16 The figma layout is complete
FEEDBACK
Week 5
This week in class, when I was doing spider animation and the teacher came to check on my homework, although I didn't follow the teacher's requirements completely, I did quite well. The teacher gave me some encouragement and even joked with me that I had achieved 50% of the effect, Mr. HAMIMI is an interesting teacher and I like his classes very much.
Week 6
This week is an online course. As always, Mr.Hamimi is teaching everyone new knowledge online. I'm very grateful for Mr.HAmimi's efforts. I showed Mr.Hamimi my homework and he thought I needed to enhance the immersive experience. I decided to strengthen the contrast between the background and the characters and add more horror elements.
Week 7
This week, what we need is to complete Project Two, and produce the presentation of the online acting and record the online speech. We need to show the interface of figma, which is a very important step. After class, I showed Mr.Hamimi my fimga layout and he thought it was very good. I hope I can keep it up.
Week 8
I began to sort out the page hierarchy and main modules for the "Dead by Daylight" website, such as: killer character introductions, survivor skill guides, game mechanism guides, version update logs, etc.
Through the information architecture principles explained by the teacher, I realized that when designing a website with a horror theme, the clarity of information is especially important. Although the game atmosphere is chaotic and oppressive, the presentation of information must be organized so that users can truly obtain useful information.
Week 9
Interactive design for production and delivery. During this stage, I entered the UI finalization phase of the project. I used Figma to draw the key pages of the website, including the home page, character card display page, and skill description page.
To match the visual atmosphere of "Daylight", I used elements such as dark backgrounds, blood effect, and worn-out material textures. At the same time, I maintained the readability of the interface. In terms of interaction, I added mouse-hover animations and click-to-expand skill details effects to the character cards, making the page more "game-like".
Week 10
In terms of animation design, I attempted to incorporate slight vibrations and blurry flickering effects in the "character selection cards" to simulate the tense atmosphere in the game. Although these effects enhanced the expression of the atmosphere, after testing, it was found that overly intense animations actually interfered with reading and operation. I mainly used the walkthrough testing method, asking users to complete specific tasks, such as "finding the skill description of the character 'Doctor'", and observing their pause points and click paths.
REFLECTIONS
Experience
This task was quite an exciting challenge for me. Since I chose Dead by Daylight as my website theme, I had a clear vision from the beginning—but translating that vision into a working website wasn't as easy as I thought. I had to carefully select horror-themed assets and create a consistent dark mood throughout the site, which took some time. Creating the UI to reflect the game's gritty, suspenseful atmosphere was both fun and frustrating at times. Adobe Animate was a new tool for me, and I struggled a bit during the in-class exercises, especially when it came to timeline animations. However, after spending extra time at home to explore the platform, I felt more confident and was able to enjoy the creative process a lot more. Seeing the final high-fidelity prototype come together felt very satisfying—it was like watching my concept come to life.
Observations
While working on this task, I realized how important small details are when creating a themed website. Choosing the right font, layout, and icons really helped convey the dark horror feel of Dead by Daylight. Colour also played a huge role—sticking to a darker palette with hints of red really reinforced the identity of the game. I also observed that learning Adobe Animate requires patience; one or two sessions aren’t enough to fully grasp how things work. You have to really play around with the tools to understand how animations, buttons, and timelines come together. It made me realize that even a simple-looking interaction on a website could take a lot of time and effort to get right.
Findings
I found that working on a website based on something I’m genuinely interested in made the whole process much more enjoyable. Being familiar with Dead by Daylight helped me design the interface in a way that felt true to the game’s identity. I also discovered that good planning and time management are essential—rushing the work last minute would’ve definitely affected the quality. By doing things step by step, I was able to refine my ideas and make adjustments along the way. Finally, I now have a much greater appreciation for professional websites. There’s so much work involved behind the scenes—designing, testing, animating—it all takes a lot of thought and creativity. This task taught me to look at digital design from a whole new perspective.
评论
发表评论