Labels

Collaborative Design Practice / Task 3: Produce rapid prototypes, test and iterative designs

28/05/2024 - 18/06/2024 / (Week 6 - Week 9)
Derin / 0354969 / Design in Creative Media
GCD 62204 / COLLABORATIVE DESIGN PRACTICE
Task 3: Produce rapid prototypes, test and iterative designs


INSTRUCTIONS

   

Task 3: Produce rapid prototypes, test and iterative designs - Group (20%)
Your group will now produce a number of inexpensive, scaled down versions of the product or specific features found within the product, so you can investigate the problem’s solutions generated in the previous task. Prototypes may be shared and tested within your group’s members itself, or on a small group of people outside the design team.

Deadline:
Week 9

TASK 3

Vectors

For the pitch video, we divided tasks based on our specializations. Me and Sejin are in animating for the pitch video as we specialize in Digital Animation.. Meanwhile, Glen and Adifa concentrated on creating vectors for the video according to the scenes from the storyboard, drawing on their specialization in entertainment design.

The following is the first draft for the vectors in place.

Fig 1.0 First look into the scenes

According to feedback from Ms. Lilian, there was a concern that the backgrounds were competing too much with the character vectors for attention. To address this, we followed her suggestion and adjusted the backgrounds to a monochrome color scheme, reducing their prominence. Sejin skillfully modified the colors, transitioning them to grayscale while preserving the original colors for key objects such as the light bulb and computer. Here's how it turned out:

Fig 1.1 Final look

I've also made adjustments to the character vectors to ensure better organization for animation purposes. Previously, there were issues with the vector layers and some parts seemed cut off, like in the example below: when moving the arm, the overall doesn't cover the whole body and got cropped. I also organized the vectors into separate layers to ease the animation process.

Fig 1.2 Initial vectors

Fig 1.3 Changed vectors

Here are the final vectors that I changed and used in my part of the animation.

Fig 1.4 Finalized Character Vectors

Fig 1.5 Finalized Street


Animation

I divided the work with Sejin: she focused on the homeowner's side and the app showcase, while I handled the contractor's side (part 1) and the ending (part 2). This section was split into two parts accordingly.

Part 1

I animated the pitch video using After Effects. My process typically involves starting with basic animation using the Position. Scale, and Rotation effects under the 'Transform' properties. This is done after adjusting the Anchor Point accordingly. I frequently apply Ease In to achieve smooth transitions and utilize overlapping techniques to create natural, bouncing animations. Motion blur is also applied to emphasize the impact of the movements.

Fig 2.0 Transform function

For the zoom in and out effects, I utilized the 'Parent & Link' function in After Effects. I linked the layers to a null object and achieved the zoom effect by adjusting the Scale property, scaling the layers up or down as needed. I also use this technique when I want to create a follow through animation and match cut transitions.

Fig 2.1 Parent & Link

Fig 2.2 Match Cut Transition

Here is the final outcome for part 1!


Fig 2.3 Final Outcome for part 1

Part 2

For the second part, I additionally utilized the Puppet tool to animate the following segment along with the other animation techniques I implemented.

Fig 3.0 Puppet

For this scene, I separated the arm into two layers for the handshake animation. The anchor point is positioned at the arm's joint, and I linked it to the other arm layer to ensure they rotate together, using a follow-through technique.

Fig 3.1 Follow through technique

After exporting everything, I compiled them together to make part 2, here is the result!


Fig 3.2 Final Outcome for part 2


Final Outcome

Pitch Video

Afterwards, Sejin compiled our respective works together, here is the final outcome!


Fig Final Outcome for Pitch Video
 

Presentation Slides


FEEDBACK

Week 7 
The color is quite intense; consider using a monotone or sketchy style for the background.

Week 9 

App Design:

  • Xie Yi suggests omitting the overview on the main page for the contractor's side. Microsite:
  • Increase the prominence of the download button (make it larger?).
  • Improve clarity in the sign-up and log-in sections, as they are currently unclear on the microsite.
Pitch Video:
  • Align the narration with the actions in the animation.
  • Some colors, like the yellow used for the light bulb, seem out of place since they aren't used in the app. Consider being more creative with our color palette. Billboard:
  • The design doesn't effectively convey that it is promoting an app.

REFLECTION

It was a pleasure to finally animate the pitch video. I had a great time working with my group mates, especially Sejin, the senior who taught me some techniques in After Effects. Fitting the animation into a short duration without making it awkwardly fast was a challenge, but I believe the final outcome is satisfying. I learned a lot about working with a team and delegating tasks. I continue to improve my communication and animation skills.


Labels: