BitCraft Online

A sandbox MMO in early access where I led the creation of UI systems and visual identity, and established the pipeline connecting game design, visual design, and engineering.

BitCraft is an ambitious sandbox MMO in development, blending survival, exploration, and player-driven worldbuilding. As part of the core design team, I focused on shaping the UI systems and interaction patterns that support a massive, persistent online world.

Role

Defined the visual identity and UI systems for BitCraft, establishing the game’s look and feel across menus, HUDs, and player interfaces.
Created a pipeline connecting game design, visual design, and engineering, improving communication and reducing implementation friction across disciplines.
Developed a Notion-based documentation and handoff process to track features, specs, and component ownership, enabling smoother iteration and clearer collaboration.
Created templates for the marketing team to generate consistent and high-quality YouTube, Steam, and social media assets.

Team

Tyler Cloutier (CEO) Alessandro Asoni (CTO) Carter Minshull (Lead Game Designer) Morgan Nyblom (Art Director) Lisandro Crespo (UI Engineer)

Press

BitCraft Online Website BitCraft Online Steam BitCraft Online Early Access Review Bitcraft Hands-On Impressions and Interview – Building Up to Something Great

Our color palette follows the harmony rule of split complementary colors which uses two colors across the color wheel, with those two colors lying on either side of the complementary color. For each primary color, we have subtle shifts in tone that provide a level of flexibility and utility for creating subtle patterns and segmentation of information.

The default color palette for Bitcraft with a high contrast, dark on light palette. The alternative color palette for BitCraft with a dark background color enabling a more comfortable gaming experience in low-light situations.

A type ramp establishes a range of font sizes, styles, and weights used for different elements within a composition. It helps create a visual hierarchy and guides readers through the content by emphasizing important information and structuring the text. The augmented 4th, 1.414, is a proportion that works well for more content dense interfaces that strike balance between complex information and breathability. A font size of 14 pixels ensures that the text is legible for most users without appearing too small. It provides comfortable reading for an average viewing distance of around 20-24 inches from the screen.

Our art deco-inspired shape language grounds itself in highly geometric shapes. Our iconography maintains a consistent look and feel through the use of a combination of vertical, horizontal, and diagonal lines that intersect each other at 45 or 30 degree angles.

Spacing is used to create visual proximity between related information, grouping those elements together.

A core part of our shape language includes stroke dividers and patterns that frame content. These strokes should only be used in only two weights: 4px and 8px.