Collaborative Design Practice: Task 3

28.05.2024 - 18.06.2024 ( week 06 - week 09 )
Len Hoi Yee / 0353430
Collaborative Design Practice / Bachelor of Design in Creative Media
Task 3

---

Logo animation 

For the logo animation I have decided to go for a 3d animation and highlights the logo with a light sweep across the logo. 

Fig 1.1 3d effect  

adjusting the brightness and contrast to create 3d effect 

Fig. 1.2 Dropping shadow 

Drop shadow at the back to create depth.

Fig 1.3 Added 3d camera 

To view the object in 3d, i added the 3d camera. 

Fig 1.4  Adjust angle

I adjusted the angle to 45 degree for both x and y axis and 15 degree for z axis. This angle will then slowly rotate back to facing towards the audience. 

Fig 1.5 Logo text animation 

A slow fade in animaiton for the Quantocube text will fade in once the logo is done. 

Fig 1.6 Keying green screen 

Tutorial referred: https://youtu.be/pDY7CEjfhe8

I have referred to a tutorial on youtube to key the green screen away and replace with the app launching animation, this animation intend to transition the videography to motion graphic part where it will introduce the app. 

Fig 1.7 Making Pngs 

I have made some pngs for the video in AI to make the video more interesting as the pngs pop in.  

Fig 1.8 Animate scene 8

Scene 8 is where the motion graphic part starts, I started animating the pngs created and the chose the right font for the text. However, I was only able to create a layout and rough animation as the app wireframe was not fully done, hence, on my end, I prepared a rough animation for the pitch video as a guide and I will animate it properly once the wireframe is ready. 

Fig 1.9 Split screen for scene 10 

Moving on to the scenes, following the storyboard this scene will be split into 3 to show different contractors' pov when they receive notification from the community page, and they can began start their business by accepting the job posted by the homeowners. 

Fig 1.10 Animate scene 11

Scene 11 is where homeowners will receive notification from contractors who accepted their post on the community problem and offer them a service. 

Fig 1.11 Animate scene 12

Homeowners can view the contractors' profile listing and check which contractors' suit them best. 

Fig 1.12 Animate scene 13 & 15

When homeowners accept the offer, they can track their project progress. 

Final Outcome 

Link :  https://www.canva.com/design/DAGIRyBLxd0/XS4zFO8C4liYCSVl7j_Uww/view?utm_content=DAGIRyBLxd0&utm_campaign=designshare&utm_medium=link&utm_source=editor

Final Logo animation : 

PPT Slide:

Pitch Video ( rough ): 

Link: Pitch Video rough.mp4 - Google Drive

Reflection

Experience 

In this task, I was in charged of the motion graphic part, however, due to time constraint, I was not able to explore more fun and creative animation for the pitch video, hence, the outcome was very rough. For the videography, our team shot it on campus with the script and storyboard prepared. We have prepared 2 versions of the videography for back up. However, after exploring me and Jamie thought that the second version which is the faulty microwave act up and caused an electric shock to the main character was more interesting and it had more different camera angle and positions which made the video interesting. Therefore, we went for that version rather than our 1st version which is water pipe leaks. All in all, I was quite disappointed at myself as I wasn't able to produce a slightly improved version of the animation to be presented to the client and my lecturer, hence, I will prove myself more in the next task and exerts my full potential in the motion graphic video. 

Observation 

While exploring the layout and animation for the motion graphic, I was struggling with compositing because it is one of my weakest aspect. I spent most of the time exploring the composition of the pngs and text for them to harmonise together in a layout. I have observed that even the font text used says a lot, basically even the slightest detail has to follow the art direction to match the consistency of the project. Determining the art direction of a design is the most crucial part of a project. I took a lot of time exploring the text animation, to make all the components mix well with each other. Therefore, I always spend 1/4 of the day to make sure the animation is perfect. 

Findings 

I had to made sure that the pngs used in the video must follow our art direction to make the entire project consistent. Even the pngs used, must be accurate and straightforward to make the video informative and interesting with the help of the graphics used. I have found out that to ensure a smooth flow of the video is not easy, I had to make sure that the transition matches the overall video and the app concept, hence, there goes more time spent. Nonetheless, I would give more effort in completing the video with full passion and creativity to produce a perfect outcome.