UNIT6_SA_KaiMendoza_23036161.pdf

Portfolio
U N I T 6 - P L A T F O R M S 2
K A I M E N D O Z A
1 1 / 1 2 / 2 3
DISCLAIMER: When copying links from a PDF sometimes it adds spaces to
the link. Please ensure there are no spaces in the link and it will work.
1

Time & Movement (3-19)
Strategy & Identity (20-36)
Table of
contents
2
Intro/Information (4-6)
Research (7, 14-15)
10-Second Clips (8-11)
30-Second Draft (12-13)
Final Outcome (16-19)
Intro/Information (20-23)
Research (24-26)
100 Flags (27-28)
2 Flags (29-30)
Final Outcome (31-36)

Time & Movement
P L A T F O R M P R O J E C T 1
3

Project 1
Brief AC Enquiry
This brief immediately piqued my interest because, as a mainly digital
designer, film is a somewhat new medium for me. However, I also
thought that the opportunity to explore new mediums would be a good
learning experience so I was excited to get stuck in.
The deliverables for the brief were as follows:
Each group member makes 2x10 second individual portraits presenting
the 2 other group members.
Each group edits their 60 seconds of clips together to form a 30-second
“group snapshot”
The TM community will engage in an in-class debate to collectively
decide upon the overall format to link all 30-second “group snapshots”
into a “Community Collaboration”
4

Project
Statement
Originally, the goal of our project was to create a short film about each of the members of our
group, with an overarching narrative about traveling and exploring a new place. However,
throughout the process, we found that a much more compelling narrative would be our growth in
our relationships with one another. Because of this, we changed our goal for the project to the
creation of a short film that successfully captures the process of the creation of the video as well
as us getting to know each other. Throughout the video, we purposefully used a variety of both
visual and audio techniques to reflect the diverse personalities within the group, showcasing our
individual mannerisms, characteristics, and unique perspectives. Ultimately, the video aimed to be
a visual narrative, about how group work can be beneficial in fostering meaningful connections
within a group or even within a whole class.
AC Communication
5

Progress
Map
Started the initial
research into
portraiture and
unconventional
portraits
Audio and video
induction at CSM.
Interviewed group
mates with question on
video to get to know
eachother
Trip to Camden Town
Market with group
mates for more footage
of mannerisms
In class peer review of
first two 10-second clips
of group mates.
+ Feedback for next
review
Work in and outside of
class with group
members to ideate and
edit 30-second first
draft clip
Second in class peer
review of 30-second
draft.
+ Feedback for next
review
More in-depth research
with group on technical
video/audio additions
based on peer feedback
Final work in and out
of class with group to
create final draft of
30-second clip.
Switched narrative
and added
music+audio that was
more cohesive with
the visual aesthetic.
Open Studio!
Set up display and
prepared place for
viewers to give
feedback
Small peer-review in
class and preparation
for Open Studio
combined class video
6

initial
research
AC Enquiry
Much of the initial research included looking
into portraits and the aspects that affect
how the portrait is perceived.
This investigation helped demonstrate how
conventional portraiture (left) is often used
to accurately depict the subject and show
power or authority.
On the other hand, unconventional
portraiture (right) can more accurately
capture how the subject is perceived by
others or themselves, as opposed to how
they actually look.
7

AC Process
Shooting footage
CSM
We had our film and audio induction on the
first day of filming.
After that, each group member was filmed
and asked questions created by the others
to get to know each other and familiarize
ourselves with the visuals/audio/lighting
systems.
Later that day we also filmed each other
telling stories, each time focusing on a
different mannerism unique to the
storyteller that helped portray their
personality.
8

AC Process
Shooting footage
camden
To create the 10 sec clip deliverables for the
next peer-review my group and I decided to get
some more footage.
To do so, we planned a trip to the Camden
Town Market to get more shots that related to
the stories that each of use had told.
We also decided that each of use should have
an individual camera so that we could easily
capture candid moments of our group
members that represented each others
personalities and mannerisms.
9

10-sec clip
AC Process
editing footage
For the first outcome, I opted to keep my 10-second clips
relatively basic.
The editing focused mainly on the small movements and
mannerisms that we detected while watching each other tell
a story. I also had the clips cut between different angles to
keep the visuals interesting and fresh.
Finally, I experimented slightly with the audio and how the
layering of different audio clips could be used to create a
tone of chaos and confusion which fit the theme of the story
being told.
https://drive.google.com/file/d/1t_rW3T1k21Ni78YR0fybnr02U_VtQoTT/view?
usp=sharing -Shareef
https://drive.google.com/file/d/1nSPppmmJcDFo7ZHKnfnJFWpVcZ2fKNPg/view?
usp=sharing. -Sophia
10

