Advanced Interactive Design

25.04.2024 - 19.05.2024 / Week 1 - Week 4
Michael Chan Henn Loong / 0363611
Advanced Interactive Design / BA of Design (HONS) in Creative Media / Taylor's University
Task 1

LECTURES

Disney's 12 Principles of animation

Squash and Stretch:

This principle gives the illusion of weight and volume to an object as it moves. It's the most important principle. For example, a bouncing ball will elongate when falling and compress when it hits the ground.

Fig 1.1, Squash & Stretch, (16.05.2024)

Anticipation:

This principle prepares the audience for an action that is about to happen. For instance, a character bending their knees before jumping.

Fig 1.2, Anticipation, (16.05.2024)

Staging:

This principle is about presenting an idea so that it is unmistakably clear. This can involve the use of camera angles, composition, timing, and the position of characters within the frame.

Fig 1.3, Staging, (16.05.2024)

Straight Ahead Action and Pose to Pose:

These are two different approaches to the animation process. Straight Ahead Action involves drawing frame-by-frame from start to finish. Pose to Pose involves drawing key frames first and then filling in the in-between frames.

Fig 1.4, Straight Ahead & Pose to Pose, (16.05.2024)

Follow Through and Overlapping Action:

This principle makes the movement more realistic and fluid by ensuring that different parts of the body continue to move after the character has stopped. Overlapping action means different parts of the body move at different rates.

Fig 1.5, Follow Through and Overlapping Action, (16.05.2024)

Slow In and Slow Out:

This principle refers to the spacing of the in-between frames at the beginning and end of an action, creating more natural movement. Actions start and end more slowly than the main action.

Fig 1.6, Slow In & Slow Out, (16.05.2024)

Arc:

Most actions follow a curved path rather than a straight line, giving the animation more natural and realistic movements.

Fig 1.7, Arc, (16.05.2024)

Secondary Action:

This is an additional action that supports the main action and adds more dimension to the character animation. For example, the facial expression and body language of a character while they are performing an action.

Fig 1.8, Secondary Action, (16.05.2024)

Timing:

This principle refers to the number of frames between actions, affecting the speed and rhythm of the animation. Proper timing is crucial to making the actions believable and can convey the weight and size of the objects.

Fig 1.9, Timing, (16.05.2024)

Exaggeration:

This involves accentuating actions or elements to make them more dynamic and interesting. Exaggeration can be applied to the character’s actions, expressions, and even physical characteristics.

Fig 1.10, Exaggeration, (16.05.2024)

Solid Drawing:

This principle encourages animators to understand the basics of drawing, including weight, volume, and anatomy, to create more convincing and three-dimensional animations.

Fig 1.11, Solid Drawing, (16.05.2024)

Appeal:

This principle ensures that the characters and animations are engaging and interesting to the audience. It doesn't necessarily mean the character has to be likable, but they should be compelling and able to hold the viewer’s interest.

Fig 1.12, Appeal, (16.05.2024)

INSTRUCTIONS

Task 1 Thematic Interactive Website Proposal

Requirement

Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that it is a movie, the site can simulate movie universes offering virtual tours through time and space, or any other subject previously created in the movie. The aim of any such site is to keep the user engaged in the medium through interactive exploration.

Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:

1. A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
2. Movie promotion
3. Game release promotion.
4. Gallery/Museum exhibit launch
5. Band/Artist latest release.
6. Or anything else you have in mind (subject to the module coordinator’s approval)

In Week 1 class we were introduced to this module and briefed on what we need to do and prepare for the semester, this task requires us to create a proposal for our thematic interactive website and I've actually chose 3 choices for my website, Final Fantasy XIV Dawntrail expension (FFXIV) , Final Fantasy XVI (FFXVI) and Hades.

Fig 1.0 FFXIV, (16.5.2024)

FFXIV is the first game that came to my thoughts when I'm thinking on what game to use for the interactive website proposal as the game is coming out on 2nd of July 2024 too it's perfect for the task as the tasks objective is to create a website proposal for brand engagement

Fig 1.1 Dawntrail Official Website, (16.5.2024)

So I actually went to the official website and took a look at the layout and design, for me overall everything is fine, it's user friendly, clean and straight forward. It's not really a bad thing but by accomplishing those elements I think the website becomes a little bit boring, but I personally like the trailer moving at the background pretty much.

Fig 1.2 Trailer, (16.5.2024) Fig 1.3 Pinterest reference, (16.5.2024)

After analyzing the website I went to Pinterest for some ideas and references, and I found this, which kind of can be used to mimic or create a view that the trailer has shown in Fig 1.2 like ships cruising on the sea and slowly zooms in close up to the sea and others would be like the reference shown in Fig 1.3 scrolling down would all the other contents that are mentioned in the official website.

Fig 1.4 Proposal 1st Try, (16.5.2024) Fig 1.5 FFXVI, (16.5.2024)

But after a weeks rest I felt like working on FFXVI more and started working on the game and even thought of how to use and involve the games element itself in the website so that it brings in more immersion for the users and also make it more engaging for users, but after some thoughts I notice I don't really have the skills to mimic something with that graphics into my website, and I also noticed that Hades is the game that needed the interactive website the most after comparing it with both Final Fantasy websites.

Fig 1.6 Hades, (16.5.2024) Fig 1.7 Website Layout (16.5.2024)

So ultimately I decided to work on Hades for my interactive website. I personally think that the website is too plain and boring, its not cool the colors and too usual I would say and the interfaces are just too normal for me, it felt like there's no excitement or passion in the website. So I made a proposal regarding Hades website.

Fig 1.8 Hades Interactive Website Proposal, (16.5.2024)

For better experience please do click the link and go through the proposal in canva !

https://www.canva.com/design/DAGFOVnu1d4/_HW39nHd6L6NnQpX4evRIQ/edit?utm_content=DAGFOVnu1d4&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

PRESENTATION VIDEO

Fig 2.0, Presentation Video, (19.05.2024)

FEEDBACK

Week 2-4: Absent

REFLECTION

During my three-week absence, I had a lot of time to work on my project, and it was actually really fun. I focused on creating an interactive website for the game Hades by Supergiant Games.

Even though I wasn't at school, I spent a lot of time thinking about and designing the website. Hades is such a cool game with amazing characters and stories, so I wanted to make a website that fans would love. I included things like character profiles and maps of the Underworld to make it interesting and helpful.

I enjoyed figuring out how to make the website look good and be easy to use. It was a great way to combine my interest in web design with my love for the game.

Overall, working on this project was a fun experience. It reminded me how much I enjoy web design and how much I appreciate the creativity in games like Hades.

Search This Blog

Michael Chan Henn Loong (0363611)