/nx-hbmenu-mockup

design mockups and assets (including icons, color swatches, etc) for the nintendo switch homebrew menu

An nx-hbmenu redesign, aiming to continue the "ocean" trend of previous homebrew launchers while also incorporating the modern, minimalist feel of the Nintendo Switch system UI. Most of these designs were incorporated into nx-hbmenu as of v2.0.0

Note: The measurements and assets provided assume that the hbl menu will be rendered at 720p in both handheld and console mode.

Themes

The intention was for hbmenu to match the user's current Switch theme, so two (somewhat) matching themes are provided:

Dark Theme

dark theme

Light Theme

light theme

Layout

UI elements are aligned to a 20x20 pixel grid (the red lines in the mockups below mark 8 grid spaces). The elements in each corner of the screen are given relatively generous margins to avoid cropping / overscan issues when displayed on TV screens:

grid layout

Text

Besides the "hbmenu" logo, all text use the open-source Inter UI font family, in a total of 4 different size/weight combinations:

  • 42px medium - titles
  • 24px medium - clock, directory path, and action prompts
  • 24px regular - main text, used for the app description
  • 20px regular - secondary information, like the version string and app author / size

text layout

Colors

Dark Theme Light Theme
dark theme swatch light theme swatch

As text for convinience:

Dark Theme: #2D2D36, #60CCCC, #429A9F, #6783C9, #516EAD, #2D98AF, #FFFFFF, #C0C0C3

Light Theme: #EBF0F6, #65D4FA, #6BB9FF, #97AEFF, #8088EA, #61B6EE, #222222, #888892

Assets

Image assets for the hbmenu logo, icons, and various UI elements like shadows, gradients, etc are provided in /assets. UI elements are aligned as shown:

slices

Wave Effect

The wave motion should be extremely subtle and calm, with maxiumum wave amplitude being no higher than ~8px or so. Otherwise it may be too distracting (and cause motion sickness :P).

In total there are 4 wave layers, with the order of primary color, primary shadow color, secondary color and secondary shadow color from front to back. Waves should not have transparency unless specified in the theme.

The lower 180px of the wave fades into a slighty deeper color (wave gradient in the color swatches). This is to both give the "water" a sense of depth and to ensure that the lower text is readable:

wave

Todo

  • Alternate grid layout
  • Full homebrew launcher logo
  • Sample app icons that follow the same aesthetic?
  • Website landing page redesign?