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.