UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Focal Point Economy

Focal Point Economy turns a frequent interface judgment into an executable constraint before generation.

hierarchyfocuscomposition

Design Principle

The more focal points compete, the weaker the real priority becomes; emphasis must be scarce and task-driven.

Principle The more focal points compete, the weaker the real priority becomes; emphasis must be scarce and task-driven.

Design action Assign one primary focal point and at most two secondary focal points per viewport; push other content back with size, lower contrast, and spacing.

Examples Positive example: Hero views, detail pages, dashboard summaries, and decision areas need clear priority. Counterexample: Every section uses oversized headings, bright buttons, and heavy shadows.

Apply when Hero views, detail pages, dashboard summaries, and decision areas need clear priority. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Assign one primary focal point and at most two secondary focal points per viewport; push other content back with size, lower contrast, and spacing.

Apply When

  • Hero views, detail pages, dashboard summaries, and decision areas need clear priority.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Every section uses oversized headings, bright buttons, and heavy shadows.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
85%
Version
v1
Published
6/6/2026