GROUP ASSIGMENT (40%) – SDG-THEMED ABSTRACT MOTION GRAPHICSDISCOVERY/EMPATHIZESDG14 : Life Under WaterGroup Name: PengyouGroup Members:Muhammad Haziq bin Hamdan (293616)Chong Keng Fui (305151)Roslitah binti Madusah (296198)Niza Atiera Syafieqah binti Zawali (293309)Issue: Coral reefs and coastal areas are being damaged by pollution and careless human activity.Reason: Protect coastlinesAudience: General public, especially beachgoers, tourists, and youth.Platform: YoutubeCREATIVE BRIEF (MILANOTE)Creative Brief (Milanote)IDEATIONCONCEPTThe animation begins with the calm voice of a narrator asking a simple yet powerful question. How much do we depend on the reef? The screen then reveals the breathtaking beauty beneath the waves. Colourful coral reefs swim alongside graceful fish and jellyfish, creating a world full of life and harmony. But this beauty does not last. The animation shifts into a darker tone, exposing the hidden dangers caused by human actions. A diver uses regular sunscreen before entering the water. The chemicals mix with the ocean, disturbing marine balance. Coral loses its colour, fish weaken, and toxins spread silently.Things get worse when tourists carelessly throw plastic into the sea. Small marine creatures become trapped in floating waste. The once vibrant reef turns pale and silent. The underwater world, once alive, now feels empty and broken. Then, hope begins to shine through. Tourists start making better choices. They switch to reusable items and use ocean-friendly sunscreen. As these changes grow, the ocean responds. Coral regains its colours. Fish return. Life begins to thrive again. In the final scene, a split screen reveals two futures. One is a dead ocean. The other is full of life and colour. This clear contrast shows how small daily actions can lead to destruction or renewal. The animation ends with a powerful message: “Respect the Reef. Reuse, Reduce, Reef-safe”. It reminds all of us to protect marine ecosystems for the generations to come.Style FrameFor the style frame we combine cartoon style motion and real life footage to make the animation become more realistic MOODBOARDOur mood board focuses on the conservation of coral reefs, highlighting both the beauty and fragility of marine life. Key visual elements include colourful coral, fish, plastic waste, and bleached reefs to show the contrast between life and damage. We also include images of reusable products and reef safe sunscreen to represent positive change.The colour palette uses ocean tones like blue, turquoise, coral pink, and white to reflect both calm and urgency. We follow a flowing layout to show a transition from pollution to recovery. Backgrounds use soft textures like sand and water surfaces to keep the design natural yet clear. These elements together express the message of awareness, action, and hope for the future of our oceans.Elements MoodboardLayout and Composition Moodboard Background Moodboard Storyboard (Handdraw):IMPLEMENTDuring this phase, various platforms have been used to perfect the overall project and smoothen the design process. From using Adobe After Effect, Adobe illustrator and Inshot, every platform has its own purpose with the project.PROCESSi) Adobe Illustrator ( drawing scene)We were taught the techniques with the help of a video tutorial on YouTube and designed a complex underwater scene with the help of Adobe illustrator. The main components which we made different layers of in illustrator were coral, fish, seagrass, bubbles and backgrounds. Such a step was necessary as this enabled us to transfer the file in Adobe after effects where each of the elements was to be transferred to a different layer. In doing so we would be able to animate parts separately. As an example, it would be to make the fish swim or the seagrass sway or even the bubbles acting up in our scene. This multi layered method gave us greater freedom of control, flexibility and a more animated creation of the animation process.ii) Adobe After Effect (kinetic typography)With the help of the scale, rotation and position tools installed in Adobe After Effects, we managed to obtain an interesting and aesthetically appealing result of the typographical effect that the corresponding body part would have to offer, in order to contribute to, or to bring to life the overall impression of the design we have created. These tools allowed us to animate each word or letter rather creatively, to be able to make the text move and have rhythm. As an example, we applied scaling to highlight the keywords by making them larger or smaller and catching the attention of the viewer in critical points. The rotation was used to impart some light-hearted or theatrical twist to the text, making it more vibrant and articulate. In the meantime, the position tool has enabled us to manage the appearance and disappearance of the text in and out of the frame, as well as deliver the flow of the audience through their vision from one place to another. This mix of moves makes the picture deeper and livelier, turning words (static objects) into a strong visual means. Applying these animation techniques is no longer a mere appearance boost but also increases the meaning of the message making the listeners glued to what is being relayed. With the properly done kinetic typography it is possible to achieve emotion, interest, impression and deep impression, particularly when combined with appropriate audio or background graphics. With these tools we were enabled to design a very professional as well as effective visual experience through precise thinking in relation to our typography.These techniques were also applied in the transition segments in order to provide smooth and graphic changes of the scene. Rather than by simple cuts, we have used scale, rotational and position animations to provide better transitioning and closeness. This served to direct the attention of the viewer and it maintained the flow of the animation. It also made the presentation as a whole to look more professional and complete.iii) Adobe After Effect ( Motion Graphic)One of the YouTube videos that we used was a tutorial and we took effects such as the effects of papers unfolding transitions in our project. In this effect, our scene changes became more imaginative and more appealing to the eye. The unfolding movement was more dynamic and special as compared to the simple cuts that just passed by our attention. It added interest and eye-catching to the transitions, which made it easy to keep the audience attentive and amused during the animation.By inputting the Adobe illustrator file, we can get the layer into the Adobe After Effect. It helps us to move the layer by the position, scale and rotation tools. The scale tools help us to focus the scene, so that the audience can focus on scene by scene. iv) Inshot (combine) The InShot application helps us merge our scenes to become one video. With the aid of this application, it assists us in setting good passing in-between the clips, thereby making a flow in the overall video to be smooth and attractive. The InShot also gives us different editing features; trimming, splitting, adding music, and adding effects, to enable us to improve the audio and visual part of our project. Its interface is easy to use, so scenes can be organized in the order one wants, their time can be changed, and the tempo of the video can be controlled. We can spice it up to have some appeal and professional finish to the end product by using features such as filters, text superscriptions, and being able to choose whether to add some background music. Generally, InShot is a great tool to use in the process of post-processing of our work as it allows us to put a shine on our products and make it look and sound pleasing to the eye and ear.SOUND EFFECTTo convey the message of the awareness campaign about the importance of preserving coastal and marine areas, we chose a combination of music and sound effects that are emotional and profound. The aim is to touch the hearts of the audience, creating a sense of responsibility for the issue of pollution and destruction of the marine environment.Music type: Sadness and mysteryBackground music: Illusionary daytime (piano)This music was chosen because of its slow and touching tone. It is suitable for use in several scenes of our video, this music also helps to create a sense of sympathy and realization in the audience.Oceans (piano)The music depicts a vast, mysterious ocean, but now in danger. It is used to show the contrast between the calm of the ocean and the threat of humans to its ecosystem, adding an element of sadness to the damage that has been done.Sound effect:waves crashingThe sound of waves crashing on the beach is used as a natural backdrop to provide a realistic and immersive atmosphere.ThrillerUsed in certain scenes to create a sense of tension, especially when showing the negative impact of human activity on the ocean and coral reefs. This sound effect is intended to dramatically arouse the audience's awareness.Voice Narration:Female Adult FINAL PRODUCT https://youtu.be/tOtITYbKfHA?si=IkcWIBmuzsf_ZxO6REFLECTIONChallenges & Solution to OvercomeChallenge 1: Selection of Sustainable Development Goals (SDG)Initially, our group had chosen another SDG title that interested us. However, after we checked with other groups, we found that the title had already been chosen by another group. This forced us to change and choose another SDG title.Solution: We immediately discussed again in the group and did a brief study of several SDG title options that had not yet been selected. We finally agreed on a suitable title and the title was also related to the origin of two of our group members and was easily accessible in terms of information sources and activity implementation.Challenge 2: Lack of time to complete this assignmentThis happens because at the same time, we are also burdened with assignments from other subjects that also require attention and priority. This time pressure makes it difficult for us to fully focus on this SDG assignment.Solution: We have organized our time management strategy better. We divide the tasks into specific parts for each group member, so that the work can be completed on time. This approach has successfully helped us manage our time more efficiently and reduce work stress.Challenge 3: Lack of skills in using Adobe Illustrator and Adobe After Effects softwareThis is because three of our group members are minor students in this field, and they are less exposed to the in-depth use of these software. This situation somewhat affects the smoothness of work, especially when the tasks require higher technical skills in graphic design and animation.Solution: Group members who were less skilled in using the software took the initiative to watch short tutorials on YouTube and get guidance from Google and their more experienced friends. Through collaboration and mutual help, we finally managed to complete the task with satisfactory results.FEEDBACK PresentationBelow are pictures of our presentation and gimmick sessions; we learned to create engaging presentation gimmicks to engage the audience and raise awareness about our campaign to conserve coastal and marine areas.PresentationGimmick SessionPresentation Slide:https://www.canva.com/design/DAGrQcheed4/IZ9TNBn22S3MUZupBd7Lzg/edit?utm_content=DAGrQcheed4&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton VIDEO REFRENCESTo enhance our motion graphics project, we utilized several tutorial videos that provided comprehensive guidance on various techniques.https://youtu.be/UahA-6QYfC0?si=sG9Bhn092sGYbm8Hhttps://youtu.be/bUj7iQiEXd8?si=8l_VbhPJxeg10f_vhttps://youtube.com/shorts/_ddVPV85Ajs?si=WWwHTlhL3LzaD3kyhttps://youtu.be/sOWZgSLndE4?si=JwhbdgmBBYBC3zZ9https://youtu.be/1kdURN_zqE4?si=QuQ5wJjg0ovn6pkM\Kynetic Typographyhttps://youtu.be/UnK5lGmadSs?si=X9gZXSK4AZ6G7mSVhttps://www.youtube.com/watch?v=r3Hs9eP3muk&list=PL_4HvLFu35yZm2NZ7tpkzx7G6z6snmmO5&index=4&pp=iAQBhttps://www.youtube.com/watch?v=3eZI6E2jApw&list=PL_4HvLFu35yZm2NZ7tpkzx7G6z6snmmO5&index=16&pp=iAQB0gcJCc4JAYcqIYzv

