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!

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 claritybold 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.