Chroma

Date

Dec, 2024

Game Engine

Unreal Engine 5

Tools

Photoshop, Illustrator, Figma, After Effects

Project Overview

Chroma is a vibrant action game UI design concept focused on bold personality and an energetic color palette. The goal was to craft a playful yet clear interface that stands out while remaining intuitive and easy to navigate.


I worked across all stages of the UI/UX process, from research and wireframes to art direction and integration. This included benchmarking, defining the visual identity, creating the UI kit and a bit of integration in Unreal UMG.


Special thanks to @RetroStyleGames for the character and environment assets.

Project Overview

Chroma is a vibrant action game UI design concept focused on bold personality and an energetic color palette. The goal was to craft a playful yet clear interface that stands out while remaining intuitive and easy to navigate.


I worked across all stages of the UI/UX process, from research and wireframes to art direction and integration. This included benchmarking, defining the visual identity, creating the UI kit and a bit of integration in Unreal UMG.


Special thanks to @RetroStyleGames for the character and environment assets.

Project Overview

Chroma is a vibrant action game UI design concept focused on bold personality and an energetic color palette. The goal was to craft a playful yet clear interface that stands out while remaining intuitive and easy to navigate.


I worked across all stages of the UI/UX process, from research and wireframes to art direction and integration. This included benchmarking, defining the visual identity, creating the UI kit and a bit of integration in Unreal UMG.


Special thanks to @RetroStyleGames for the character and environment assets.

Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.

Menu card integration in UE5 UMG utilizing shaders, timeline animation and blueprint logic.

Gadgets - Common Item

Skill combo - Default, R2 selected and ultimate ready

Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.
Unreal Engine project view showing a structured folder hierarchy used for a UI prototype. The layout displays nested folders labeled “Assets,” “MouseCursor,” and “WBP,” expanding into subfolders such as “WBP_Header,” “WBP_Inventory,” and “WBP_Tab.” On the right, several widget blueprints are listed, including “WBP_TW3_Capacity,” “WBP_TW3_Close_Btn,” and “WBP_TW3_Header_Title.” The image illustrates a clean and consistent naming convention for Unreal project organization. Footer text reads “Folder organization example,” with Unreal Engine and The Clone Room logos, and the website nathalymoyano.com.

VIEW MORE PROJECTS

Rift

Rift

Dragon Age The Veilguard - Button Reconstruction

Dragon Age The Veilguard - Button Reconstruction

Revenge

Revenge

Rift

Rift

Infinity Nikki - UI Fan Art

Infinity Nikki - UI Fan Art

Infinity Nikki - Progress Bar Reconstruction

Infinity Nikki - Progress Bar Reconstruction

Rift

Rift

BattlePlan!

BattlePlan!