+
4 Tutorials that teach Common Layout Styles
Take your pick:
Common Layout Styles

Common Layout Styles

Description:

In this lesson you will learn to recognize and identify a variety of commonly used layout styles.

(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

Welcome to today's lesson on common layout styles. Today you're going to learn to recognize and identify a variety of commonly-used layout styles. Specifically, this lesson will cover:

  1. Mondrian
  2. Frame
  3. Picture Window
  4. Circus
  5. Sihouette
  6. Rebus
  7. Big Type

1. Mondrian

Mondrian is a layout style named after a Dutch painter, and characterized by emphasis in dividing the space into obvious sections.

Term to Know

    • Mondrian
    • A layout style named after a Dutch painter and characterized by emphasis dividing the space into obvious sections.

As you can see in the image below of the web page www.nasa.org, there's very clear distinctions between spaces.

Everything is kind of in its own block or window, so to speak, with very clear divisions. This is kind of a pretty obvious use of grid layout, where elements are set in these rows or columns.


2. Frame

Frame is a layout style characterized by the use of a border.

Term to Know

    • Frame
    • A layout style characterized by the use of a border.

In the image below, you can see a newspaper ad for Columbia Bicycles.


This ad is surrounded by a lovely border of flowers. Even within the ad, there's another element here, and it's a kind of a graphic of a bicycle frame. There's type on the right-hand side and it's surrounded by this other border or graphic, so it kind of looks like a seal. So this layout really is almost kind of literally a picture frame with the way the border surrounds the design.


3. Picture Window

Picture Window is a vertical layout style characterized by a large picture at the top, with a headline and body copy below.

Term to Know

    • Picture Window
    • A vertical layout style characterized by a large picture at the top with a headline and body copy below.

The example below shows a large picture at the top with our clear headline.

Then you have the body copy below that. Oftentimes you'll see the headline kind of stylized or in different angles. But the distinction here is the image and headline above and the body copy, which could be the story or the article, below that.


4. Circus

Circus is a layout style characterized by the use of a wide variety of shapes and sizes of design elements.

Term to Know

    • Circus
    • A layout style characterized by the use of a wide variety of shapes and sizes of design elements.

The image below has a lot going on here.


There's a lot of various typefaces being used in a variety of colors, sizes. There's use of line throughout the design, all the positions and orientations, the shapes, the texture. It's very fun and dynamic.


5. Silhouette

Silhouette is a layout style characterized by picture elements that are cut out of the backgrounds.

Term to Know

    • Silhouette
    • A layout style characterized by picture elements that are cut out of their backgrounds.

The example below is literally silhouettes.

The headline itself appears to be kind of a silhouette. It unifies well with the silhouette of the dancers. The type below appears to be cut out. So it kind of looks like a paper cutout.


6. Rebus

The Rebus layout style is characterized by a headline with some of the words replaced with pictures.

Term to Know

    • Rebus
    • A layout style characterized by a headline with some of the words replaced with pictures.

Below is the example "I Heart Sophia."


Rather than include the actual word, it's been replaced with a graphic or a picture, very much like the I Love New York logo. You see this quite often, and it's pretty simple but effective. Nowadays the big craze is the mustache. You'll see posters and t-shirts that will say something like "I" and then have a picture or graphic of a mustache. And then the end of the sentence will say something like "you to dance." So it'll read, "I mustache you to dance." "I must ask you to dance."


7. Big Type

As the name implies, Big Type is a layout style characterized by the use of very large headlines.

Term to Know

    • Big Type
    • As the name implies, a layout style characterized by the use of a very large headline

As you can see in the image below, that's really all there is to it.

The headline will be very large and you can clearly see that the EFF is huge. So talk about hierarchy here. This headline is meant to be seen first due to its position, color, and size.

Summary

Well, that ends today's lesson on common layout styles. This lesson took you through the seven common layout styles starting with Mondrian, and then moving on to Frame. The lesson also covered the layout styles Picture Window, Circus, and Silhouette. Finally, this lesson finished with the layout styles Rebus and Big Type.


Keep up the learning and have a great day!

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

TERMS TO KNOW
  • Mondrian

    A layout style named after a Dutch painter and characterized by emphasis dividing the space into obvious sections.

  • Frame

    A layout style characterized by the use of a border.

  • Picture Window

    A vertical layout style characterized by a large picture at the top with a headline and body copy below.

  • Circus

    A layout style characterized by the use of a wide variety of shapes and sizes of design elements.

  • Silhouette

    A layout style characterized by picture elements that are cut out of their backgrounds.

  • Rebus

    A layout style characterized by a headline with some of the words replaced with pictures.

  • Big Type

    As the name implies, a layout style characterized by the use of a very large headline