Skip to content

VISUAL ARCHITECTURE & UX

This document defines The Chronicles of Ultimate Retro Station project visual appearance, user interface modifications and theme development process. The goal is a uniform, dark and technical 03 Labs aesthetic in all of them in system layers.

1. WII SYSTEM MENU (THE CORE UI)

Modifying the system menu is the most demanding and critical part of the project. It determines the first impression of the whole device and replaces the original one with the dark, lab-like look of the white Nintendo skin.

Technology - .mym (MyMenu source file) - .app (compressed resource archive)

Development Process - See the separate Wii System Menu development guide - Testing primarily with Dolphin emulator before exporting to iron

Key Edits - Health Screen bypass or visual re-theming - Channel grid background graphics (.tpl) - Cursor visual change - The restrained technical style of the sounds (click / hover).

2. USB LOADER GX – THEMES

USB Loader GX serves as the project's primary game library (Wii & GameCube). Theming is based on XML specifications and external assets.

2.1 Directory structure

SSD:/apps/usbloader_gx/theme/CustomTheme/

2.2 Components

  • theme.xml
  • Font colors
  • Locations of objects

  • Transitions and animations

  • Assets/

  • PNG backgrounds
  • Buttons

  • Icons and frames

  • Sound/

  • bgm.ogg (tempered background music)
  • UI sound effects (minimal, no retro beep)

3. FRONT-ENDS OF EMULATORS

All emulators follow a common visual standard, although the technical implementation varies.

3.1 RetroArch (Universal Retro)

  • Menu Driver
  • Ozone (Primary)

  • XMB (alternative)

  • Optimization

  • In CRT mode:
  • RGU scaling
  • Scanline overlay

  • Goal: an authentic 80s-90s look without too much filter

  • Assets

/retroarch/media/

  • Custom icons for different consoles
  • Uniform color scale

3.2 WiiStation (PlayStation 1)

  • SUI
  • Dark theme

  • Full support for covers

  • Image settings

  • Forced 4:3 aspect ratio
  • No widescreen stretching

4. COVER IMAGES AND METADATA (ARTWORK)

High-quality visual resources are critical for a professional for the user interface experience.

Type Location (SSD) Description
3D Covers /apps/usbloader_gx/cache/covers/ Wii & GameCube 3D Boxart
Disc Images /apps/usbloader_gx/cache/disc/ Game board graphics
Full Covers /roms/psx/covers/ PlayStation Full Size Covers

Guide - Resolution too big rather than too small - No bright white backgrounds

5. WORKFLOW (VISUAL WORKFLOW)

  1. Design
  2. Color palette
  3. Typography

  4. Iconography (Photoshop / GIMP)

  5. Conversion

  6. .png → .tpl if needed

  7. Correct bit depth and alpha

  8. Implementation

  9. XML ​​themes

  10. MyMenuify / Theme Injector

  11. Confirmation

  12. Dolphin (System Menu)
  13. Testing with real hardware

6. VISUALITY (DESIGN LANGUAGE)

General aesthetics - Dark, matte, technical - No bright white surfaces - The contrast is gray rather than colorful

Color palette - Main colors: - Charcoal gray - Dark blue - Graphite black - Accent colors: - A restrained green - Cold blue - Amber orange (active elements only)

Typography - Clear sans-serif - No pixel fonts in the user interface - Retro styles only in content, not in navigation

Animations - Slow, smooth transitions - No bouncy or toy-like effects

Principle

“Looks like a research lab, not a toy.”