Phase 6: High-Fidelity & Mobile Experience
Phase 6: High-Fidelity & Mobile Experience
Aesthetics That Work "On the Go"
Aesthetics That Work "On the Go"
Aesthetics That Work "On the Go"
Aesthetics That Work "On the Go"
The goal: To craft a visual language that supports complex gamedev workflows while maintaining an emotional connection to game culture—without sacrificing the lightweight, professional feel of a productive tool.
The goal: To craft a visual language that supports complex gamedev workflows while maintaining an emotional connection to game culture—without sacrificing the lightweight, professional feel of a productive tool.
How easy it is to use
How easy it is to use
"By Developers, For Developers"
"By Developers, For Developers"
Game-Inspired Aesthetic:
Game-Inspired Aesthetic:
A visual system that references game culture subtly without the noise of a "gaming UI".
A visual system that references game culture subtly without the noise of a "gaming UI".
01 - Visual Identity
From Sketch to Production Art
From Sketch to Production Art
Early testing showed a risk of the platform feeling like a generic SaaS. To build trust within the gamedev community, I moved away from sterile business visuals towards a game-centric aesthetic.
Early testing showed a risk of the platform feeling like a generic SaaS. To build trust within the gamedev community, I moved away from sterile business visuals towards a game-centric aesthetic.
Visual identity in gamedev isn't decoration; it's a signal of shared culture
Visual identity in gamedev isn't decoration; it's a signal of shared culture
The Collaboration:
The Collaboration:
I worked with a 2D game artist to define the initial visual metaphors and core sketches
I worked with a 2D game artist to define the initial visual metaphors and core sketches
The AI Pivot:
The AI Pivot:
To maintain momentum and reach high-fidelity results, I took the lead on art direction, using AI to upscale and refine the initial sketches into the final production assets
To maintain momentum and reach high-fidelity results, I took the lead on art direction, using AI to upscale and refine the initial sketches into the final production assets
The Outcome:
The Outcome:
A unique, emotionally resonant brand language that differentiates Igrovary from typical professional tools
A unique, emotionally resonant brand language that differentiates Igrovary from typical professional tools
02 - UI Strategy
The Design System
The Design System
Color Palette
Color Palette
I built an immersive "Dark Mode" foundation using Deep Void and Shadow Slate to evoke the high-fidelity, atmospheric feel of modern game interfaces. This base is energized by Electric Amethyst and Soft Lavender, while Neon Velocity acts as a sharp, high-contrast trigger for critical actions.
I built an immersive "Dark Mode" foundation using Deep Void and Shadow Slate to evoke the high-fidelity, atmospheric feel of modern game interfaces. This base is energized by Electric Amethyst and Soft Lavender, while Neon Velocity acts as a sharp, high-contrast trigger for critical actions.
Deep Void
#1E0946
Electric Amethyst
#8C3FCA
Soft Lavender
#B782E3
Lilac Pearl
#FAEBFF
Neon Velocity
#00E5FF
Periwinkle Frost
#DCDCF8
Typography
Typography
Display / Heading
Play
Body / Interface
Inter
Progressive Disclosure:
Progressive Disclosure:
Moving secondary actions to hover states to eliminate interface clutter and prevent first-time user overwhelm.
Moving secondary actions to hover states to eliminate interface clutter and prevent first-time user overwhelm.
Project card
Project card
User card:
User card:
Optimized for thumb-interaction: reveal metadata only when needed to save vertical space
Optimized for thumb-interaction: reveal metadata only when needed to save vertical space
Link card:
Link card:
Interface Logic:
Interface Logic:
Strategic grouping
Strategic grouping
Checklist
Checklist
Replacing the mandatory "Registration Wall" with a passive dashboard checklist to allow immediate platform exploration
Replacing the mandatory "Registration Wall" with a passive dashboard checklist to allow immediate platform exploration
Structural Step-by-Step Wizard
Structural Step-by-Step Wizard
Optimized Scannability & Filtering
Optimized Scannability & Filtering
Guide: Content Chunking for Deep Focus
Guide: Content Chunking for Deep Focus
Systemic Interface Design
Systemic Interface Design
Hero page
Hero page
Designing for Community
Designing for Community
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
Projects page
Projects page
Project page
Project page
Final Outcome
Final Outcome
The final result is a system where UI decisions are grounded in testing, visual complexity is controlled through logic, and the brand identity feels culturally authentic to the Ukrainian gamedev scene.
The final result is a system where UI decisions are grounded in testing, visual complexity is controlled through logic, and the brand identity feels culturally authentic to the Ukrainian gamedev scene.