Source: Image of Mount Hamilton, Creative Commons http://www.flickr.com/photos/anthonyalvernaz/78125...
Hi, everyone. My name is Mario, and I'd like to welcome you to today's lesson on hierarchy. In today's lesson, we'll learn to define and recognize visual hierarchy and page layout. So as always, throughout the lesson, feel free to pause, fast forward, and rewind at your own pace. And when you're ready to go, let's begin.
Hierarchy is the organization of elements according to importance. And in typography, hierarchy is achieved by placement, size, color, or style. So keep these things in mind-- placement, size, color, and style. These things are going to help arrange elements in a particular hierarchy to suit the needs of particular projects and media types.
Let's take a look at some examples to really wrap our heads around hierarchy. This is a local newspaper here. I actually kept this newspaper because myself, my brother, and a close friend of ours show up on page two of this newspaper. So we're pretty famous. But not really. We were lost in the Santa Cruz Mountains for roughly 10 hours before rangers came to our aid.
But anyways, hierarchy is the organization of elements according to importance. And if we 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, we have a headline. And in layout, a headline is 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 has its nice place on top, that large type with really good weight. And no question, really, what you should be reading. It's very, very bold. You see it right away.
Then we move down to a subhead. And in page layout, a subhead is a heading smaller and of lesser importance than a headline. These here could be a subhead, and this one as well, both of these. And I highlighted both of these again so you can see that you can have more than one subhead.
And 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. That's going to be important, the use of type, the appropriate typeface for the purpose.
And if we move down the page here, further down, we have our picture, and then we get a caption. And in page layout, a caption is lines of descriptive text positioned under a graphic or a photograph. So again, we have the photo here. And hey, I wonder who these people are in this photo. Well hey, why don't we look at our caption. It says, Sylvia Montana and her family-- Isaac, who is five, on the left, and Alandra, who is eight, in the center here-- spend time on the internet in their San Jose apartment using a computer donated from San Jose State that was arranged by a neighborhood association founded by Sammy Monsieur. So really nice to have that caption there to provide us with additional information as to what it is I'm looking at.
Below the caption, we 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. So you can see in our left-hand column here, if I were to move this portion of body copy down and draw a line here, that would be our paragraph rule. So oftentimes, this will be used to maybe 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.
Before we wrap up here, I wanted to show you three layout examples that's using the same copy but with different compositions and typographic characteristics so we can really see how the change can alter the levels and hierarchy. We have our paper here, and I think the hierarchy is pretty clear. We have our headline up top in that bolder, heavier type, and below we have our subhead that's using a different typeface that isn't as impactful, I would say, as the headline. Below that, we have this beautiful photo of the mountains. Below that, we have our 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. So let's grab your attention with the headline first, and then your eyes can trickle down towards the story. So keep this layout in mind as we move on to the next one so you can compare them.
We played a bit of role reversal here. The image take center stage, and below that we have a caption that provides us a bit of information as to what I'm looking at. And then comes our headline and subhead. Notice that the headline here is more condensed. There's less space between the letters. Then we have that line that's kind of dividing things up and body copy below.
So it's a bit different. And it's interesting how the reader will approach this layout. Will he or she instinctively go for the big heavy text, and then read the story, and then go to the photo? Or photo, headline, story; headline, photo, caption, story? It's very important to think about these things. How do you arrange and size these elements to create that appropriate flow that you want to give the reader?
So last we have our headline back up top with our beautiful photo and caption to break things up on the left here just to add a bit of variety. And then we have our 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.
Well, everyone, that ends our lesson for today. We'll conclude with our key terms-- hierarchy, headline, subhead, caption, and paragraph rule. Hope you've enjoyed this lesson with me today. My name is Mario, and I will see you next lesson.
The organization of elements according to importance. In typography, hierarchy is achieved by placement, size, color or style.
In a layout, a main heading above a block of text.
In a page layout, a heading smaller and of lesser importance than a headline.
In page layout, lines of descriptive text positioned under a graphic or photograph.
In page layout, a term used to describe a line used as a graphic element and positioned within a column of text.