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

Information Hierarchy First

Define what users should see first, second, and act on before styling the page.

hierarchylayoutscan

Design Principle

Good interfaces avoid equal emphasis and create a readable order through size, position, density, and contrast.

Principle Good interfaces avoid equal emphasis and create a readable order through size, position, density, and contrast.

Design action Declare primary, secondary, and supporting information tiers; give the main task the strongest weight, reduce supporting noise, and place actions near their objects.

Examples Positive example: Dashboards, CRM, settings, and detail pages need fast scanning. Counterexample: All cards use the same size and emphasis.

Apply when Dashboards, CRM, settings, and detail pages need fast scanning. The page mixes metrics, lists, actions, and explanations.

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

Agent Directive

Declare primary, secondary, and supporting information tiers; give the main task the strongest weight, reduce supporting noise, and place actions near their objects.

Apply When

  • Dashboards, CRM, settings, and detail pages need fast scanning.
  • The page mixes metrics, lists, actions, and explanations.

Avoid

  • All cards use the same size and emphasis.
  • Decoration is added just to make the page feel busy.

Knowledge Metadata

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