Bars, meters and panels

Bars are the other half of a HUD: health, mana, stamina, a boss meter. A bar is read by how full it is, so the fill needs strong value and hue contrast against its empty track — and a dark frame around the whole thing so it separates from the game behind it. Segmented bars (discrete chunks) are even easier to read at a glance than a smooth fill, because the player can count them.

Panels and nine-slice

Menus and dialog boxes sit on panels — bordered rectangles that come in every size. You do not draw a new panel for every size. Instead you draw one small panel and let the engine stretch it with a trick called nine-slice: the four corners stay fixed, the four edges stretch in one direction, and the center stretches both ways. That way the border stays crisp at any size while the middle grows to fit.

Nine-slice: draw one small panel, and the corners stay crisp while edges and center stretch to any size.