Hierarchy

== = = = Hierarchy = by Susan Gardner

toc Hierarchy is defined as "any system of persons or things ranked one above another. It is a system that helps us define order and organization.  In design, hierarchy is usually discussed and referred to as **visual hierarchy**. Visual hierarchy is extremely important in design since it controls how the human eye perceives the order of the information on the page - "it tells a story about your page site."

Creating visual hierarchies makes it simple for the viewer to identify what is most important on page and what they should be looking for. In the example below, you can quickly identify that the left example has no hierarchy while the right example has a number of elements that help define hierarchy.
 * = [[image:visual-hierarchy-none.png width="281" height="385" link="@http://www.vanseodesign.com/web-design/visual-hierarchy/"]] ||= [[image:visual-hierarchy-example.png width="279" height="385" link="@http://www.vanseodesign.com/web-design/visual-hierarchy/"]] ||
 * = This example has no hierarchy, so it makes it almost impossible for the viewer to review the information quickly and identify specific important elements. ||= The example of the right incorporates hierarchal elements, such as headers, different type size and color, and spacing create a much easier way for the viewer to find the specific information they are looking for. ||

Designers can also use one or more of the following elements within their creation to create hierarchy within their creations.

** Contrast **
Contrast shows relative importance. When a larger font is used in a material or design, such as a header, that element communicates the information is more important than the other information on the page. The same contrast principle can be applied for ** colored **or //italics//, **bolded** font.

** Repetition **
Repetition communicates certain elements are at the same level in the hierarchy. One example is the use of **__ hyperlinks __**. Once you have seen the blue underlined text and understand its function, then you know its meaning and importance the next time you see it.



** Alignment **
Alignment provides order. It creates start and end points on a page. When a single element breaks the established alignment, it calls attention to itself and its importance. In design, a **pull quote** is a good example of an element that breaks the alignment and becomes important.

** Proximity **
Proximity groups elements within a hierarchy and creates new sub hierarchies.

Color
Color can function as both an organizational tool as well as a personality tool. As stated earlier, bolded color text will draw the viewer's attention and create hierarchy. Color can create specific emotions or can be perceived as weighing more than others. Red is seen as the heaviest while yellow is the lightest. The use of color can also define a hierarchical classification or categories in a design. On the website, One.org, they use colors to differentiate their issue categories. A light blue color represents health issues, dark green represents financial issues, purple represents governmental issues, and orange represents educational/economic issues. This use of color makes it easy for the viewer to connect issues easily and identify categories.



** Dominance/Size **
The influence of one element over another. Dominance or size creates a focal point or starting point in design and create a visual hierarchy. The dominant element on the page should be the first element you want people to see first. In the example below, the dominant element in the design is the "Hello! What are you doing here?" large text. The viewer's eye goes to that element immediately and then allows your eye to work down that page from the question mark.



Emphasis
Emphasis is stressing one element over another. This approach is usually accomplished by changing the size, contrast (color, shape), weight, or position within the design. In the example below, the title of the magazine, GOOD, is the largest text on the cover. This large text draws the viewer's eye to that area first and then goes down to the next largest text, which happens to be the cover story, "Dig In".



= Typographic Hierarchy = Hierarchy is also used when discussing type. Typographic hierarchy "expresses an organizational system for content, emphasizing some data and diminishing others". When a document that just uses text, using a hierarchal structure is extremely important to organize the information well for your viewers. A hierachy "helps the viewer scan a text, knowing where to enter and exit and how to pick and choose among its offerings." Typographical hierarchy uses cues. Cues can be: The following graphic from //Thinking with Type// demonstrates the hierarchy variations using a mixture of spatial and graphic cues.
 * spatial - indent, line spacing, placement
 * graphic - size, style, color, symbols



include component="comments" page="page:Hierarchy" limit="10"