Collaborative Design Practice / Task 3
3.9.2023 - 31.10.2023 (Week 6 - Week 10)
Moey Jo Min (0350567)
Collaborative Design Practice / Bachelor of Design (Hons) in Creative Media
Task 3
.png)
Moey Jo Min (0350567)
Collaborative Design Practice / Bachelor of Design (Hons) in Creative Media
Task 3
Jump Links
INSTRUCTIONS
RESEARCH
Fig 1.1 Productos - Tropical heal
While I was surfing through Pinterest to find for inspiration for the
animation, I found some layouts that I think will be interesting to be
animated. The similarities between the designs are they colors are playful,
and the typography shows a sense of movement.
Fig 1.2 3D Rotating Text Tutorial - SonduckFilm (17.10.2023)
While animating, I referred to this tutorial to create the 3D rotating text
effect. I tweaked some parts according to how I want it to be animated.
Fig 1.3 Bouncy Text Tutorial - ANIMOTION by Sharin Y (17.10.2023)
This is one of the kinetic typography tutorials that I like to take reference
whenever it comes to motion graphics. The bouncy effect makes the text look
more lively and playful.
PROCESS
WEEK 6
We had a short consultation with Ms Lilian after the presentation of week 6.
Since we were focusing on Task 2 for the past few weeks, it was
understandable that we have yet to start Task 3.
Ms Lilian urged us to work faster as the other groups are already working on
the more refined sketches during Task 2, while our designs still require
some exploration.
Fig 2.1 Bamboo Tumbler 3D Models by Jo Min (10.10.2023)
Evaleez and I are in charged of the 3D Models, and we agreed that she will
do the 3D models and I will animate. However, our logo has yet to finalize
and Evaleez was working on it. I offered help, and Evaleez asked me to help
modelling two of the bottles. Since I was not too busy on week 6, I modelled
three bottles.
Fig 2.2 Bamboo Tumbler 3D Models Progression by Evaleez (10.10.2023)
This is the 3D model progression by Evaleez. She works really fast,
considering she is also working on the logo. The quality also seems quite
good even at this stage.
Fig 2.3 Scene 3 Edit (10.10.2023)
I tried editing one shot from scene 3. The cup in the middle is rendered in
Blender. Then, I edited the orange slices and some leaves around the cup in
Photoshop.
Fig 2.4 Final Chosen Logo (10.10.2023)
As the students from the School of Media and Communication (SOMAC) needs the
product for shooting, our client chose the logo above and placed their
order.
Fig 2.5 Animated Logo - GIF (10.10.2023)
After our client decided on the logo, I animated the logo to be used for the
promotional video. It can also be used for the website. As the strokes of
the logo is illustrated using the 3 pt. round brush, it could not be
animated using trim path in After Effects. So, I animated the logo using
mask by keyframing the mask shape. The challenging part was to maintain the
speed of the keyframes of different spacing. It requires some adjustment in
the graph editor to make the animation less jerky.
Fig 2.6 Website B&W Layout (10.10.2023)
Britney, Cheryl and Siew Ni did some layouts for the website with the chosen
typeface and graphic elements. The layouts match the visual style that our
client agreed on during Task 2.
Fig 2.7 Packaging Design Progression (10.10.2023)
Initially we wanted the packaging to be laid flat when opened, and the
information will be printed inside. Cecilia suggested to add tearing lines
to the packaging, so that it is easier to lay the box flat.
- Our group has to work faster as we are slightly behind compared to the other groups
- We need to get the text information from TBS by this week
- Confirm with TBS about the final format of the deliverables (physical or digital?)
- Start designing the proposed deliverables
- Confirm with our client on the final output format
- Get text information from client
WEEK 7
We had a meeting with TBS and SOMAC on Friday night for us to clarify
certain things. During the meeting, someone from SOMAC asked if they can
produce the designs with their art direction and their brand name. We then
only found out that there are three groups from the SOMAC side and they are
competitors. Evaleez informed Ms Lilian about this situation, and we were
told that we will only be graded on our output which we don't have to worry
about the SOMAC side.
Fig 3.1 Bamboo Tumbler Final 3D Models (15.10.2023)
After Evaleez completed the other two 3D models, she uploaded it to our
drive folder so that I can download it and proceed to do the promotional
video. I found the bamboo texture image she used looks more realistic
compared to the texture I made manually. Thus, I used the same image texture
that she used and made some adjustments to make the color more similar to
the actual product images from our client.
Fig 3.2 Editing Engravings in Photoshop (16.10.2023)
I was planning to have the engravings of the logo directly on the 3D models,
since there is one scene in the storyboard that the tumbler showing the logo
is animated. However, I couldn't find an effective way to make this happen.
Hence, I decided to edit the engravings onto the rendered images in
Photoshop and make changes to the animation of the affected scene
accordingly.
Fig 3.3 Website Layout Options - Home Page (14.10.2023)
Fig 3.4 Website Layout Options - Products Page (14.10.2023)
Fig 3.5 Website Layout - FAQ Page (14.10.2023)
Fig 3.6 Website Layout Options - About Us Page (14.10.2023)
Fig 3.7 Website Layout Options - Sign In Page (14.10.2023)
Britney, Cheryl and Siew Ni are in charged of the website design. They created
the layout of the pages with a few color options for our client to choose.
- The packaging design needs to work a bit quicker
- Good progression on the promotional video
- The graphic elements used in the black and white website layouts are interesting
- Work on the deliverables independently during the independent learning week
WEEK 8
Fig 4.1 Website Chosen Layout - Home Page (17.10.2023)
Fig 4.2 Website Chosen Layout - Products Page (17.10.2023)
Fig 4.3 Website Chosen Layout - Products Subpage (17.10.2023)
Fig 4.4 Website Chosen Layout - FAQ Page (17.10.2023)
.png)
Fig 4.5 Website Chosen Layout - About Us Page (17.10.2023)
Fig 4.6 Website Chosen Layout - Sign In Page (17.10.2023)
The above are the layouts that have been chosen by our client.
Fig 4.7 Website Prototype in Figma (22.10.2023)
This is the website prototype created in Figma. Click here to view the website prototype in Figma
Fig 4.8 Scene 1 - Bamboo Forest Footage (17.10.2023)
For scene 1, I used a bamboo forest stock footage to show the relation between
the product. The video is downloaded from Pexels.
Fig 4.9 Animating in Blender - Scene 2 (17.10.2023)
As scene 2 will be showcasing the product, it will be 3D animated. I
animated in Blender. Most of the movements are the camera movement instead
of moving the object itself. Minor tweaks were done in the graph editor
window to make the movement smooth. I also animated the brightness of the
light as the camera moves to ensure the tumbler is nicely lighted.
Fig 4.10 Scene 3 Editing in Photoshop - Orange Juice (17.10.2023)
For this shot, I rendered a transparent PNG of the top view of the tumbler
(cup) with orange juice in it. I think the orange juice doesn't look
realistic, so I made some adjustment in Photoshop. I also added some orange
slices and leaves around the cup.
Fig 4.11 Scene 3 Editing in Photoshop - Coffee (17.10.2023)
Initially I made the coffee liquid in Blender. However, it doesn't look
like coffee as there are no bubbles or foam on the surface. I tried making
the texture in Blender but it didn't work. Thus, I cropped a coffee image
and placed it on top of the cup, and edited in Photoshop. Coffee beans are
also added as the background.
Fig 4.12 Scene 3 Editing in Photoshop - Strawberry
Smoothie (18.10.2023)
For the strawberry smoothie, I created using the same method as how I
created the coffee. The original image of the smoothie was green, as I
didn't manage to find a pink smoothie shot from the top view. I edited the
color of the smoothie to make it pink and added strawberries and lemon
around the cup.
Fig 4.13 Scene 5 Engravings (17.10.2023)
I edited the engravings on the tumblers in Photoshop. After that, I exported
the images.
Fig 4.14 Scene 5 Layout (18.10.2023)
I imported the edited images into Illustrator to arrange the elements into
the frame. I added the graphic elements created by Cecilia in the
background.
Fig 4.15 Scene 5 Adjustments (18.10.2023)
From one of the drafts, Cheryl suggested that I lower down the opacity of
the graphic elements in the background, as they are a bit distracting.
Besides reducing the opacity, I also added shadow behind the tumblers to
make them pop up more.
Fig 4.16 Scene 6 (18.10.2023)
Initially in the storyboard I planned to add a link to the website. However,
since the website will be a prototype at this stage, it is not ready for the
visitors to look through during the innofest. Thus, I added the QR code to
their Instagram page, there will be more information provided by SOMAC once
our client started posting.
Fig 4.17 Animating in After Effects (19.10.2023)
After preparing all the assets, I animated according to the storyboard in
After Effects. Some parts are different from my initial plan during the
storyboard stage for improvement, as they do not turn out nice.
Fig 4.18 Promotional Video - Draft 1 (20.10.2023)
This is the first draft of the promotional video. Our client requested to
change the font to Croissant One instead of DM Sans.
Fig 4.19 Promotional Video - Draft 2 (21.10.2023)
I changed the typeface to Croissant One according to our client's request, and
they are good with it. I was worried that certain parts with longer line
lengths will turn out bad, as Croissant One is a display typeface, but the
outcome looks acceptable.
On week 9, I was given feedback to improve the typography. Ms Lilian suggested
that I retain the form of the typeface Croissant One, without adding the shape
layer behind the text or creating outline for the text. I really appreciate
the feedback, because it wasn't something I would think about in the
past.
Fig 4.20 Packaging Design Ideas (20.10.2023)
Our idea for the packaging is to make it reusable, because one of the
selling points of the bamboo tumblers is eco-friendly. Evaleez, Cecilia and
Vernice came up with 2 ideas for the packaging design. Idea 1 will be a
regular box opened from the top or the bottom, and there will be
instructions for the buyers to cut open the box, and it can be used as a pen
holder. The second idea is a sleeve box, where there will be a long piece of
paper with instructions on how to fold it. The folded piece will be placed
back into the box, and the box can be used to store items like tea bags. We
decided on Idea 2, as it doesn't require extra tools, and the idea of
storing tea bags is somewhat related to the product.
Fig 4.21 Packaging Design by Cecilia (21.10.2023)
Fig 4.22 Packaging Design by Vernice (21.10.2023)
Fig 4.23 Packaging Design by Evaleez (21.10.2023)
Cecilia, Evaleez and Vernice are in charged of the packaging design. Based
on the chosen packaging design idea, each of them worked on the design.
Within our group, we gave some feedback to make some amendments. After that,
the designs were sent to our client for them to decide.
Fig 4.24 Chosen Packaging Design (22.10.2023)
This is the packaging design chosen by our client, which is designed by
Vernice.
Week 8 Feedback:
- *no feedback from Ms Lilian due to Independent Learning Week
- [TBS]: For the website, change the background color of the product page into cream color. For the promotional video, change the font to Croissant One instead of DM Sans.
Week 8 Next Course of Action:
- Finalize designs to be submitted on Week 9
WEEK 9
Fig 5.1 Packaging Design Mockup (23.9.2023)
After our client decided on the packaging design, Vernice created the
mockup packaging.
Fig 5.2 Packaging Design Prototype (23.9.2023)
The above is the packaging design prototype done by Cecilia. The printed and
cut out the design and folded it into the box to see how the packaging will
turn out.
Fig 5.3 Amendment - Scene 1 Shot 1 Text (24.9.2023)
Ms Lilian suggested that I don't use a shape fill below the text. Based on
the feedback, I placed the text at the bottom left of the frame, and I used
both Croissant One and DM Sans.
Fig 5.4 Amendment - Scene 1 Shot 2 Text (24.9.2023)
For this shot, Evaleez suggested that I place the text in front of the
bottle. I think it makes the overall visual look more modern.
Fig 5.5 Amendment - Scene 3 Text (24.9.2023)
For scene 3, 4 and 5, I used DM Sans instead of Croissant One as the line
lengths are longer compared to the other lines.
Fig 5.6 Amendment - Scene 5 Background Color (24.9.2023)
The previous version I was using a light salmon color instead of the orange
shown above. Ms Lilian mentioned that the color looks off the palette, so
changed it to orange.
Fig 5.7 Amended Promotional Video (24.10.2023)
The above is the amended promotional video based on Ms Lilian's feedback
during week 9's consultation.
Fig 5.8 Promotional Video
Attribution (24.10.2023)
This is the attribution for the video footage, images and background music
used in the promotional video.
Fig 5.9 Presentation Slides (29.10.2023)
Once we have completed all the designs, we created a presentation slides for the presentation on Week 10.
Week 9 Feedback:
- The packaging design looks nice, it incorporates the graphic elements well. Consider adding "Green Earth Movement" to the logo, as we only have the logo mark itself.
- The promotional video is well-planned. However, the typography needs improvement. Since the typeface Croissant One has a beautiful form, don't use a box below the text or outline the text. The pink color is not suitable as it is not in out color palette. If we want to use the pink color in the video, use the same color for the packaging and website as well.
- The website layout is good. Avoid formatting the text with justify as it will cause the rivers. The blue image for the sign in page needs to be greener.
Week 9 Next Course of Action:
- Amend based on lecturer's feedback
- Submit all designs to TBS
- Prepare slides for Week 10 presentation
- Fill up Weekly Assessment
- Update blog to be submitted on Week 10
SUBMISSION
Fig 6.1 Task 3 Presentation Slides (31.10.2023)
REFLECTION
Experience:
The process of creating the design from our sketches was not too difficult for
me, as I already planned what needs to be done in the previous task. It is
just that I have to manage my time properly to get everything done by the
independent learning week. I would say the most "frightening" part of this
task was the communication with our client. As we are all quite busy at this
point of time, we usually communicate through our Whatsapp group chat. There
were a few times of miscommunication due to spelling errors causing us to be
confused. Luckily the problems were solved in no time. I think this is a
really good opportunity for us to visualize how our working environment in the
future will be. We get to know how we should handle certain things and be
aware of what might happen.
Observation:
I noticed that meetings are important. Relying on Whatsapp group chat may
cause misinformation, which occurred a few times between our client and
us. Besides, I observed that I have made some improvements in 3D modelling, lighting, and animating. I should work harder and expand my knowledge regarding the topics for further improvement.
Findings:
The promotional video is mainly animated using After Effects. I didn't really
understand how the graph editor in After Effects work besides easing in and
easing out. After learning 3D animation in the previous semester, I have a
better understanding in graph editor, which is quite similar to the graph in
After Effects. Besides that, while creating the 3D models, I found out that I
have slight improvement in lighting. I should consciously observe the
surroundings or artworks to learn how light affects a scene. I also realized I
tend to have typing errors even double checking. I should be more sensitive to
spelling errors, or check the spelling with online tools to avoid the
mistakes. I still need improvement in transitions, especially for motion
graphics.
Comments
Post a Comment