PENGYOU'S ACADEMIC BLOG

GROUP ASSIGMENT (40%) – SDG-THEMED ABSTRACT MOTION GRAPHICS

DISCOVERY/EMPATHIZE

SDG14 : Life Under Water

Group Name: Pengyou

Group Members:

• Muhammad Haziq bin Hamdan (293616)

• Chong Keng Fui (305151)

• Roslitah binti Madusah (296198)

• Niza Atiera Syafieqah binti Zawali (293309)

Issue: Coral reefs and coastal areas are being damaged by pollution and careless human activity.

Reason: Protect coastlines

Audience: General public, especially beachgoers, tourists, and youth.

Platform: Youtube

CREATIVE BRIEF (MILANOTE)

Creative Brief (Milanote)

IDEATION

1. CONCEPT

The animation begins with the calm voice of a narrator asking a simple yet powerful question. How much do we depend on the reef? The screen then reveals the breathtaking beauty beneath the waves. Colourful coral reefs swim alongside graceful fish and jellyfish, creating a world full of life and harmony. But this beauty does not last. The animation shifts into a darker tone, exposing the hidden dangers caused by human actions. A diver uses regular sunscreen before entering the water. The chemicals mix with the ocean, disturbing marine balance. Coral loses its colour, fish weaken, and toxins spread silently.

Things get worse when tourists carelessly throw plastic into the sea. Small marine creatures become trapped in floating waste. The once vibrant reef turns pale and silent. The underwater world, once alive, now feels empty and broken. Then, hope begins to shine through. Tourists start making better choices. They switch to reusable items and use ocean-friendly sunscreen. As these changes grow, the ocean responds. Coral regains its colours. Fish return. Life begins to thrive again. In the final scene, a split screen reveals two futures. One is a dead ocean. The other is full of life and colour. This clear contrast shows how small daily actions can lead to destruction or renewal. The animation ends with a powerful message: “Respect the Reef. Reuse, Reduce, Reef-safe”. It reminds all of us to protect marine ecosystems for the generations to come.

2. Style Frame

For the style frame we combine cartoon style motion and real life footage to make the animation become more realistic 

3. MOODBOARD

Our mood board focuses on the conservation of coral reefs, highlighting both the beauty and fragility of marine life. Key visual elements include colourful coral, fish, plastic waste, and bleached reefs to show the contrast between life and damage. We also include images of reusable products and reef safe sunscreen to represent positive change.

The colour palette uses ocean tones like blue, turquoise, coral pink, and white to reflect both calm and urgency. We follow a flowing layout to show a transition from pollution to recovery. Backgrounds use soft textures like sand and water surfaces to keep the design natural yet clear. These elements together express the message of awareness, action, and hope for the future of our oceans.

