Visual hierarchy
Visual hierarchy is the arrangement of visual elements so differences in prominence guide attention and communicate their relative importance.
Size contrast: A perceptual difference created by making one element larger or smaller than another. Larger elements tend to claim attention and signal greater importance.
Preattentive processing: The rapid detection of basic visual features before focused attention. Differences in size, color, and orientation can register before close inspection.
Information architecture: The organization and labeling of information to support finding and understanding it. Information structure gives visual emphasis a meaningful order to express.
Visual balance: The distribution of visual weight within a composition. Balance distributes weight; hierarchy gives elements unequal attention.
Color contrast: A difference in hue, lightness, or saturation between visual elements. Strong color differences can make an element stand out from its surroundings.
Figure–ground organization: The perceptual separation of a focal shape from its surrounding background. A clear figure-ground relationship helps important elements emerge.
Web design: The design of websites and their interfaces, content, and visual presentation. Web pages use hierarchy to distinguish navigation, content, and calls to action.
Grid (graphic design): A system of intersecting guides used to align and organize elements in a layout. A grid structures placement but does not by itself establish importance.
Typography: The design and arrangement of text using typefaces, sizes, spacing, and other features. Type weight, scale, and style distinguish headings from supporting text.
Proximity (design): A design principle in which nearby elements are perceived as related. Spacing can establish groups and separate levels of information.