Online College Courses for Credit

4 Tutorials that teach Applications of Layout
Take your pick:
Applications of Layout

Applications of Layout

Author: Sophia Tutorial

In this lesson you will learn how layout principles are utilized in a variety of visual communications disciplines.

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.

310 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.


What's Covered

This tutorial will discuss how layout and design varies across different mediums, specifically focusing on:

  1. Advertisement
  2. Web Design
  3. Movie Poster
  4. Smartphone Screens

1. Advertisement

Below is an image of an older advertisement.

This advertisement has a nice use of borders. You also have other design elements with borders surrounding that body copy. This gives a good sense of hierarchy, justified alignment, particularly inside the frame underneath "Prince Albert." This also shows the use of margins, gutters between the pages, and hierarchy playing such an important role with layout, columns, rows, alleys.

2. Web Design

All of the elements of layout also apply to the website design below.

This layout is pretty close I'd say to Mondrian layout in that it has very clear, distinct separation of elements. Everything is in the blocks and all the information and graphics can be swapped, interchanged and still remain in those kind of same block layouts. It's very easy to see the information because there is not too much jumping around.

When laying out pages, particularly in web design, designers will often use what's called a wireframe.

Term to Know

    • Wireframe
    • In Web design, a schematic which shows the underlying structure of a web page.

A wireframe in web design is a schematic which shows the underlying structure of a web page. And basically it looks something like the image below.

This is not to be confused with page layout grid that we learned about. The grid is used for page layout and publishing, printing, whereas wireframes are typically suited for web design.

3. Movie Poster

Below is a movie poster that shows the application of layout principles.

There are hundreds of movie posters, used all over the place. This means that elements have to be arranged in very clear ways to create these very striking and unique and identifiable and easy-to-read designs. So again, as easy as it looks, as basic and simplistic, there's still hierarchy and strategy being put to use as far as the typeface chosen, the spacing, the size, color, and more design choices.

4. Smartphone Screens

Even on your smartphone, you can see the effects of good layout.

All of the layout helps answer the important questions: 

What's information that you want to see right away? 

What's the most important and what's least important? You want to know the time typically right away, so you have a specific size for that typeface chosen. Then you might want to know the date. 

Typically they seem to follow one another and this works in that headline-subhead layout, time and date. Then you'll naturally go all the way down to the smallest bit of text or smallest element, which happens to be the text below the lock there that reads Human iOS. 

Wouldn't you know it, there's a target there on that lock screen. So eye flow goes from top to bottom. Of course, no smartphone is complete without a nice collection of apps. And what do you see here? You see grids, which are crucial to layout.


This tutorial focused on advertising, showing how borders and gutters were used in an old poster and what all the elements look like in a web design.   Even movie posters and smartphone screens display layout!

Keep up the learning and have a great day!


Terms to Know

In Web design, a schematic which shows the underlying structure of a web page.