All 55 3D Print 6 AI & Agents 8 Cases 5 E-commerce 6 Front-End 10 Smart Home 5 UX/UI Design 15

Published on: 16/08/2026 · ID 226

UI Structures: The Models the World Uses

Real app shell: Header + Sidebar + main + surfaces. Anatomy, zones, and what not to mix — designed from a product design system.

UX/UI Design

What type of article is this? An explanation of the most commonly used UI structures in dense products — illustrated with the anatomy of a real app shell (structure template, header, and sidebar from a design system), rather than generic stock wireframes.

Thesis The world does not invent a new layout with every sprint. It invents rules: a global chrome, a main with surfaces, and zero second headers.
Annotated app shell: Header, Sidebar, and main
Figure 1 — App shell: Header (brand) + Sidebar (rail) + main (N60) + Page Header + card.

1. Template / Structure — The Dominant Model

In admin, B2B, and SaaS, the most repeated structure in the world is the app shell:

  • Header — brand chrome and global actions (sticky).
  • Sidebar — stable navigation (collapsed ~82px / expanded ~300px).
  • Main — workspace; maximum width (e.g. ≤1640px) to avoid "stretching" the content.

In the product, the shell is assembled once. The feature does not redesign the sidebar nor invent another <header> in green. The core begins at the Page Header (title, subtitle, screen actions) and descends to cards.

Block Channel (product) = Header + Sidebar + main. DS documentation may add the library menu and TOC — this does not go to the end user's screen.
Header in five zones on desktop and four on mobile
Figure 2 — Header in zones: desktop 5 cells · mobile 4.

2. Header — Zones, Not a “Full Bar”

A good header is a map of zones, not a dump of buttons:

  1. Brand — logo + channel name.
  2. Date / Time — temporal context (when it makes sense).
  3. Context — company / position / active account.
  4. Internal — impersonation chip (only when necessary; disappears on mobile for the sidebar).
  5. Actions — cart, notifications, profile (hits ≥40–48px).

Good: header = only global chrome.
Not: filters, feature tabs, or page CTAs in the brand bar — that is the Page Header, in the main.

Collapsed sidebar 82px and expanded 300px with L1 L2 L3
Figure 3 — Sidebar: rail 82 · pinned 300 · levels L1 → L2 → L3.

3. Sidebar — Rail with Levels

The classic sidebar of the world (and the one that scales) is a rail:

  • Collapsed — L1 icons + pin.
  • Expanded / Pinned — title like “Navigate by:”, L1 (group/destination), L2 (submenu), L3 (rare block: highlight / upsell).

Sticky under the header. The tree comes from a single source (nav config) — not from CSS copied by feature.

Good: hits ~40px, short gap, L3 exceptional.
Not: campaign CTA in the rail; second sidebar; shimmer of “company” here (that belongs in the header).

Stack of surfaces N60 to N0 in main
Figure 4 — Surfaces in main: page → container → head → body/foot.

4. Inside the Main — Surfaces, Not Shadows

After the chrome, the structure the world uses for content is a stack of surfaces:

  1. Page (N60) — background of the main.
  2. Container — groups (optional).
  3. Block Header (subtle) — section title.
  4. Body / Footer (elevated / N0) — where the person reads and acts.

The brand from the header/sidebar is not a card surface. Green (or any chrome colour) within the card breaks the hierarchy and appears as “wrong theme”.

Good versus fragile in the product shell
Figure 5 — Checklist: what sustains the shell vs what becomes debt.

5. Good vs Fragile

  • Good: a shell; Page Headers in the main; surfaces with paper; sidebar with stable tree; tokens (not loose hex); main with width ceiling.
  • Not: second header/sidebar; filters in the chrome; brand in the card; fork of the shell by project; TOC documentation in the product; CTA in the rail.

The other classic models (tabs, cards, wizard, master-detail) live within this shell — they do not compete with it. The structure of the world = stable chrome + core with a clear job.

Continue reading