+
Hierarchy

Hierarchy

Rating:
Rating
(0)
Description:

In this lesson you will learn to define and recognize visual hierarchy in a page layout.

(more)
See More
Try a College Course Free

Sophia’s self-paced online courses are a great way to save time and money as you earn credits eligible for transfer to over 2,000 colleges and universities.*

Begin Free Trial
No credit card required

25 Sophia partners guarantee credit transfer.

221 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 20 of Sophia’s online courses. More than 2,000 colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial

What's Covered

lesson, you'll learn to define and recognize visual hierarchy and page layout. Specifically, this lesson will cover:

  1. Hierarchy Overview
  2. Hierarchy in Action
  3. Effects of Composition & Typography

1. Hierarchy Overview

Hierarchy is the organization of elements according to importance.

Term to Know

    • Hierarchy
    • The organization of elements according to importance. In typography, hierarchy is achieved by placement, size, color or style.

In typography, hierarchy is achieved by placement, size, color, or style. These things are going to help arrange elements in a particular hierarchy to suit the needs of particular projects and media types.


2. Hierarchy in Action

The image below is a newspaper.

If you look at this newspaper, you can really get a feel for how certain elements are organized so that the viewer reads the paper in a particular order. First of all, you have a headline. In layout, a headline is a main heading above a block of text.

Term to Know

    • Headline
    • In a layout, a main heading above a block of text.

Size and placement plays an important role in establishing this body of text as more important than anything else on this page. Here it has its nice place on top, that large type with really good weight.

Then you move down to a subhead. In page layout, a subhead is a heading smaller and of lesser importance than a headline.

Term to Know

    • Sub-head
    • In a page layout, a heading smaller and of lesser importance than a headline.


The elements highlighted in the image above could both be a subhead. Notice with these that they are both using the same typeface, which is different than the headline. It doesn't hold as much weight. Which you want, again, because this is of lesser importance than the heading.

If you move down the page you have a picture and a caption. In page layout, a caption is lines of descriptive text positioned under a graphic or a photograph.

Term to Know

    • Caption
    • In page layout, lines of descriptive text positioned under a graphic or photograph.


Below the caption, you have a paragraph rule. In page layout, paragraph rule is a term used to describe a line used as a graphic element and position within a column of text.

Term to Know

    • Paragraph Rule
    • In page layout, a term used to describe a line used as a graphic element and positioned within a column of text.

Oftentimes, a paragraph rule will be used to start a new article or just divide ideas within an article.

All these elements together are used to build a hierarchy and provide visual cues for the reader indicating that level of importance.


3. Effects of Composition & Typography

Below are three layout examples that use the same copy, but with different compositions and typographic characteristics so you can really see how the change can alter the levels and hierarchy.

In the first image below, you have a paper where the hierarchy is pretty clear.

You have your headline up top in that bolder, heavier type, and below you have your subhead that's using a different typeface that isn't as impactful as the headline. Below that, you have a beautiful photo of the mountains. Below that, you have your body copy. Again, the placement, the size and style of all these elements provides the viewer with this visual flow from most important to least important.

The image below is the same information, but a different representation.

The image take center stage, and below that you have a caption that provides a bit of information as to what you're looking at. Then comes your headline and subhead. Notice that the headline here is more condensed, there's less space between the letters. Then you have that line that's kind of dividing things up and body copy below.

Now take a look at the last example.

So last you have your headline back up top with the beautiful photo and caption to break things up on the left here just to add a bit of variety. Then you have your subhead back off to the right that then leads you into the body copy, which would be our story. So very different layout, but again, very interesting and quite fun to look at all these different layouts to see what creates the most aesthetically pleasing visual language while providing the viewer with an easy read and easy flow.

Summary

This tutorial discussed hierarchy overview and explained that it is achieved by placement, size, color, or style.  You were able to see hierarchy in action by looking at a few examples such as the newspapers to see the weight of the title.  Lastly, the effects of typography and composition were presented in three different ways so you can see how the image and type impacts the overall perception.

Keep up the learning and have a great day!

Source: SOURCE: THIS WORK IS ADAPTED FROM SOPHIA AUTHOR MARIO E. HERNANDEZ

TERMS TO KNOW
  • Hierarchy

    The organization of elements according to importance. In typography, hierarchy is achieved by placement, size, color or style.

  • Headline

    In a layout, a main heading above a block of text.

  • Sub-head

    In a page layout, a heading smaller and of lesser importance than a headline.

  • Caption

    In page layout, lines of descriptive text positioned under a graphic or photograph.

  • Paragraph Rule

    In page layout, a term used to describe a line used as a graphic element and positioned within a column of text.