Visual Hierarchy

DEFINITION

Letting the rank order importance of the content dictate the rank order importance of the visual design. For layout and illustration this can be can be broken into levels:

level 1 elements are the most important to the narrative, brand, or function, and should attract the viewers attention first
level 2 elements are the second most important to the narrative, brand, or function, and should attract the viewers attention second
level 3 elements are the second most important to the narrative, brand, or function, and should attract the viewers attention third
and so on...

Building Blocks of Visual Hierarchy

Scale (or size)
Color (warms are highest, cools are lowest)
Contrast of each visual object relative to the background directly behind it
Positioning of elements to each other. The eye prefers to start where it left off. However, if another visual object is bold enough, it can pull the eye away.
Spacing: As the distance between objects increases, the natural eye path flow between them decreases... and vice versa.
Appeal: Though hard to measure, an especially appealing visual object can attract more attention to itself.
Motion: Can be used to literally direct the eye from point to point. It can also attract more attention to a contained-animated visual object.

SITE LINES

Example Mark-ups by KCAD Alum. James Suhr demonstrating how composition effects visual hierarchy. In this example most edge lines are aimed at the focal point (the family). Next in the hierarchy are the cars which tell us which era we are in. And, thirdly, the city-scape tells us where we are.

ATMOSPHERIC PERSPECTIVE

Example Illustration by KCAD student Nolan Nasser demonstrating how atmospheric perspective effects visual hierarchy. Our hero is at the top level, then his army (he has an army!), then the smoke and fire, which tells us that the battle is well underway.

Illustration by KCAD student Jacob Pryor

Illustration by KCAD student Karl Brandt

color

This example illustration by KCAD student Tina Uhazie, Britanny Zerkle and Aaron Leathers shows how using complimentary color can create visual focal points.

Illustration by KCAD student Dan Pierce

Illustration by KCAD student Alyn Tran

outlining

Illustration by KCAD student Kait Mayne

This example illustration by KCAD student Cloud Pimentel shows the use of outlining to "pop" characters off a background.

detail

Example Illustration by KCAD student Colin Chan demonstrating how adding more detail to an airship than the environment can punch it out.

Illustration by KCAD student Bobby Babcock (note the difference in rendering detail between the characters and the background).

INTERACTIVE DESIGN

An example of building visual hierarchy into wire framing and sketching. By using gray-scale contrast, along with scale and positioning, the visual hierarchy can be addressed simultaneously with the layout.

An example of finessing the visual hierarchy in a final design layout

An example of Visual hierarchy blended with navigation conventions in an interactive design: live app > Flash Framework.

The action the user should take first (push play) and the result of the action (ellipse animation) are orange and at the top level.
Title (orientating the user in the "world") and important supporting instructions are in Cyan at the second level
The primary, persistent, navigation is at the 3rd level.
The branding and background are at the fourth level.

Another visual code that is integrated across the first and third levels: buttons are beveled... everything else is not.

Authored by KCAD Professor Bill Fischer

Google Sites

Report abuse