lesson, you'll learn to define and recognize visual hierarchy and page layout. Specifically, this lesson will cover:
Hierarchy is the organization of elements according to importance.
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.
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.
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.
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.
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.
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.
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.
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
In page layout, lines of descriptive text positioned under a graphic or photograph.
In a layout, a main heading above a block of text.
The organization of elements according to importance. In typography, hierarchy is achieved by placement, size, color or style.
In page layout, a term used to describe a line used as a graphic element and positioned within a column of text.
In a page layout, a heading smaller and of lesser importance than a headline.