Use Sophia to knock out your gen-ed requirements quickly and affordably. Learn more
×

Common Layout Styles

Author: Sophia

what's covered
In this lesson, you will learn how to identify a variety of commonly used layout styles. Specifically, this lesson will cover:

Table of Contents

1. Mondrian

Mondrian is 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 of the webpage below, there are very clear distinctions between spaces.

Mondrian

Everything is in its own block or window with clear divisions. This is an example of grid layout, in which elements are set in rows and columns.

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


2. Frame

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

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

Frame

This ad is surrounded by a lovely border of flowers; within the ad, there is a graphic of a bicycle frame. The type on the right-hand side is surrounded by another border or graphic, giving it the appearance of a seal.

Thus, this layout appears as a picture frame because of the way the border surrounds the design.

term to know
Frame
A layout style characterized by the use of a border.


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.

The example below shows a large picture at the top with a clear headline. The body copy is placed below that.

Picture Window

Oftentimes, you'll see the headline stylized or at different angles to set it apart; however, the distinction here between the elements is the placement of the image and headline above the body copy.

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


4. Circus

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

In the image below, you can see a lot going on.

Circus

A variety of typefaces is being used in different colors and sizes. There is a use of line throughout the design, highlighting different positions and orientations. You can notice the shapes and texture as well. This design is very fun and dynamic.

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


5. Silhouette

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

The example below shows actual silhouettes.

Silhouette

Even the headline itself appears to be a silhouette, as it unifies well with the silhouettes of the dancers. The type below the headline appears as though it were cut out with paper.

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


6. Rebus

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

Take a look at the example below.

Rebus

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. It's a very simple but effective design.

In recent years, the big craze has been the mustache. You'll see posters and t-shirts that will say "I" and then have a picture or graphic of a mustache, with the end of the sentence saying something like "you to dance." So the whole thing will read, "I mustache you to dance," as a play on "I must ask you to dance."

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


7. Big Type

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

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

Big Type

The headline is very large, which affects the hierarchy; the headline is meant to be seen first due to its position, color, and size.

term to know
Big Type
A layout style characterized by the use of a very large headline.

summary
In this lesson, you learned about the seven common layout styles: Mondrian, frame, picture window, circus, silhouette, rebus, and big type. You looked at examples of each style, and noted their distinctive characteristics.

Keep up the learning and have a great day!

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

Terms to Know
Big Type

A layout style characterized by the use of a very large headline.

Circus

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

Frame

A layout style characterized by the use of a border.

Mondrian

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

Picture Window

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

Rebus

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

Silhouette

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