Death Stranding:

An in-depth study

Death Stranding is one of my favorite games of all time, accumulating 132 hours in total on Steam and acquiring 58 out of 63 achievements.

Hideo Kojima believes that cinematic storytelling is a key expression in games. As someone who attends the Interactive Media program under Cinematic Arts, I, too, believe this to be true.

This page display an in-depth analysis, as well as a set of new UI & interaction design.

style analysis

style sheet

On the left is a style sheet for the overall typography and color palette for Death Stranding. Below are several shape language analysis with their respective in-game screenshot for comparison.

Shape languages comparisons

Delivery accomplished screen - shape language analysis vs. in-game screenshot.

Cargo management screen - shape language analysis vs. in-game screenshot.

Fabricate equipment screen (idle) - shape language analysis vs. in-game screenshot.

Fabricate equipment screen (selected) - shape language analysis vs. in-game screenshot.

Equipment screen re-design

After all the analysis, I was ultimately able to put together a pitch deck for potential areas of improvements in Death Stranding, notably the fabricate equipment screen. Here is a full preview of the pitch deck in slides format.

Nevaeh_Li_Assignment_4_PitchDeck.pdf

final product

This is the final re-designed screen for the fabricate equipment page in Death Stranding (scroll left to view the in-game screenshot for comparison).

You can view details of the changes in the pitch deck above.

Death Stranding Reimagined: Higg's version

The vision

I was assigned to design a set of UI in the style of Death Stranding that differs from the original but still adapts to the worldview. The project contains the interaction design of the character customization screen, a stats display screen and a brief main menu screen.

Interaction Design: immersiveness

The game opened with a 10-min cutscene. The ending switched smoothly from Sam’s motorcycle crash to his first mission: picking up the scattered packages from the ground, a simple task that familiarizes the player with basic controls.

From this design, it could be seen that the idea of Immersiveness is strongly valued and incorporated into the game. The player feels no sense of incongruity - the cutscene provides a solid background on why the mission is given.

The same idea of Immersiveness is also seen in Splatoon 3. The first time the game starts, a default player character (a yellow inkling) goes through a cutscene and ends up sitting down, looking directly at the player, and the player could customize the character.

Holding onto the central ideology of Death Stranding, I centered my design around Immersiveness as well. In order to do so, I thought back to the fundamental elements that make up the game. One critical element in the world setting is the Timefall - rain that speeds up time and makes things erode faster. Almost all outfits Sam wears were designed to protect him from Timefall.

Inspired by the scene of Sam and Fragile staying in the cave during the cutscene, I wonder if I could place the start of the game inside of a cave that is free from Timefall, blend up the “dressing-up” procedure with character customization. Stepping outside of the cave confirms that the player is finished with their customization, and serves thematically as a start for the player to step into a foreign world.

Storyboards (sketch + live)

Long shot. Default character standing inside of the cave, back facing the camera, next to a motorcycle. This screen allows the player to customize the body size of the character.

Medium shot. Character begins to turn their body towards the camera.

Medium-close shot. Character looks towards the camera.

Close shot. The player gains the frontal view of the character, and is now able to customize their skin color.

Close shot. The player takes off the hood of the jacket and reveals a default haircut. The player is now able to customize the hairstyle of the character.

Close shot. The player takes off the protective goggles on their face. The player is now able to customize the facial features of the character.

Video demonstration

Kojima Studio acted out the cutscenes prior to fully rendering the CG. In Arcane, the animators also acted out clips of the storyboard. I believe this practice is helpful for the creators to understand how things look from the perspective of the audience/player. Hence, I have filmed a clip of myself acting out the storyboard as well.

DS Draft.mp4Shared with Dropbox

UI design

In the previous sections, I have already completed a general style breakdown of Death Stranding’s UI, so I decided to give it a twist in changing the theme but still keeping most of its futuristic/tech-ish design.

The new design is based around the main antagonist of the story: Higgs Monaghan. He was a major character whose plot ran from the beginning to the end - owning his own cutscenes, chapter name, and boss fights. However, aside from a few weapons designed by Higgs, there were not a lot elements related to his character. I’ve decided to use this opportunity to make a set of Higgs-themed UI, implemented in several screens that transition from one to the other.

Left is a fanart of Higgs I own in my home.

Higgs’s character design centered around black and gold, strongly related to the colors of BTs (black) and chiral crystals (gold), as well as his fascination with ancient Egyptian cultures (black and gold stripes on his cape and his golden mask). Based on this color theme, I used PureRef to collect some inspirations.

Draft design

This is the first iteration of my UI designs. It is used as temporary assets and serves the purpose of mocking up the size and placement in the screens. All visuals are made with Procreate with the exception of the body options and hairstyle options.

More sketches...

These are the sketches based on the previous iterations. Motifs and color considerations are added in.

Coming together

The final product shown in video format. The background video is generated by Runway as requested in the project requirement. All the assets are illustrated by me with the exception of 2 cliparts (labelled in the Assets section). The VFX is not finalized as the focus of the project is UI and interaction design.

DS Demo Final.mp4Shared with Dropbox

all key frames

Main menu

The logo is rendered in gold in order to match Higgs’s color palette. The visual of the start button when hovered over is a border made to resemble the chiral crystals. The border is surrounded by triangles - often seen in crystals and minerals - that hold a metallic touch.

The smaller triangles scattered around the border added layers to the visuals, invigorating the design. The symbolism is present while still adhering to the simplicity of Death Stranding’s original design. The font I selected for the main menu is Bank Gothic Light. This sans-serif font has angular corners that produce a futuristic look. At the same time, the cleanliness of the letters allowed high readability.

Character Customization

In the original game, Death Stranding had a panel that displayed the sign designs that the player could select from to place on the road. These signs are designed to resemble the neon light designs in real life, which featured simplistic and geometrical lines. I incorporated this design to my customization screen as little symbols next to the page titles.

The panel has a half-transparent black background with an uneven arrangement of dots that fade downward. I applied these dots to create a digital effect, similar to when a page is loading under low signal. The transparency of the backdrop makes the panel look lightweight, resulting in a more digital display (Vision Pro, control panels in Iron Man) and allowing more visibility of the gameplay.

The golden buttons and the dividers on the panel both have an overlay of gold foil; same as the main menu, I designed the buttons to have a realistic texture but a clean geometric shape. The triangles scattered around the select button adds to the dynamicness of the interface.

I selected Trajan Pro for the headlines. The serif font is elegant and dramatic, which fits Higgs’s personality. For the main body, I selected Century Gothic for its high readability. Its geometric lines are scientific and modern.

stats

The triangle motif appears again in the stats screen in the crosshair design. Triangles are also incorporated in the floating panel, this time resembling connecting lines.

The item name is highlighted in gold to create good contrast against the background.

In the main body, the important information (weight) is purposefully larger than the item description, because the player more frequently needs to check on the weight (as a porter) than read through the description.

Assets display

All the assets below are illustrated with Adobe Illustrator, with the exception of the symbols next to each title illustrated by Procreate, and the body & hair options being cliparts from the internet.

Previous Work

Next Work

Page updated

Google Sites

Report abuse