Opening reference…
Rules for making visual relationships, priority, state, and interaction meaning legible before the user has to read every detail.
8 principlesRules for making visual relationships, priority, state, and interaction meaning legible before the user has to read every detail.
Interfaces are first encountered as visual structures. People notice grouping, contrast, alignment, repetition, boundaries, motion, and relative emphasis before they build a complete semantic understanding of the page.
This category gives Layr a way to inspect whether the rendered interface communicates the same relationships that the product and DOM actually contain. It focuses on visible evidence: what appears grouped, what attracts attention, what looks interactive, what appears selected, and what feels more important than its neighbors.
The objective is not to make every product minimal or visually dramatic. The objective is to make visual signals truthful. A dense operations dashboard can satisfy these rules. A beautiful landing page can violate them if its hierarchy misrepresents priority or hides state.
Layr should read visual structure as a language. Spacing communicates grouping. Similarity communicates shared meaning. Boundaries communicate ownership. Connection communicates relationship. Contrast communicates priority. Motion communicates change or urgency. When these signals agree, users can understand a screen quickly. When they conflict, users must slow down and resolve the contradiction through reading or trial and error.
The category is strongest when the agent can compare what the interface looks like it means with what the product actually means. That comparison turns a subjective design review into an evidence-based one. A border is not simply attractive or unattractive; it either communicates the correct scope or it does not. A badge is not merely bright; its salience either matches the importance of the state or it does not.