First outcome-PEER REVIEW
10 SECOND CLIPS AC Communication
I received a lot of great feedback for the first outcome
which helped my group and me with our trajectory for
the project.
An aspect of the editing that many of my peers found
effective was the visual focus on the person telling the
story as opposed to only on the narrative.
The chaotic but controlled audio layering and cuts
seemed to be effective. However, the cutting together of
different angles and viewpoints throughout the clip left
it feeling open and with no conclusion which is
something my group and I aimed to work on with our
next iteration.
11

30-sec clip
AC Process
editing footage
To create our 30-second clip my group and I
chose our favorite elements from each of the six
10-second clips.
We decided to pursue a narrative of travel since
our stories were all related to travel/getting lost.
Because of this, we decided to splice audio from
each of our stories together to create a narrative
about becoming lost in London.
Editing was still quite simple and was a collection
of our best clips compiled one after the other
with some simple layering.
12

SECOND OUTCOME-PEER REVIEW
30 SECOND CLIP
AC Communication
During the peer review of the 30-second clip, my group
received a lot of great feedback regarding the direction
of our narrative.
Many of the comments recommended that our
narrative revolve around how we had become closer
and more comfortable with each other throughout the
experience of creating this project.
On the technical side, the layering of clips in the video
was well-received but the audio is still not a perfect
match for the chaotic storytelling style of the visuals.
https://drive.google.com/file/d/10Jn8AUxMAfnykA
I0P4rJnC5mlZu7uO49/view?usp=sharing
13

Outer Space
Collage Animation:
https://www.youtub
e.com/watch?
v=XAm4i1X7L_Y
Collage
Animation
Project:
https://www.yout
ube.com/watch?
v=h3RM3VrrFp8
My group and I decided to lean into the
controlled chaos style as well as make our
film more visually interesting. We found
that the pacing of the clips lacks variation.
So we looked into using more traditional
techniques such as stop motion.
By mimicking the choppy movement of
traditional paper animations, we were
able to slow the pace of the film, while
also adding visual interest that supported
the narrative
References
Research AC Enquiry
14

References
Research AC Enquiry
We also decided to add music to bring all of
the clips together. This song by U2 uses a
range of media that all lines up with the music
to make a seamless but chaotic music video.
We also took inspiration from the movie
Suicide Squad, which uses pop-up elements
cutouts, and jump cuts to quickly introduce
the personality of each character.
Using the techniques from these videos, we
edited our film to quickly but clearly introduce
each of the us, while also following the music
seamlessly.
Suicide Squad Intro
Trailers:
https://www.youtub
e.com/watch?
v=XXMrXyA3Yp0
U2 - Hold Me, Thrill
Me, Kiss Me, Kill Me:
https://www.youtub
e.com/watch?
v=t4mTFQvtiPc
15

With all of the comments and research in mind, we
decided to change our narrative to be the
connections that we made with each other, and how
they grew throughout our interactions over the
course of the project.
It was at this point that we started to implement the
techniques that we had learned from our research to
the music. These techniques included stop motion,
overlays, match cuts, jump cuts, and more (some
images to the right).
Finally, we mixed the audio so that it fit the chaotic
feeling of the video.
Final AC Process
editing footage
16

Final Outcome
The final product was a 30-second
loop that started with a chaotic
layering of miscellaneous clips and
audio representing our first
interactions in a group as we felt
each other out.
As the film progresses the clips
become slightly calmer
symbolizing use becoming more
comfortable with each other and
as a group.
https://drive.google.com/file/d/17
UtuUGt3PoPvIG7piyVd9daYlhwnw
eE9/view?usp=sharing
17

Final outcome
contextualization
AC Communication
18
Ideally this film, in combination with the films
created by the rest of the class, would be
displayed in a theatre or experience exhibit.
It would include the full class film being
projected or played in front of a large seating
area with audio, as well as some individual
films being played alongside it without audio
throughout the room (like in open studio).
I think the exhibit space works best because
the films, when put together, are meant to be
like an experience.

Final Outcome
Open Studio
For the open studio, my group and I decided to
project our video onto a canvas background and
border it with some cutouts of snapshots we took
during our trip to Camden Town for filming.
The desk contained a computer so that viewers could
listen to the film as well as a cluttered desk to
represent the chaotic nature of the film.
The main feedback we received for the film was that
some areas focused too much on the technical
aspects such as the transitions and editing, so that
the narrative was less clear.
AC Communication
19

