UI Design

On some projects, I work on the user interfaces. Generally, I use Adobe XD for basic layouts, combined with Adobe Illustrator to create advanced shapes. In the end, I like to use XD's annotation feature to get feedback from my team!

Technical Designer
Norse Souls-like Survival Game - UI Design v.2:
Main Gear-Menu, in which the player can tab to other panels, as well as equip different equipment-pieces
Main Gear-Menu, in which the player can tab to other panels, as well as equip different equipment-pieces
Equipment-Screen for the Sword - it was important to have a clearly readable grid view, along with an information-popup which shows info on the currently selected item
Equipment-Screen for the Sword - it was important to have a clearly readable grid view, along with an information-popup which shows info on the currently selected item
Crafting-Screen, on which the player can craft depletable items, such as arrow, healing kits, etc.
Crafting-Screen, on which the player can craft depletable items, such as arrow, healing kits, etc.
Stones-Menu, on which stones for embuing different effects on items can be inspected
Stones-Menu, on which stones for embuing different effects on items can be inspected
This is an updated version of the UI Design below. I made a lot of improvements to make it better readable on different-sized screens, added a more colorful pop to it (while staying a bit desaturated with the colors, not too flashy), as well as more screen-filling.

(character model created by my talented friend hanna.borbo.la)
Norse Souls-like Survival Game - UI Design:
Quick-Crafting Menu (used to craft things, such as new arrows mid-fight)
Quick-Crafting Menu (used to craft things, such as new arrows mid-fight)
Inventory Menu - Equipment (in this view, the player can equip different weapons, such as weapons and armor)
Inventory Menu - Equipment (in this view, the player can equip different weapons, such as weapons and armor)
Inventory Menu - Consumables (in this view, the player can equip from one of the available consumables)
Inventory Menu - Consumables (in this view, the player can equip from one of the available consumables)
Book - Humanoids & Beasts (in this view, the player can read about all of the enemies they encountered, additional combat info will also be added when fighting this enemy enough)
Book - Humanoids & Beasts (in this view, the player can read about all of the enemies they encountered, additional combat info will also be added when fighting this enemy enough)
For a project that I am planning to work on in my free time, I concepted some designs for different screens, such as equipment (armour, weapons, etc.), etc.
The main focus of this design is to keep it simple and minimal. The white colour screams simplicity to me and also fits into the Norse ice-concept. The inspiration for the rectangular design, especially with the rotated squares, comes from games, such as God of War and ASHEN.
The main colour splashes within the design come from different levels of rarity for the equipment items (white = common, green = uncommon, blue = rare, purple = epic, orange = legendary), the red and green for stat increases and decreases, and the red which appears in the book for boss-enemies.
Of course, there will be more colours coming into the design down the line, but these are the most prominent ones for now.
Rave Cage Carnage - UI Design:
In-game HUD
In-game HUD
Fashion-Shop UI (in this shop, the player can purchase different parts of clothing which gives certain stat-boosts)
Fashion-Shop UI (in this shop, the player can purchase different parts of clothing which gives certain stat-boosts)
Library UI (in this library, the player can read about enemies and items)
Library UI (in this library, the player can read about enemies and items)
Settings Screen #1
Settings Screen #1
Settings Screen #2
Settings Screen #2
While working on Rave Cage Carnage at Tonkotsu Games, I was responsible for Game Design, as well as UI Design.
The core focus of this design was clarity, bold shapes (square backgrounds and panels), as well as identification by colours.
The darkest colours should always be the background, commonly in a very dark grey-tone. Selected elements (most commonly buttons) and dynamic panels are outlined with a white outline.
On top of that, white is generally the colours of interactive elements. Additionally, some surfaces have colours on them, such as buttons which are representative of outfit colours (visible in the Shop UI) or buttons based on enemy types (here in blue due to the enemy type in the Library UI).
I also worked on a mobile version of this UI.