• Elements Moodboard

• Layout and Composition Moodboard

 

• Background Moodboard

4. Storyboard (Handdraw):

IMPLEMENT

During this phase, various platforms have been used to perfect the overall project and smoothen the design process. From using Adobe After Effect, Adobe illustrator and Inshot, every platform has its own purpose with the project.

PROCESS

i) Adobe Illustrator ( drawing scene)

We were taught the techniques with the help of a video tutorial on YouTube and designed a complex underwater scene with the help of Adobe illustrator. The main components which we made different layers of in illustrator were coral, fish, seagrass, bubbles and backgrounds. Such a step was necessary as this enabled us to transfer the file in Adobe after effects where each of the elements was to be transferred to a different layer. In doing so we would be able to animate parts separately. As an example, it would be to make the fish swim or the seagrass sway or even the bubbles acting up in our scene. This multi layered method gave us greater freedom of control, flexibility and a more animated creation of the animation process.

ii) Adobe After Effect (kinetic typography)

With the help of the scale, rotation and position tools installed in Adobe After Effects, we managed to obtain an interesting and aesthetically appealing result of the typographical effect that the corresponding body part would have to offer, in order to contribute to, or to bring to life the overall impression of the design we have created. These tools allowed us to animate each word or letter rather creatively, to be able to make the text move and have rhythm. As an example, we applied scaling to highlight the keywords by making them larger or smaller and catching the attention of the viewer in critical points. The rotation was used to impart some light-hearted or theatrical twist to the text, making it more vibrant and articulate. In the meantime, the position tool has enabled us to manage the appearance and disappearance of the text in and out of the frame, as well as deliver the flow of the audience through their vision from one place to another. This mix of moves makes the picture deeper and livelier, turning words (static objects) into a strong visual means. Applying these animation techniques is no longer a mere appearance boost but also increases the meaning of the message making the listeners glued to what is being relayed. With the properly done kinetic typography it is possible to achieve emotion, interest, impression and deep impression, particularly when combined with appropriate audio or background graphics. With these tools we were enabled to design a very professional as well as effective visual experience through precise thinking in relation to our typography.

These techniques were also applied in the transition segments in order to provide smooth and graphic changes of the scene. Rather than by simple cuts, we have used scale, rotational and position animations to provide better transitioning and closeness. This served to direct the attention of the viewer and it maintained the flow of the animation. It also made the presentation as a whole to look more professional and complete.

iii) Adobe After Effect ( Motion Graphic)

One of the YouTube videos that we used was a tutorial and we took effects such as the effects of papers unfolding transitions in our project. In this effect, our scene changes became more imaginative and more appealing to the eye. The unfolding movement was more dynamic and special as compared to the simple cuts that just passed by our attention. It added interest and eye-catching to the transitions, which made it easy to keep the audience attentive and amused during the animation.

By inputting the Adobe illustrator file, we can get the layer into the Adobe After Effect. It helps us to move the layer by the position, scale and rotation tools. The scale tools help us to focus the scene, so that the audience can focus on scene by scene. 

iv) Inshot (combine) 

The InShot application helps us merge our scenes to become one video. With the aid of this application, it assists us in setting good passing in-between the clips, thereby making a flow in the overall video to be smooth and attractive. The InShot also gives us different editing features; trimming, splitting, adding music, and adding effects, to enable us to improve the audio and visual part of our project. Its interface is easy to use, so scenes can be organized in the order one wants, their time can be changed, and the tempo of the video can be controlled. We can spice it up to have some appeal and professional finish to the end product by using features such as filters, text superscriptions, and being able to choose whether to add some background music. Generally, InShot is a great tool to use in the process of post-processing of our work as it allows us to put a shine on our products and make it look and sound pleasing to the eye and ear.

