Back to patterns
macrostructure-first
Macrostructure First
Choose the page or screen structure and reading order before selecting component recipes or detailed styling.
PatternsRecommended
Intent
Prevent component-first assembly from producing repetitive card grids and weak hierarchy that do not match the user workflow.
Checks
- Select a macrostructure that matches the primary outcome.
- Verify semantic and visual reading order before styling details.
- Define how the structure recomposes at narrow widths.
Warnings
- Do not choose a structure solely because it appears in a reference gallery.
Exceptions
- A component-only task inherits the surrounding macrostructure.