Art Direction for AAA UI

Jul 7, 2024

Lecture Notes: Art Direction for AAA UI

Presenter

  • Name: Uma Yunus
  • Role: Lead Graphic Designer at Dye Survey

Session Goals

  • Focus on art direction for AAA UI (consoles and PCs).
  • Interactive session with audience participation.
  • Exclude mobile or app development.

About Uma Yunus

  • Background: Born and raised in London, moved to Los Angeles.
  • Career: Over 10 years in the game industry.
  • Projects: Battlefield 1, Metal Gear Solid 5, Crysis Franchise.

Key Concepts

UX vs. UI

  • UX (User Experience): Entire user journey from purchasing to gameplay.
  • UI (User Interface): In-game menus, visual identity, gameplay HUD.

UI Elements

  • Feedback: Visual, sound, touch, vibration—all forms of player feedback.
  • Front-End vs. HUD: Front-end for navigation/info architecture, HUD for gameplay (instant, recognizable messages).

Design Principles

Gestalt Theory

  • Closure: Our brains fill in gaps to perceive complete shapes.
  • Proximity: Closeness of elements groups them together.
  • Continuity: Continuous lines are perceived as flowing even if interrupted.
  • Similarity: Similar items are seen as groups.
  • Figure-Ground: Differentiation between foreground and background.
  • Enclosure: Elements in a common area are grouped together.
  • Symmetry: Symmetrical objects are perceived as a whole.

Usability Principles

  • Limit to 7 items per screen, 3 menu levels deep.
  • Affordances: Buttons, sliders should look and function as expected.
  • Focus Area: Highlights to show active elements.
  • State Changes: Clear differences between selected states.
  • Page Flow: Follow natural reading paths, provide help/hints.

Visual Design

Grids and Layout

  • Grids: Establish hierarchy, consistency, navigation flow.
  • Safe Frame: Keep critical information within 90% of screen.
  • Anchor Points: Use quadrants to prevent overlapping, ensure adaptability.
  • Aspect Ratios: Design for 16:9 but ensure compatibility with 4:3 and future formats.

Typography

  • Font Selection: Consider legibility at a distance (six-foot rule).
  • Font Characteristics: Exide height, counter size, accent character sets.
  • Good Practices: Limit font variations, use professional fonts, avoid stretching.

Shape Language

  • Consistency: Maintain a consistent style across all elements.
  • Examples: Rectangular shapes for military themes, angular shapes for others.
  • Treatment: Consider brushes, patterns, signal dents, etc., to maintain unity.

Iconography

  • Rules: Simple, varied, recognizable (squint test), works well in sizes.
  • Consistency: Use construction grids for consistency.
  • Optical Balance: Ensure icons feel consistent in size optically.
  • Testing: Test icons in different environments and states.
  • Meaningful Icons: Replace text when appropriate but ensure clarity.

Color Theory

  • Emotion and Brand: Colors should align with thematic elements and brand identity.
  • Usage: Limit palette to 5 distinct colors, avoid full saturation.
  • Adjust for Environment: Colors may shift based on game environment lighting.
  • Color Blindness: Accommodate common color blindness types.

UI Representation Types

  • Non-Diegetic: Traditional overlay (health bars, HUDs, etc.).
  • Diegetic: Integrated into the game world (e.g., in-game monitors).
  • Spatial: Non-standard indicators (e.g., character outlines).
  • Meta: Environmental effects impacting UI perception (e.g., blood splatter).

Design Process

Data Gathering and Research

  • Understand creative direction, target market, and visual orientation.
  • Collaborate with all disciplines and stakeholders.
  • Gather reference material (movies, games, etc.) to inform design.

Mockups

  • Static Mockups: Basic component design (buttons, sliders, icons).
  • Animated Mockups: Demonstrate UI transitions and interactions.
  • Interactive Mockups: Early testing in engine or prototyping tools.

Technical Considerations

  • Engine Limitations: Understand your engine's capabilities and limits.
  • Shader Effects: Enhance visuals dynamically through shaders.
  • Adaptation: Cater to different screen sizes and resolutions.
  • Performance: Ensure UI does not hinder game performance.

Conclusion

  • Broad Strokes: Establish foundational elements and consistency.
  • Visual Identity: Focus on typography, shapes, icons as building blocks.
  • Execution: Create detailed mockups and test thoroughly.
  • Invisible Forces: Consider localization, platform constraints, accessibility.

UI should support gameplay, often unnoticed but essential when designed well.