Part 2: Immersive, Impressionable UI

<-- Back to page list

The Aim of Breath of the Wild's UI : Immersive, Impressionable

Being that their aim for BotW was to reconsider Zelda conventions from the ground up, they discussed how they achieved their goal of creating UI that is instantly recognizable as a change, but seamlessly integrates with the game world in four categories — graphics, font, design and animation. Their overall concept being, “only essential UI.”

Graphics — goal was to be understated so nothing would stand out in a negative way, coalescing information so there wouldn’t be as many places players would have to look.

For the title menu they chose to make proper use of empty space instead of making the selections large (余白 means empty space, just like keikaku means plan).

To help unify the UI they adopted a color they called “Zelda White,” which has a bit of yellow. This was used in the package and logo as well!

Image shows pure white on the left vs Zelda white on the right

Font — they prioritized borderless, simply colored text with zero frills. The overseas fonts were custom made, but for Japanese they used “Logo G Black” for Katakana and “Raglan Punch” for Kanji — intending for the Japanese text to be both powerful and nostalgic, italicizing to make it easier to read. They applied this to the logo font for a cohesive feel.

Note how the in-game fonts match with the logos for both Japanese and international versions

UI Design — direction was to only display information when necessary, which gives the screen more breathing room.

The Pro HUD was actually created because NoA/NoE asked to clean up the screen and get rid of even more UI elements -which lead to a heightened sense of immersion.

They designed the Sheikah Slate in tandem with the artists and chose to differentiate its design and give it an ancient feel by adding more decoration.

They acknowledge that the lack of a tutorial was intentional to strengthen immersion, and only display minimal UI elements so players wouldn’t feel guided by the hand. They applied different animations to the UI in order to make things more noticeable after decreasing noticeability by making UI and fonts smaller.

One example — hearts light up white when you’ve taken damage. Their method — “Display simple UI and make it appear high quality.” They created a tool they could use to capture textures and modify as necessary for this.

Image shows an example of how the capture tool was used for animation

First they captured the Game Over text, then they applied a distortion texture and animated, the result as shown on the bottom of the image above. They only had two UI designers who wouldn’t be able to handle everything alone, so they worked with the programmers to implement little tricks. Expanding on NCL’s proprietary “LayoutEditor” tool in a “data driven” fashion, allowing designers to place and animate screen nodes, and giving programmers control over them. Up until BotW designers needed programmers in order to implement data into the game, so with BotW it was changed so that the game screens could be previewed on top of each other, over the running game.

The game map was split into 120 sections that could be dynamically loaded, with four levels of zoom. This included distinguishing non-open areas with separate colors, so they needed to create 2,344 different screens, which would have been impossible manually, so the map was procedurally generated, textures would be generated for each section every night.

This slide shows how their workflow changed

Previously they would have to create an asset, check it in a viewer, pass into the build and then finally check in-game. In BotW they would create, then preview in-game, then finally implement.

Finally, they give examples of how they utilized their “screen capture” technology to add filters & color adjustments to create UI. Image shows how they composed the gear select screen, capturing the environment, masking and redrawing.