Learning path

Full curriculum

Full curriculum

Arrows go from each prerequisite to the units that depend on it. Hover or focus a unit to highlight its path.

Unit content

Visual hierarchy, grouping and scanning

People rarely inspect every interface element with equal attention. Visual hierarchy uses presentation to communicate which information is primary, which items belong together and where attention should move next.

Differences in size, weight, position and spacing can establish hierarchy. Proximity and alignment can group related elements without adding boxes or labels around everything.

Repeated visual treatment should indicate repeated meaning. If one style means “primary action” in one place, using the same style for an unrelated secondary action weakens the learned signal.

Whitespace is functional: it separates groups and reduces competition between unrelated elements. Dense interfaces can still be effective for expert work, but density should come from useful information rather than accidental clutter.

Interfaces should support scanning by making headings, labels, values and actions distinguishable at a glance.

Visual hierarchy is therefore an information structure expressed through perception, not decoration added after the interaction has already been designed.