Application Layout Shells

Overview

Almost every successful app uses one of ~6 proven shells; invention here is nearly always a regression. Pick the shell that matches the app's object model, then apply the standard sizes — users navigate on muscle memory built from Slack, GitHub, and Gmail.

When to Use

• Scaffolding a new app's top-level layout before any feature screens
• Reviewing a layout that feels "off," breaks on resize, or scrolls the wrong regions
• Deciding panel widths, content max-widths, and fixed vs scrolling regions
• Planning how a desktop layout collapses to tablet and mobile
• Adding a detail/inspector panel to an existing list or canvas view
• Choosing between a modal and a routed page for a workflow
• NOT for choosing which nav pattern carries the destinations (see flow-navigation)
• NOT for single-purpose pages (login, marketing landing) — those are page layouts, not shells

The Proven Patterns