Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchyinfluences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception.

Compare the two images below, one with no hierarchy and one with a clear hierarchy:

How Does Visual Hierarchy Express Meaning?

Think of the basic design principles contrast, repetition, alignment, and proximity. Each allows us to add relative meaning to information.

Contrast shows relative importance. Without being told you know the larger text is more important than the smaller text. An h1 heading is bigger than an h2 heading is bigger than an h3 heading. Bigger grabs our attention first and so comes across as more important.

Repetition attaches meaning to new elements. Think blue underlined links. You’ve seen them before and the next time you see them you bring with you information about them. Repetition instantly communicates that elements are at the same level in the hierarchy.

Alignment creates order. It allows you to quickly connect elements across the page and helps define start and end points. Think grids.

A single element that breaks the established alignment calls attention to itself and it’s importance. Think of a pull quote. Visually it gives you clues it’s an important concept taken from within the text.

Proximity groups elements within a hierarchy and creates new sub hierarchies. Your home page has three offers for different products or services. Each might have a heading, a descriptive paragraph, an image, and a link to more information. The specific design elements would be on a different hierarchical level, but each offer (by containing the same 4 elements) connects the offers as being at the same hierarchical level.