Nöki: Shards of the Untamed

UI Case Study: Nöki

Visit game page

Tools used

Our game’s User Interface was designed using Figma as a prototyping tool, combined with Photoshop to create the high-fidelity mockups. All the assets were made game-ready so other people in the team could export them easily. The game was designed for PC and console with Xbox and Play Station controller support.
We wanted the UI to feel alive and playful by adding animations to special moments. I used After Effects and Blender to animate the elements as reference for the implementation in Unreal Engine. Some of the assets were exported as 2D spritesheets to be used in-game.
Some of the UI elements featured rotating elements and animations. I animated the 3D objects in blender and then exported the animation as a spritesheet for prototypes and in-game use.
I did not implement the finalized UI in the game but while prototyping, I created a few blueprints to trigger UI elements as placeholder.

01

Figma - prototyping

Our game’s User Interface was designed using Figma as a prototyping tool, combined with Photoshop to create the high-fidelity mockups. All the assets were made game-ready so other people in the team could export them easily. The game was designed for PC and console with Xbox and Play Station controller support.

‘Skill obtained’ screen with game safe area guides visible

A screenshot of the working Figma file organized by different game states and flows

UI asset components in different states

In-game combat elements

UI animations

We wanted the UI to feel alive and playful by adding animations to special moments. I used After Effects and Blender to animate the elements as reference for the implementation in Unreal Engine. Some of the assets were exported as 2D spritesheets to be used in-game.

02

Death screen animation

Abilities: Animated ‘New skill’ tutorial