UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.
Contribute

Categories

AllInteraction Responsive MotionTypography Color AccessibilityVisual Foundations

Tags

attentionbalancechartscompositiondatafocushierarchylayoutloadingmotionscanskeletontype-scaletypographyvisual-weight
Knowledge RAG

Design Knowledge Base

Community-maintained principles reviewed before publication and retrieved as Agent design constraints.

Submit principle
7 published principles
Interaction Responsive Motionloading / skeleton

Skeleton Loading Hierarchy

Skeleton Loading Hierarchy turns a frequent interface judgment into an executable constraint before generation.

Skeletons should preview real content structure instead of adding extra visual noise.86%Visual Foundationsdata / charts

Data Ink Priority

Data Ink Priority turns a frequent interface judgment into an executable constraint before generation.

Visual ink in charts and metrics should serve data, thresholds, and exceptions before decorative grids.85%Visual Foundationshierarchy / focus

Focal Point Economy

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

The more focal points compete, the weaker the real priority becomes; emphasis must be scarce and task-driven.85%Visual Foundationsmotion / hierarchy

Hierarchy Through Motion

Hierarchy Through Motion turns a frequent interface judgment into an executable constraint before generation.

Useful motion helps users understand what changed, where it came from, and where to look.
84%
Typography Color Accessibilitytypography / hierarchy

Type Scale Hierarchy

Type scale should serve page structure and avoid hero-sized text in compact panels.

A clear type scale lets headings, labels, body text, and numbers each do their job.82%
Visual Foundationsvisual-weight / balance

Visual Weight and Balance

Color, area, weight, position, and shadow create visual weight that must serve task priority.

Visual weight is not inherently better when stronger; it should allocate attention to the most important actionable area.82%
Visual Foundationshierarchy / layout

Information Hierarchy First

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

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