Online College Courses for Credit

4 Tutorials that teach Layouts in Context
Take your pick:
Layouts in Context

Layouts in Context


In this lesson you will learn to analyze layout examples applying knowledge of principles and elements of design.

See More
Fast, Free College Credit

Developing Effective Teams

Let's Ride
*No strings attached. This college course is 100% free and is worth 1 semester credit.

29 Sophia partners guarantee credit transfer.

312 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 27 of Sophia’s online courses. Many different colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.


Video Transcription

Download PDF

Hi, everyone. My name is Mario. And I'd like to welcome you to today's lesson, Layouts in Context. So for today's lesson, we're going to learn to analyze layout examples and applying knowledge of principles and elements of design. So as always, feel free throughout the lesson to pause, fast-forward, and rewind as you see fit. And when you're ready to go, let's get started.

OK. So let's take a look at a culmination of all that we've learned and how it's applied. And let's start with this article of GP. This is General Practitioner. And so like a magazine article, if we had both pages, we'd have our spread. And here I want you to look at a few things.

First of all naturally hierarchy plays a huge role here. And elements of the page have been selectively placed to create a particular eye flow. And aside from the giant GP logo that just borders on big type style, we have a pretty clear headline here, "PCTs restrict access to diagnostic scans." Nothing else in the page comes close to the size here and weight of that line of type. And then you have columns of body copy below that.

And we even have a lovely image here of that man in the MRI machine with a caption below it. So notice around this page the very clear margins, the separation between the text and the edges of the page. And you'll also notice that the type here is justified within the columns to make it easier to read. So there's a lot going on here. And it could easily be overwhelming, so it's important to take all the things that we've learned and apply them in a way that will be able to provide the reader a nice aesthetic, a very easy flow and readability.

Next we have this graphic design piece. And it reads "when triangles make friends, you get a hexagon." And the first thing I noticed here aside from the graphic was the centered alignment. And we talked about alignment and mentioned that centered and right alignments were not the best for reading bodies of text. But in this case it brings a nice balance to this piece.

There's also a nice sense of mirroring here. You know, both the top and bottom portion of the text have those two different typefaces being used. So "when triangles" and "you get a" have the same typeface being used. Likewise, "make friends" and "hexagon" have the same typeface being used.

And the position and size of these two particular words establishes a certain flow as well. Your eye is drawn to the type with larger size and weight, so your eyes kind of tend to scan "make friends" and "hexagon" really quick before the rest of you sort of catches up and then goes through the design as a whole. So "when triangles make friends, you get a hexagon." Pretty neat design.

Here we have a design cover for a book entitled Martian Time-Slip. And this is written by Philip K. Dick, a really great science fiction author. And this is very basic and simple. But hierarchy again, really important.

The name of the book is the most important bit of information on this cover. And you need to know it and you want to know it. You want to know what it's called first.

And of course, the large text with thick strokes is going to help achieve that. And even though you have that bright eye-bleeding ribbon above that, your eyes are still drawn to Martian Time-Slip and Philip K. Dick. So very simple, but effective.

All rightie. Boy is this busy. OK. There's a lot going on here.

And actually, you know, with the exception of a few elements of type in this particular example, particularly the bottom lines here that read "the Hollywood Issue," the rest of the type appears to be identical but in different weights and sizes. And this helps tie everything together and provide unity.

And as you can tell, the text alignment is all over the place, so very free-form, definitely not something you'd want to see in a book. But it does provide some dynamic qualities to this cover. And notice how they establish those levels of hierarchy on this cover. "Vanity Fair" is bold, large, all capitals. And it nearly takes up the entire space edge to edge.

And then each body copy has its own head or rather subhead. You know, it says "10th Anniversary Portfolio" and then the information there that I can't make out. "400" and then "pages of moms" et cetera, "85" or whatever. And then "Michael Jackson faces the music," and then more information and then "2004 Hollywood Issue" and blah, blah, blah.

And despite how busy it is, it's actually still quite neat how they use it to their advantage. You know, when you're done staring at the Hollywood actresses here, then you move on to the very top with "Vanity Fair." And then you move down "10th," "400." And you kind of roll along the edge and get more information.

And maybe you kind of get a bit bored as you reach "Passion Play" and "Mel Gibson." But then more excitement, big, large text and color, light blue and yellow. And it's got this nice kind of C-curve flow.

Last, we have this really cool-looking poster for the movie Looper. And this one is also quite simple but very, very effective. Great graphical elements here. And everything fits really well together.

All the type is positioned in areas that your eyes can easily and quickly catch, read, and absorb, and provide that sense of unity by the use of the same or similar typeface, the capital letters across the board, and this really nice balanced layout, kind of equal distribution of visual weight, that large type below that half of the page and that reads "Looper." And then you kind of collect the smaller-size type above that's a bit more spread out.

And on top, you have this kind of more dynamic distribution of the type. And it almost kind of creates this sort of triangle. And below you have type that's centered as far as alignment goes. You can see you have your "written and directed by Ryan Johnson," and then "Looper" is centered. And then you have more body copy below that that's centered as well.

So very balanced, uniform. But most importantly, it's easy to read. And it's aesthetically pleasing.

Well, that concludes today's lesson. We'll end with a couple key terms that we used throughout this lesson, typeface, readability, margins, eye flow, free-form, left alignment, right alignment, centered alignment. And we'll continue on with a few more here, justified alignment, spread, column, hierarchy, headline, subhead, and caption.

Hope you've enjoyed today's lesson with me today. My name is Mario. And I will see you next lesson.

Notes on "Layouts in Context"


Image of GP Magazine, Creative Commons

Image of Hexagon Graphic Design, Creative Commons

Image of Martian Time-Slip, Creative Commons

Image of Vanity Fair Cover, Creative Commons

Image of Looper Poster, Creative Commons

Terms to Know

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

Centered Alignment

Lines of type which are aligned along a central axis.


In a layout, a defined block of space that contains type or image. Columns are bordered by margins.

Eye Flow

The path of a viewer's eye.

Free Form

Lines of type which do not appear to follow a strict justified or right, left or centered alignment.


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.

Justified Alignment

Lines of type which are spaced to align along both a left and a right margin, creating a block.

Left Alignment

Lines of type which are aligned to a left margin and ragged on the right.


White space which frames the elements in a page layout.


How easily words and blocks of words can be read.

Right Alignment

Lines of type which align to right margin and are ragged on the left.


The term for two facing pages.


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


The complete name of a type family member, typically containing the name of the publisher, family, weight, posture and width.