Creating Game Interface Concept Art
UI concept is not the same as UI design. It's the visual language of the interface: how it looks in the game world, what materiality and atmosphere it carries, how it relates to the visual style of gameplay. Wireframe and final implementation in Unity UI Toolkit or Unreal UMG are the next stages. Concept answers the question "what should the interface be like" before someone opens the editor.
The problem with most game UIs is that they're technically correct but visually disconnected. A HUD that looks like it was borrowed from another genre. An inventory that contradicts the environment style. A menu that could belong to any game.
Specifics of Game Interface Concept
UI in games works in a context that doesn't exist on the web or mobile apps: it overlays a dynamic scene, competes for attention with gameplay, and must read while moving, at different scene lighting, and at different distances from the screen.
This means that game UI concept necessarily includes readability testing over game screenshots. A beautiful element in isolation can be unreadable over saturated environment art. Work with contrast, opacity, backdrop blur—all of this must be solved at the conceptual level, not during implementation.
The second specific point is diegetic vs. non-diegetic elements. Diegetic UI (interface existing within the game world—a screen on the character's helmet, a map as a physical object) requires separate concept, linked to the environment. Regular HUD—a different approach, different rules.
What's Included in UI Concept
Style tile. One sheet with key elements: typography, color system (primary/secondary/accent/danger), iconography, basic components (button, bar, frame). This is not final component design—this is checking visual language.
Key screens. Usually: HUD in gameplay, main menu, inventory or key secondary screen. Each—in context of a game screenshot, not on white background. This immediately shows whether the style works.
State variations. Button in states normal/hover/pressed/disabled, at least for one key component. Without this, there's nothing for the developer to implement.
Tools: 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).
For a sci-fi shooter with "holographic AR" style, the concept included: isometric HUD with explicit scanline pattern, custom font based on geometric forms, color system in three cyan shades with red as danger color, and—importantly—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 dynamic, player shouldn't lose visibility due to interface.
Timeline
| Content | 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 calculated after analyzing scope and documentation requirements. If transition from concept directly to implementation in Unity UI Toolkit or UMG is needed—this is discussed as a single project.