Strategy & Identity
P L A T F O R M P R O J E C T 2
20

Project 2
Brief AC Enquiry
I originally picked the Strategy & Identity platform because after
looking at the previous briefs I thought that it fit best into my future
interests which are related to UX/UI Design.
However, after reciveing the flag brief I found that I was going to be
creating a project much different from what I had originally imagined.
Even so, I was excited to be able to explore mediums outside of my
comfort zone, while also knowing that I would still try and bring in my
UI design interest into the project.
The deliverables for the brief were as follows:
One A1 or larger sized flag
One or more deliverables that would elevate or meaningfully add onto
the flag design
21

Project
Statement
For this project, the location that I decided to base my flag and deliverables on was “The
Zone” or the flow state. I focused mainly on the feeling of getting into the zone and the
experience of being in the zone. The flag itself represents the movement of water and
ripples and the way that this motion and flow connect to the feeling of being in the zone,
effortless and free. Alongside the flag, I created an animated version of the flag that goes
along with a playlist that is meant to fully immerse the viewer in “the flow state” or zone. I
also decided to create a prototype of an application that would help a user plan their trip
“to the zone” which also helped solidify “The Zone” as a place with a flag, instead of just a
state of mind. Additionally, the app features the same playlist that I have connected to the
animation, as part of the trip-planning experience.
AC Communication
22

Progress
Map
First class discussing
and critiquing flag
design.
Initial research and
decision upon location
for the flag
Location “The Zone”
chosen and research
into relevant design
aspects for deliverables
Starting and designing
the 100 flag ideas in
preparation for the in
class peer-review
In class peer review of
100 flag design.
Narrowing down to 10
most successful designs
Deciding on most
successful elements of
the 10 chosen flags.
Combining/creating
final 2 designs
Second in class peer
review of 2 final flag
design
+ Feedback and ideas
for which design to
continue forward with
Working in the screen
printing studio to create
film positives and print
flag onto fabric
Ideating and planning
for app prototype.
Using Figma to create
the high-fidelity UI
prototype to replicate
the functionality of a
real trip planning app
Open Studio!
Set up display and
prepared place for
viewers to give
feedback
Creating final animated
flag design in
aftereffects.
Curating playlist to go
along with the animated
flag design
23

initial
research
AC Enquiry
Before beginning the project in class we first
discussed and critiqued an article which
discussed the norms and requirements of
creating a “good flag”.
However, before starting to make a flag I had to
decide upon a location for my flag. Since I had
recently seen the movie Soul I decided upon “The
Zone” or “Flow State”for my location.
Through this research I looked into what it
actually means to be in the zone as well as how it
feels. I also found that floating in water or space
was very common in depictions of being in the
zone.
24

References
Research AC Enquiry
One of my biggest influences visually was the
movie Soul, which was also my inspiration for
using the zone as a physical location.
When characters in the movie are depicted as in
the zone, they seem to float in the air with their
eyes closed, fully focused on whatever it is they
are doing.
This as well as the color palette of this scene,
heavily reminded me of the feeling floating
underwater with your eyes closed which heavily
influence my design process.
25

References
AC Enquiry
Research
Knowing that I wanted to include a
UI Design element in my design, I
also did a good amount of research
regarding the layout and design of
other successful apps.
After reviewing other trip planning
apps such as trivago, trip advisor,
etc. I decided that in order to fit the
theme of my location I would use a
dark UI that used whatever
highlight colors I use within my final
flag design.
26

AC Process
In-class flags
To start our process of ideation for the
first 100 flags, we created 20 flags
based off of prompts in the first class.
Each of these designs were limited to
about a minute of creation time
making sure that we were putting our
first thoughts of the prompt onto
paper.
This helped with the process of
creating the first 100 flags because it
allowed me to free myself from being
critical of every design and instead let
myself flow (or enter the zone).
27

First outcome-PEER REVIEW
100 flags AC Communication
For the rest of the flags I used a variety of
design techniques including paper cutouts
layered over a differently colored piece of
paper, monochrome color schemes, digital
media, and even some designs created by my
peers for a fresh perspective.
During the class review my peers helped me
to narrow down my 100 designs to the 10
most successful (right).
Out of these I found that primarily simple
designs using large geometry to create
negative space were best received.
28