SOUND EFFECT

To convey the message of the awareness campaign about the importance of preserving coastal and marine areas, we chose a combination of music and sound effects that are emotional and profound. The aim is to touch the hearts of the audience, creating a sense of responsibility for the issue of pollution and destruction of the marine environment.

Music type: Sadness and mystery

Background music: 

• Illusionary daytime (piano)

This music was chosen because of its slow and touching tone. It is suitable for use in several scenes of our video, this music also helps to create a sense of sympathy and realization in the audience.

• Oceans (piano)

The music depicts a vast, mysterious ocean, but now in danger. It is used to show the contrast between the calm of the ocean and the threat of humans to its ecosystem, adding an element of sadness to the damage that has been done.

Sound effect:

• waves crashing

The sound of waves crashing on the beach is used as a natural backdrop to provide a realistic and immersive atmosphere.

• Thriller

Used in certain scenes to create a sense of tension, especially when showing the negative impact of human activity on the ocean and coral reefs. This sound effect is intended to dramatically arouse the audience's awareness.

Voice Narration:

• Female Adult 

FINAL PRODUCT 

https://youtu.be/tOtITYbKfHA?si=IkcWIBmuzsf_ZxO6

REFLECTION

Challenges & Solution to Overcome

Challenge 1: Selection of Sustainable Development Goals (SDG)

Initially, our group had chosen another SDG title that interested us. However, after we checked with other groups, we found that the title had already been chosen by another group. This forced us to change and choose another SDG title.

Solution: We immediately discussed again in the group and did a brief study of several SDG title options that had not yet been selected. We finally agreed on a suitable title and the title was also related to the origin of two of our group members and was easily accessible in terms of information sources and activity implementation.

Challenge 2: Lack of time to complete this assignment

This happens because at the same time, we are also burdened with assignments from other subjects that also require attention and priority. This time pressure makes it difficult for us to fully focus on this SDG assignment.

Solution: We have organized our time management strategy better. We divide the tasks into specific parts for each group member, so that the work can be completed on time. This approach has successfully helped us manage our time more efficiently and reduce work stress.

Challenge 3: Lack of skills in using Adobe Illustrator and Adobe After Effects software

This is because three of our group members are minor students in this field, and they are less exposed to the in-depth use of these software. This situation somewhat affects the smoothness of work, especially when the tasks require higher technical skills in graphic design and animation.

Solution: Group members who were less skilled in using the software took the initiative to watch short tutorials on YouTube and get guidance from Google and their more experienced friends. Through collaboration and mutual help, we finally managed to complete the task with satisfactory results.

FEEDBACK

1.  Presentation

Below are pictures of our presentation and gimmick sessions; we learned to create engaging presentation gimmicks to engage the audience and raise awareness about our campaign to conserve coastal and marine areas.

Presentation

Gimmick Session

Presentation Slide:

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

VIDEO REFRENCES

To enhance our motion graphics project, we utilized several tutorial videos that provided comprehensive guidance on various techniques.

https://youtu.be/UahA-6QYfC0?si=sG9Bhn092sGYbm8H

https://youtu.be/bUj7iQiEXd8?si=8l_VbhPJxeg10f_v

https://youtube.com/shorts/_ddVPV85Ajs?si=WWwHTlhL3LzaD3ky

https://youtu.be/sOWZgSLndE4?si=JwhbdgmBBYBC3zZ9

https://youtu.be/1kdURN_zqE4?si=QuQ5wJjg0ovn6pkM\

Kynetic Typography

https://youtu.be/UnK5lGmadSs?si=X9gZXSK4AZ6G7mSV

https://www.youtube.com/watch?v=r3Hs9eP3muk&list=PL_4HvLFu35yZm2NZ7tpkzx7G6z6snmmO5&index=4&pp=iAQB

https://www.youtube.com/watch?v=3eZI6E2jApw&list=PL_4HvLFu35yZm2NZ7tpkzx7G6z6snmmO5&index=16&pp=iAQB0gcJCc4JAYcqIYzv