Application Design II: Final Compilation
04/26 - 07/26 / Week 1 - Week 14
Brendan Fedya / 0376283
Application Design II / Bachelor of Design
(Hons) in Creative Media / Taylor's University
Application Design II: Final
Compilation
TASK
➼ Exercise 1: Game Observation Study
https://canva.link/10t8wkckpyvskc8
➼ Exercise 2: Game Visual Analysis
After doing our observation study, we then proceed to plan the ideas for our game. We do that by deciding its position mapping, artistic target, and style range finder—comparing to other games in the market. Here are the slides:https://www.canva.com/design/DAHJdBY2ia4/qZzCe34vESUvaHx-thnbGQ/edit
➼ Proposal
For our proposal, our group discussed and came out to redesign subway
surfers into a horror-like theme, something that people unusually do on
simple games such as the endless runner genre. This hint that the game is
something special, hence it could invite more players to actually try this
concept out. It is supported by our team strengths in this concept also, as
my teammates did a lot of artworks related to horror themes
previously.
We brainstormed about moodboard after, and decided where to place our game on the artistic target, style range finder, etc while identifying the must, nice, and good to haves as well.
I came out with the name Trencherous, from the word 'trench' representing physical and psychological depth, and 'treacherous' reflects the hidden dangers, difficult choices, and constant struggle for survival—which mimics the game.
We brainstormed about moodboard after, and decided where to place our game on the artistic target, style range finder, etc while identifying the must, nice, and good to haves as well.
I came out with the name Trencherous, from the word 'trench' representing physical and psychological depth, and 'treacherous' reflects the hidden dangers, difficult choices, and constant struggle for survival—which mimics the game.
I took part in creating UI designs for the game since I'm the only
UI/UX stream member. I sketched out the main pages needed to occupy
the environment designs and character designs from them. This quick
sketch allows me to identify how I create the layout future on.
I took references from some game with similar theme and possible
artstyles, such as Metro Exodus, Identity V, and The Last of Us.
Mr. Fitri gave me feedback that for UI it will be better if I tried
photobashing with Photoshop rather than Figma. It will further convey
the mood of the game through the generous amount of features that
could be used to edit elements and images.
I took part in creating UI designs for the game since I'm the only
UI/UX stream member. I sketched out the main pages needed to occupy
the environment designs and character designs from them. This quick
sketch allows me to identify how I create the layout future on.
I took references from some game with similar theme and possible
artstyles, such as Metro Exodus, Identity V, and The Last of Us.
Mr. Fitri gave me feedback that for UI it will be better if I tried
photobashing with Photoshop rather than Figma. It will further convey
the mood of the game through the generous amount of features that
could be used to edit elements and images.
➼ Homepage
I mainly use my teammate's environment for this page. But I felt that
the perspective is not on point for me to put my buttons. Hence I
stretched it to the way I want, layered it with another level of
background to give a sense of horror, and psychological 'problems'.
Also photobashed some elements in to fill in negative spaces.
Here's the final result:
I mainly use my teammate's environment for this page. But I felt that
the perspective is not on point for me to put my buttons. Hence I
stretched it to the way I want, layered it with another level of
background to give a sense of horror, and psychological 'problems'.
Also photobashed some elements in to fill in negative spaces.
Here's the final result:
Here's the final result:
➼ Armory Page
By the time I created this page, my teammate has not created the
character yet, but I want to implement the character in a sitting pose
in the page already. So what I did is to use a placeholder at the
moment, and will swap it with the character my team have designed.
I used a red brush to highlight the buttons, and through
stylized fonts. My team gave me feedback that the fonts could be kept
simple and legible, hence I researched about past World War documents,
and find fonts that actually portrays that mood. As for the red brush,
Mr. Fitri asked me to use real blood splatters instead, since brushes
seems too blocky and unrefined.
The yellow face is also something to be fixed, as it feels too out of
place.
By this stage, my teammate is already finished with his character
design, hence I included it inside my design. The eyes are changed to
red so it does not clash with the overall layout. Some additional
light is given to keep the emphasis on the character (but not too
harsh, since previous feedback from Mr. Fitri indicates my light
source is too harsh on the brush).
Here's the final result:
By the time I created this page, my teammate has not created the
character yet, but I want to implement the character in a sitting pose
in the page already. So what I did is to use a placeholder at the
moment, and will swap it with the character my team have designed.
I used a red brush to highlight the buttons, and through stylized fonts. My team gave me feedback that the fonts could be kept simple and legible, hence I researched about past World War documents, and find fonts that actually portrays that mood. As for the red brush, Mr. Fitri asked me to use real blood splatters instead, since brushes seems too blocky and unrefined.
The yellow face is also something to be fixed, as it feels too out of
place.
I used a red brush to highlight the buttons, and through stylized fonts. My team gave me feedback that the fonts could be kept simple and legible, hence I researched about past World War documents, and find fonts that actually portrays that mood. As for the red brush, Mr. Fitri asked me to use real blood splatters instead, since brushes seems too blocky and unrefined.
By this stage, my teammate is already finished with his character
design, hence I included it inside my design. The eyes are changed to
red so it does not clash with the overall layout. Some additional
light is given to keep the emphasis on the character (but not too
harsh, since previous feedback from Mr. Fitri indicates my light
source is too harsh on the brush).
Here's the final result:
➼ Character Page
This page is a subpage from the armory if players clicks the character
button. A black overlay appears emerging from the shadowy figure
affiliated with the button.
Frames are used because it resembles World War figure portraits,
where these notable figures are glorified in these frames as a
symbolism of respect.
Touches of red and bloodstains to give depth to the chosen
character's splash arts. Character splash arts are usually highly
regarded by players in games, so I would want to try my best in
showcasing these.
Previously I wanted the characters to be shown in a grid layout, but
then I'm thinking we only have 3 characters, so why not we maximize
the way we showcase them? Through this scrollable portraits, players
can actually enjoy and immerse with the characters
thoroughly.
Important information such has their own
unique skills during gameplay, and a brief description of their lore
is shown below their portraits.
Here's the final result:
This page is a subpage from the armory if players clicks the character
button. A black overlay appears emerging from the shadowy figure
affiliated with the button.
Frames are used because it resembles World War figure portraits, where these notable figures are glorified in these frames as a symbolism of respect.
Touches of red and bloodstains to give depth to the chosen character's splash arts. Character splash arts are usually highly regarded by players in games, so I would want to try my best in showcasing these.
Frames are used because it resembles World War figure portraits, where these notable figures are glorified in these frames as a symbolism of respect.
Touches of red and bloodstains to give depth to the chosen character's splash arts. Character splash arts are usually highly regarded by players in games, so I would want to try my best in showcasing these.
Previously I wanted the characters to be shown in a grid layout, but
then I'm thinking we only have 3 characters, so why not we maximize
the way we showcase them? Through this scrollable portraits, players
can actually enjoy and immerse with the characters
thoroughly.
Important information such has their own unique skills during gameplay, and a brief description of their lore is shown below their portraits.
Here's the final result:
Important information such has their own unique skills during gameplay, and a brief description of their lore is shown below their portraits.
Here's the final result:
➼ Game Page
Again for the game page, it will use the environment designed by one
of my teammate. Tweaked the perspectives so it would suit the
gameplay, and I made sure to just include the important information
needed with as less attention as possible, since the environment is
already dark and less contrasting in order to fit the mood.
Again for the game page, it will use the environment designed by one
of my teammate. Tweaked the perspectives so it would suit the
gameplay, and I made sure to just include the important information
needed with as less attention as possible, since the environment is
already dark and less contrasting in order to fit the mood.
For the page when sanity bar gets lower, hallucinations starts
to appear on the UI. What I did is pages of 2 different version being
put overlapping together. Initially I just darkened the page but
obstacles visibility is sacrificed too much, which makes the gameplay
unenjoyable.
This is how it turns out on both versions, one where sanity bar
is lower , and one where it is higher.
For the page when sanity bar gets lower, hallucinations starts to appear on the UI. What I did is pages of 2 different version being put overlapping together. Initially I just darkened the page but obstacles visibility is sacrificed too much, which makes the gameplay unenjoyable.
This is how it turns out on both versions, one where sanity bar is lower , and one where it is higher.
➼ Final Presentation
Here's our final output, enjoy!
Here's our final output, enjoy!
REFLECTION
This module gave me a very great first impression. I usually only see concept art planning for games on social media, never imagined that I could create it myself as well—and it's in a university module on top of that. Being grouped with my friends from different streams also allows me to utilize their strengths in order to maximize my output of my own work, so it's interesting to see when UI (where it's supposed to be all about usability) is combined with artistic, stylized elements. In short, this module gave me a fresh different workflow compared to how I usually do my tasks for other UI/UX modules—which helped me gained a lot more insights beyond my own field!
Comments
Post a Comment