AC Process
Cutting Down
From here, I next had to cut down my 10
designs to 2 for the final peer review. Using a
system that we had previously disucssed in
class I ranked each of my 10 for their message,
strategy, and form.
I also focuse on which designs had the most
visually interesting elements that also had
meaning in terms of my chosen location.
The result of this was 4 flags (right) which
ranked the highest and I thought that I could
combine together to create the most successful
flag depiction of the zone.
29

SECOND OUTCOME-PEER REVIEW
2 flags
AC Communication
The first flag used a black and white color palette
with a hourglass symbol in the center symbolizing
how time moves differently while in the zone. The
second flag uses the layering of 3 shades of blue to
represent water which is often connected to the
feeling of being in the zone.
During the feedback stage, my peers thought that
the second design had more potential through the
meaning.
I also got a lot of recommendations for deliverables
such as an ad for an airline that takes you to the
zone, as well as creating an animated version of the
flag to visually represent the zone.
30

AC Process
Screen Printing
The process of screenprinting the flag was
difficult but I decided to pursue it in order to
get the layering effect seen in my first
design.
I first created a black and white Photoshop
file for each of the three layers which were
then printed as film positives (top left). These
positives were then put onto a screen each
using UV emulsion fluid and printed through
onto the fabric using ink and a squeegee on
the specialized printing tables (top right).
After repeating the process three times I was
left with my final flag (bottom).
31

AC Process
Animated Flag
The first deliverable that I work on was the
animated version of the screen printed flag.
Originally I had planned to animated the moving
flag in photoshop using frame by frame
rotoscope animations. However, I found that the
frame by frame technique made the animated
choppy unless the frame rate was much higher
which time simply wouldn’t allow.
Instead I used the effects in aftereffects to
create a flowing ripple animation that I thought
represented moving water more succesfully.
https://drive.google.com/file/d/1glJRKjofagsZ8h-
z4eNGU6V99jU-MhJL/view?usp=sharing
32

AC Process
Prototype App
The app is designed like Trip Advisor or Trivago,
enabling users to plan trips to the zone for various
purposes. It allows users to customize their trips
based on their specific reasons for going in the zone
like work, sleep, focus, etc.
First, I planned out all of the screens and utilities that
I wanted to have included in the app, at which point I
started to design using my flag color palette in
Figma. I also created a set of custom icons for the
locations using the same color palette. Finally, I
connected all of the buttons and screens so that the
prototype would work similarly to a real app.
https://www.figma.com/proto/mX6ISktEsFCWgi3RvACHci/The-Zone-
App-Prototype?type=design&node-id=2-6&t=nxcBwFQND48ZitEd-
1&scaling=scale-down&page-id=0%3A1&starting-point-node-
id=2%3A6&show-proto-sidebar=1&mode=design
33

Final Outcome
The outcome for my projects was
a single physical flag
accompanied by two digital
deliverables.
The first of these was an
animated version of the flag that
was to be experienced alongside
a playlist of songs that I thought
best fit the feeling of being in
“The Zone”.
Secondly was a high-fidelity
prototype of an app that would
allow users to plan and
personalize their trip to “The
Zone” created in Figma.
34

Final outcome
contextualization
AC Communication
35
The contextualization for the physical flag is
simple enough seeing as it would most likely be
displayed like any other.
For the animated flag, since it also goes along
with a playlist to help viewers get into the zone, I
think that it would be displayed on a screen with
the music playing in the background.
Finally, because the app is most likely something
that would be used right before beginning an
activity where being in the zone would be
required, it would be used on a mobile device
for ease of access.

Final Outcome
Open Studio
For the open studio I opted to display my screen-printed flag on
a canvas behind a desk with the rest of my deliverables on it.
I had hoped to display the animated flag on a small screen
below the physical flag with headphones coming from my
computer to play the playlist of calming songs I curated to go
along with it. However, the loan store had closed so I was
forced to use a peers computer to display it.
On the left, I had a display of the working prototype of my app
for viewers to interact with and explore. I also included a QR
code so viewers could pull it up on their own devices.
AC Communication
36

UNIT6_SA_KaiMendoza_23036161.pdf

Recommended

Recommended

More Related Content

Similar to UNIT6_SA_KaiMendoza_23036161.pdf

Similar to UNIT6_SA_KaiMendoza_23036161.pdf (20)

More from makaiodm

More from makaiodm (7)

Recently uploaded

Recently uploaded (19)

UNIT6_SA_KaiMendoza_23036161.pdf