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

Categories

AllDesign Systems Page PatternsInteraction Responsive MotionVisual Foundations

Tags

breakpointscomparisongridlayoutmobilenavigationresponsivestabilitytables
Knowledge RAG

Design Knowledge Base

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

Submit principle
6 published principles
Interaction Responsive Motionresponsive / navigation

Responsive Navigation Collapse

Responsive Navigation Collapse turns a frequent interface judgment into an executable constraint before generation.

Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.85%
Design Systems Page Patternsresponsive / stability

Responsive Layout Stability

Fixed-format UI elements need stable dimensions and responsive constraints to avoid shifts or overlap.

Boards, toolbars, counters, and button groups need predefined sizing rules.82%
Interaction Responsive Motiontables / responsive

Responsive Tables and Comparison

Tables support comparison, so responsive behavior must preserve columns, sorting, and key actions.

Turning tables into cards indiscriminately can destroy comparison; choose the pattern by data task.82%
Interaction Responsive Motionbreakpoints / responsive

Breakpoint Recomposition, Not Scaling

Responsive design should recombine layout relationships at breakpoints instead of scaling everything by viewport.

Scaling type and containers causes unpredictable overflow; recomposition is more stable.82%
Interaction Responsive Motionmobile / responsive

Mobile Priority Stack Layout

Mobile is not a smaller desktop; content and actions should restack by task priority.

Small screens need important information, controls, and feedback early without overlap.82%
Visual Foundationsgrid / layout

Grid as a Decision System

A grid is not decoration; it decides span, alignment, responsive recomposition, and density.

A stable grid reduces ad hoc placement and keeps complex pages structured across viewports.82%