MSPTC_Logo_small.jpg

Hierarchy

by Susan Gardner

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.[1]

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."[2]

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.
visual-hierarchy-none.png
visual-hierarchy-example.png
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.[3] 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.[4] 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.

pull_quote.png
A pull quote is one example of breaking alignment and creating hierarchy.

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.[5]

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.[6] 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[7] . The use of color can also define a hierarchical classification or categories in a design.[8] 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.


Screen Shot 2014-09-21 at 7.50.45 PM.png
The One.org website uses colors to create a hierarchy classification system.



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.[9] 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.

The large font in the middle of the page helps create a hierarchy for the viewer.
The large font in the middle of the page helps create a hierarchy for the viewer.


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.[10] 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".

Good Magazine, Issue-032
Good Magazine, Issue-032



Typographic Hierarchy

Hierarchy is also used when discussing type. Typographic hierarchy "expresses an organizational system for content, emphasizing some data and diminishing others".[11] 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."[12] Typographical hierarchy uses cues. Cues can be:
  • spatial - indent, line spacing, placement
  • graphic - size, style, color, symbols
The following graphic from Thinking with Type demonstrates the hierarchy variations using a mixture of spatial and graphic cues.[13]

ThinkingwithType-Heirarchy.png



  1. ^ Porter, Dave. "Hierarchy & Web Site Design". WoodStreet, Inc. 21 September 2010. Web. 14 September 2014. <http://www.woodst.com/web-design-development/hierarchy-web-site-design/>
  2. ^ Bradley, Steven. "Visual Hierarchy: How Well Does Your Design Communicate?". VanseoDesign. 15 December 2009. Web. 20 September 2014.
    <http://www.vanseodesign.com/web-design/visual-hierarchy/>
  3. ^ Bradley, Steven. "Visual Hierarchy: How Well Does Your Design Communicate?". VanseoDesign. 15 December 2009. Web. 20 September 2014.
    <http://www.vanseodesign.com/web-design/visual-hierarchy/>
  4. ^ Bradley, Steven. "Visual Hierarchy: How Well Does Your Design Communicate?". VanseoDesign. 15 December 2009. Web. 20 September 2014.
    <http://www.vanseodesign.com/web-design/visual-hierarchy/>
  5. ^ Bradley, Steven. "Visual Hierarchy: How Well Does Your Design Communicate?". VanseoDesign. 15 December 2009. Web. 20 September 2014.
    <http://www.vanseodesign.com/web-design/visual-hierarchy/>
  6. ^ Jones, Brandon. "Understanding Visual Hierarchy in Web Design". tuts+. 28 September 2011. Web. 21 September 2014.
    <http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84>
  7. ^ Bradley, Steven. "Visual Hierarchy: How Well Does Your Design Communicate?". VanseoDesign. 15 December 2009. Web. 20 September 2014.
    <http://www.vanseodesign.com/web-design/visual-hierarchy/>
  8. ^ Jones, Brandon. "Understanding Visual Hierarchy in Web Design". tuts+. 28 September 2011. Web. 21 September 2014.
    <http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84>
  9. ^
    Bradley, Steven. "Dominance: Creating Focal Points in Your Design". VanseoDesign. 1 February 2010. Web. 14 September 2014.
    <http://www.vanseodesign.com/web-design/dominance/>
  10. ^
    Smith, Matt. "The Principles of Graphic Design: How to use Hierarchy and Emphasis Effectively". Edgee. 19 May 2014. Web. 15 September 2014.
    <http://www.edgee.net/the-principles-of-graphic-design-how-to-use-hierarchy-and-emphasis-effectively/>
  11. ^
    Lupton, Ellen. Thinking with Type. New York: Princeton Architectural Press, 2004. Print and Web. <http://www.thinkingwithtype.com>
  12. ^ Lupton, Ellen. Thinking with Type. New York: Princeton Architectural Press, 2004. Print and Web. <http://www.thinkingwithtype.com>
  13. ^
    Lupton, Ellen. Thinking with Type. New York: Princeton Architectural Press, 2004. Print and Web. <http://www.thinkingwithtype.com>