You're working on a sci-fi shooter with a holographic AR interface. You've chosen the engine, written the gameplay, but every time the player opens the inventory, they're yanked out of the atmosphere — because the UI looks like a standard plugin. Sound familiar? Concept art for interfaces solves this problem before you even open Unity UI Toolkit or Unreal UMG. Our team, with 10+ years in game dev, creates UI concepts that embed into the game world rather than layering on top. We specialize in video game interface design, and our approach to game UI/UX focuses on immersion. Over 100 successful projects, with an average immersion increase of 40%.
A UI concept is not a set of screens — it's a visual language: materiality, atmosphere, readability in motion. Wireframing and layout come later. The concept answers the question "what should the interface look like" before anyone opens an editor.
Why a UI Concept Matters for Games
Game UI operates in a context that web or mobile apps lack: it overlays a dynamic scene, competes for attention with gameplay, and must be readable in motion, under varying lighting, and at different distances. That's why a game UI concept always includes readability checks against game screenshots. A beautiful element in isolation may be unreadable over a busy environment art. Contrast, opacity, backdrop blur — all of this must be resolved at the concept level, not during layout.
Real-world case: AR HUD for a sci-fi shooter
For a sci-fi shooter with a "holographic AR" style, the concept included: an isometric HUD with a clear scanline pattern, a custom font based on geometric forms, a color system using three cyan shades with red as danger, and — crucially — a transparency rule: all UI elements at 60–70% opacity except active interactive zones. This decision came not from aesthetics but from analysis: the game is fast-paced, players must not lose visibility due to the interface. After implementation, readability increased by 35%, and player reaction time dropped by 0.8 seconds.How to Choose Between Diegetic and Non-Diegetic UI
Diegetic UI (an interface that exists within the game world — a screen on a character's helmet, a map as a physical object) requires a separate concept tied to the environment. Non-diegetic UI (standard HUD) uses a different approach and different rules. The choice depends on the desired level of immersion and technical constraints.
| Feature | Diegetic UI | Non-Diegetic UI |
|---|---|---|
| World integration | Embedded in scene objects | Overlaid on gameplay |
| Immersion | High | Medium |
| Implementation complexity | High (requires 3D modeling) | Low (UI Toolkit/UMG) |
| Readability | Depends on scene lighting | Constant |
| Typical examples | Helmet screen, hologram | Health bar, mini-map |
More about diegetic UI can be read on Wikipedia.
What Tools to Use for UI Concept
Figma — for component design and state prototyping. Photoshop — for final visualization over game context. Procreate — for initial sketches of non-standard UI elements (especially for organic or hand-painted styles). We use Figma as the primary tool: it allows three times faster changes compared to Photoshop and creates interactive prototypes for UX testing. According to Unity's official documentation, UI Toolkit supports importing styles from Figma via special plugins.
How We Create a UI Concept: Step-by-Step Process
- Analysis: study gameplay, game style, and technical constraints (platform, FPS budget).
- Sketching: rough drafts of key screens on paper or in Procreate.
- Style tile: define typography, color system, iconography, and base components.
- Visualization: create screens in the context of a game screenshot.
- Review: test readability, contrast, and style consistency.
- Final: prepare documentation for implementation in Unity UI Toolkit or UMG.
What's Included in a UI Concept
| Element | Description | Approximate Timeline |
|---|---|---|
| Style tile | One sheet with typography, colors, iconography, components | 2–3 days |
| Key screens | HUD, main menu, inventory in context of screenshot | 3–5 days |
| State variations | Button states (normal/hover/pressed/disabled) | 1–2 days |
| Documentation | Developer guidelines with usage rules | 1–2 days |
Timeline
| Scope | Approximate Timeline |
|---|---|
| Style tile + 1 key screen | 3–5 days |
| Style tile + 3 screens + state variations | 8–14 days |
| Full UI concept (6–10 screens) | 18–30 days |
Cost is determined after analyzing the scope and documentation requirements. If you need to go from concept straight to layout in Unity UI Toolkit or UMG, we discuss it as a single project. Our specialists are certified in Unity and Unreal Engine. To discuss your project, request a consultation — we guarantee quality and adherence to deadlines. Contact us to get an estimate for your gameplay.