Source: https://shadowfrag.com/blog/making-the-menu-fit-the-game/ # Making the menu fit the game By the SHADOWFRAG developer · Interface · Oct 22, 2026 · 3 min read The menu had gained more options than its original layout could comfortably explain. I reorganized settings and previews, then checked that precise values survived editing and saving. [SHADOWFRAG play menu with gold accents, persistent settings navigation and a large ninja preview.](https://shadowfrag.com/_astro/df87a9f502f5f441abc366af780f6c64bf733301d80c4793bb7e97bf1d1d9c51.CWJfdaJS.png) The later interface adds a persistent navigation rail and a dedicated preview of your ninja. Archive date: Oct 22, 2026. The early turquoise menu belonged to a smaller game. By the time it also needed to handle weapon settings, movement controls, cosmetics, recording and match planning, changing its colors was only part of the job. Players needed to find a setting and understand what it would change. I kept the main destinations down the left side and marked the selected section in amber. Charcoal, cream and coral brought the interface closer to the rest of SHADOWFRAG's visual design. The native before-and-after captures show that change; the October 22 quality pass checked how the expanded menu behaved. ## Putting choices beside their previews Cosmetics needed their own organization. Ninja, Weapons, Insignia, Trails, Kills and Auras became separate destinations within the page. Appearance and head/body choices live under Ninja, so they do not have to compete for space with every weapon model and effect. The rendered preview sits beside the controls. Rear, body and face views let a player inspect a headband, hat or accessory from a useful angle. The footer also explains two different steps: appearance takes effect next round, and it must be saved to keep it. Seeing a new look in the preview should not imply that it has already changed the current round. Crosshair settings pair precise controls with a large preview. Shape, size, gap, thickness, rotation and opacity each have a place. For rotation, a player can type an exact angle while the slider offers presets. A fractional value entered deliberately needs to survive both editing and saving, even if it falls between the slider's preferred steps. ## Checking input as well as layout The retained native menu test passed across **531 frames**, covering navigation, layout boundaries and overlaps, precise input, cosmetics and previews at **three resolutions**. Those 531 frames describe the captured test sequence, not 531 separate users or usability sessions. Separate checks exercised audio choices and preview buttons, keyboard and number-pad entry, Save, and numeric editing in the match planner, including its **64-[player ceiling](https://shadowfrag.com/glossary/#term-player-cap)**. A setting that looks correct but saves a different value would still be a broken control. These checks establish behavior in the tested sequence. They do not replace watching someone learn the menu. What I wanted from the layout was straightforward: make it clear where a choice belongs, let the player inspect it, and explain when it will take effect. That leaves setup time for choosing a comfortable aim and a recognizable ninja. ## From a prototype menu to a place to play Retained engine screenshots show the change in hierarchy, identity and player preview. The archive dates below come from the retained image files. [Early Ninja Instagib menu with turquoise buttons and a mostly empty right side.](https://shadowfrag.com/media/development/menu-early-original.png) **Early menu**Archive date · Oct 17, 2026 The prototype puts practice, hosting and settings in a compact left column. [Original PNG](https://shadowfrag.com/media/development/menu-early-original.png) [SHADOWFRAG play menu with gold accents, persistent settings navigation and a large ninja preview.](https://shadowfrag.com/media/development/menu-current-original.png) **Later menu**Archive date · Oct 22, 2026 The later interface adds a persistent navigation rail and a dedicated preview of your ninja. [Original PNG](https://shadowfrag.com/media/development/menu-current-original.png) ## The same settings, a clearer home The crosshair editor makes a useful comparison: the preview and color choices remain visible while navigation and control groups become more consistent. [Early turquoise crosshair settings with horizontal navigation tabs and a large grid preview.](https://shadowfrag.com/media/development/crosshair-early-original.png) **Early crosshair editor**Archive date · Oct 17, 2026 A horizontal tab strip sits above the original crosshair controls. [Original PNG](https://shadowfrag.com/media/development/crosshair-early-original.png) [Later gold crosshair settings with vertical navigation, grouped controls, color swatches and a preview.](https://shadowfrag.com/media/development/crosshair-current-original.png) **Later crosshair editor**Archive date · Oct 22, 2026 The crosshair preview stays beside the controls inside the newer settings layout. [Original PNG](https://shadowfrag.com/media/development/crosshair-current-original.png) ## Give the choices room to breathe Later settings captures show two parts of the interface doing different jobs: choosing an appearance and placing match information on screen. [SHADOWFRAG appearance settings showing suit and headband colors beside a ninja preview.](https://shadowfrag.com/media/development/ui-appearance-original.png) **Appearance settings**Archive date · Oct 22, 2026 Color choices sit beside a live character preview. [Original PNG](https://shadowfrag.com/media/development/ui-appearance-original.png) [SHADOWFRAG interface settings showing bar layout, HUD scale and live preview controls.](https://shadowfrag.com/media/development/ui-interface-original.png) **Interface settings**Archive date · Oct 22, 2026 [HUD](https://shadowfrag.com/glossary/#term-hud) layout, scaling and visibility have their own controls and preview. [Original PNG](https://shadowfrag.com/media/development/ui-interface-original.png) Still-image archive dates come from retained image file timestamps in Los Angeles time. An earlier-dated article may include later builds; each image is dated separately. Images are genuine engine or native-editor output. [Download sources, transforms and SHA-256 hashes](https://shadowfrag.com/media/development/manifest.json). [Back to blog](https://shadowfrag.com/blog/)[Browse the glossary](https://shadowfrag.com/glossary/) ## Request an _invite code._ SHADOWFRAG is opening by invitation. Request a code and receive development updates. [Shadow Council](https://shadowfrag.com/glossary/#term-shadow-council) contributors receive priority when invitations begin. Enable JavaScript to request an invite code and confirm your email address. Email confirmation required. Codes will be issued later; a request does not guarantee access. Unsubscribe at any time. [Privacy](https://shadowfrag.com/privacy/) Confirm your email to join the invitation list. Codes will be issued in a future round; a request does not guarantee access. Unsubscribe at any time. Anyone can request a code. For [Shadow Council](https://shadowfrag.com/shadow-council/) priority, introduce yourself on Discord with your role, experience, region and time zone. Include examples of your maps or content if you have them. [Join Discord](https://discord.gg/EHj7rZDNj)