Ghost of Tsushima: Poetic UI Design

Ghost of Tsushima is one of my favorite games. I have never encountered such a poetic artwork with magnificent cinematics that embraces violence and romance at the same time.

In this article, I would like to critique the UI of this game. As the bridge between gameplay mechanics and player actions, Ghost of Tsushima's UI has done an outstanding job to be cohesive, elegant, and story-driven.

⚠️Disclaimer: Click any picture for image sources. If no external page is linked, that means the picture is from my gameplay screenshots.

Design with Cohesion

It is a basic requirement for a game UI to form a consistent system and to cohesively supplement the gameplay. In my opinion, the design team has paid much attention to design consistency and cohesion.

Color

This game has a humble UI color palette. Colors aren't many but they are well assigned with different responsibilities and consistently used throughout the whole game.

Since the palette is rather compact, the highlight colors, especially the vermilion/scarlet color, are highly effective. The repetitive but frugal use of color contrast draws enough attention without causing highlight fatigue.

Other than the color contrast, the design team also deployed contrast of size and proximity/alignment to further facilitate the highlight. For example, in the below screenshots, highlighted cards jump out of the queue with bold color, enlarged size, and protruding alignment.

The highlight color is not only used cohesively in menus but also in gameplay. When Jin uses his sense to detect nearby dangers, enemies are outlined in the same shade of red to raise the alert.

Layout

This game has a few complicated systems. Each of them has layers of hierarchy. Thus, the design team has set a standard to organize the information and minimize the learning cost of the players.

This is a general layout guide that I extracted from their sub-menu screens. Blocks of different granularity are placed from left to right in ascending order -- The primary menu being the least granular and the tertiary menu being the most.

Example 1 - Gear Upgrade View

Example 2 - Mission View

Context

In a complicated UI/UX system, it is critical to pay attention to details so that the design fits players' mental models.

In Ghost of Tsushima, there are four basic stances: Stone, Water, Wind, Moon. Each is effective against a specific enemy type. However, since the combat system is rather complicated where each stance contains 4 advanced moves, it is a must to familiarize players with them through the interface.

The design team has intricately matched the demo video on the upper right corner with the stance name. We can see that all the stone stance demos have backgrounds of rocks; water stance demos with a body of water behind; wind stance demos with different air currents; and moon stance demos all made during a full moon night.

The matching backgrounds subtlely help players form an association with stance metaphors and techniques, and thus enhance players' memorizations of stances.

Design with Elegancy

Other than making a UI system functional, Ghost of Tsushima's UI also covers elegancy to be neat enough with finessed minimalism.

Windicator

Instead of having a real-time compass hanging on a corner of players' HUD, I believe the design team wants the screen as less occupied as possible. Thus, it is extremely smart to use an in-game object, a semi-transparent wind with directions to guide players with minimum distractions and interference. The guiding wind is very natural, fleeting, and light-weighted so the navigation becomes an integral and immersive part of the gameplay.

The method to summon the wind is smooth and effortless, too. Players don't need to find a specific button and press it, but to gently swipe on the touchpad, and enjoy the wind audio released from the touchpad. I believe this is a great innovation of game interaction, too.

Retraction

When there is too much information on one screen, it is important to save space for the more important part.

Example 1 - Retractable menus

In the example above, when players expand the secondary menu, a drawer slides to the screen (marked in cyan) to bring up the tertiary menu, and in turn, the primary menu (marked in yellow) shrinks from a plump card view with elaborate images to a slim icon view as it becomes less important.

Example 2 - Retractable HUD elements

Ghost of Tsushima has a stunning 3D world. If unnecessary UI elements clutter the HUD, how do players get immersed? In this example, the health bar won't appear until the character draws the sword. When the character finishes the battle, the health bar retracts.

Design with Storytelling

Ghost of Tsushima's UI isn't randomly designed to be visually pleasing as the UI elements also supplement and enhance the story.

Color Palette

Now I'll bring up the color palette one more time. Have we ever thought about why these colors are picked? Actually, we can find all the iconic in-game objects with colors to match the palette.

Black & White

Black is heavy. It acts as a somber foundation of the story. Most of Jin's armor is black including the mask his father passed down that represents samurai spirits. All the mythic tales were depicted in black ink, too, as the ink is an ancient medium for stories and legacies.

If black means heaviness, white then means cleanliness and elevation. At the beginning of Act 1 where Jin sets out alone to rescue his uncle, he gallops through a vast field of white grass. He then reaches out his hand to gently touch the grass to grasp a fleeting moment of beauty and healing.

As the game pays much respect to Akira Kurosawa, black and white colors being the base color is such a natural choice.

Scarlet

The scarlet color corresponds to the abundant maple leaves that float around the world. Those leaves not only exist as cosmetics of the environment but also set the ground for violent and poetic battles -- the iconic duel between Jin and his uncle happens under a giant maple tree where the space is filled with scarlet leaves, which makes it hard to distinguish blood between maple leaves.

While maple leaves serve as a romantic euphemism for violence, the scarlet pour of the whole screen during Jin's Ghost Stance is bluntly shocking in visual. When the whole screen turns red, it represents Jin's bloodbath and magnifies the intimidation that JIn brings to the Mongolian soldiers as well as the players.

Gold

Gold in this game is often seen in Golden Temple where copious ginkgo leaves spread over the ground. Ginkgo represents longevity and enduring vitality in Japanese culture as a tree can live thousands of years. Even though disasters have occurred, ginkgo trees and the Golden Temple are still here as a shelter for lost spirits. In this sense, gold means hope.

Another iconic appearance is the golden bird which appears to guide Jin to treasures. Similar to a "silver lining", it is a "golden lining", a representation of hope, prosperity, and Jin's royal blood.

Green

Green is the color of bamboos. Green represents growth. Jin travels around the island, looking for bamboo strikes to grow his resolve.

Texture

Textures of UI elements also speak for the story.

Example 1 - General Setting Menu

Each card has a rough edge that mimics hand printing on fabric or coarse paper. The layer of granules over the illustrations adds a handful of obscurity.

The four buttons are made to create an impression of dragged trails of square brushes dipped in sumi ink. They have slightly different rough edges to avoid dull repetition.

Example 2 - Armor Selection Menu

The black banner tail demonstrates a texture of faded sumi ink with a few sparse splashes. Its bottom edge imitates how sumi ink penetrates the paper and leaves a furry line.

Those white stripes also have a weathered cellulose paper impression.

The last stripe imitates a careless stroke from an ink-soaked round calligraphy brush.

Example 3 - Map View

The map view is also presented in a traditional Japanese sumi ink impression. Unexplored areas only have a light penetrated outline while frequently visited areas have more pigments, which perfectly imitates a water-based gradation process as if Jin himself was the tip of the brush moving around to write tales to be passed down.

Even though many UI elements such as icons and typography are rather simplistic and modern-looking, if examined with isolation, the design team still manages to perfectly render this ancient tale with details of ink and paper textures to facilitate the background setting.

Conclusion

Ghost of Tsushima is such a poetic piece of artwork that combines traditional Japanese culture and modern aesthetics -- its environment, gameplay as well as story progression are organically weaved. And its great UI design also adds another elegant stroke to the title.