UI/UX design
Nuclear StarFish
Nuclear StarFish
Nuclear StarFish
Nuclear StarFish
Year:
2022
Industry
Indie game studio
Team:
Designer - Anastasiia Hladun
2D Artists - Mykhailo Herhel
Duration:
3 months
Showing the real value
Showing the real value
The studio was losing potential clients because their website couldn't communicate their value. I built a strategic design system that transforms passive visitors into active leads.
The studio was losing potential clients because their website couldn't communicate their value. I built a strategic design system that transforms passive visitors into active leads.
UX design
Strategy & Information Architecture
Strategy & Information Architecture
Strategy & Information Architecture
The Challenge:
The Challenge:
Through competitive research, I identified a critical gap: while the studio produces AAA-level art, their website failed to reflect that quality. Potential clients struggled to understand the workflow and didn't feel the "wow factor" within the first few seconds.
Through competitive research, I identified a critical gap: while the studio produces AAA-level art, their website failed to reflect that quality. Potential clients struggled to understand the workflow and didn't feel the "wow factor" within the first few seconds.
Architectural Solution:
Architectural Solution:
I didn't just "list pages"; I built an Information Architecture (IA) that guides the user through a deliberate funnel:
What they do → Proof of quality (Projects) → How they work → Let’s collaborate
I didn't just "list pages"; I built an Information Architecture (IA) that guides the user through a deliberate funnel:
What they do → Proof of quality (Projects) → How they work → Let’s collaborate
UX design
UI as an Extension of Art
UI as an Extension of Art
UI as an Extension of Art
Color Palette
Color Palette
I designed a high-contrast system using Deep Blues and Almost Black to evoke a sense of stability and premium craftsmanship. This professional foundation is disrupted by Bright Orange, reflecting the brand’s energetic and creative 'starfish' identity, while a range of slate grays provides the neutral breathing space required for a complex, scalable interface
I designed a high-contrast system using Deep Blues and Almost Black to evoke a sense of stability and premium craftsmanship. This professional foundation is disrupted by Bright Orange, reflecting the brand’s energetic and creative 'starfish' identity, while a range of slate grays provides the neutral breathing space required for a complex, scalable interface
Deep Navy
#011728
Deep Blue
#0B3352
Light Sky Blue
#AFDBFE
Cool Gray-Blue
#C1CDDF
Ember Orange
#ff6b35
Medium Blue
#2B71A8
Typography
Typography
Display / Heading
BEBAS NEUE
BEBAS NEUE
Body / Interface
Barlow Condensed
Barlow Condensed
UI as an extention of art
UI as an extention of art
To make the studio’s vibrant illustrations pop, I chose a Dark UI aesthetic. The interface acts as a minimalist frame, not a competitor.
To make the studio’s vibrant illustrations pop, I chose a Dark UI aesthetic. The interface acts as a minimalist frame, not a competitor.
Dynamic Hero Section
Dynamic Hero Section
Interactive Service Cards:
Interactive Service Cards:
Default
Unfocused
Hover
Interactive Service Cards:
Default
Hover
Unfocused
The "Studio that Ships" Proof
The "Studio that Ships" Proof
Systemic Interface Design
Systemic Interface Design
Designing for Services
Designing for Services
Contextual Showcase:
Contextual Showcase:
We don't just say "2D Art"; we show the final characters and then a dynamic filter to immediately present illustrations or environments on the same screen.
We don't just say "2D Art"; we show the final characters and then a dynamic filter to immediately present illustrations or environments on the same screen.
Immediate Proof:
Immediate Proof:
The "Art in Action" section connects the service directly to shipped, playable products, eliminating the gap between theory and practice.
The "Art in Action" section connects the service directly to shipped, playable products, eliminating the gap between theory and practice.
Project Showcases
Project Showcases
Scale & Detail:
Scale & Detail:
Rather than one high-res thumbnail, the page showcases the sheer volume of assets, from complex multi-character grids to full-body designs, on a clean dark foundation.
Rather than one high-res thumbnail, the page showcases the sheer volume of assets, from complex multi-character grids to full-body designs, on a clean dark foundation.
Clear Context
Clear Context
A brief description of the studio's role (What we did) and final assets in one flow.
A brief description of the studio's role (What we did) and final assets in one flow.
Final Outcome
Final Outcome
Beyond the pixels, this was about building a bridge between art and strategy, creating a scalable digital home that finally reflects the true quality of the studio’s work.
Beyond the pixels, this was about building a bridge between art and strategy, creating a scalable digital home that finally reflects the true quality of the studio’s work.
Next Projects
Next Projects
Next Projects
