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:
Mondrian is a layout style named after a Dutch painter, and characterized by emphasis in 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.
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.
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.
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 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.
Circus is 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.
Silhouette is a layout style characterized by picture elements that are cut out of the 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.
The Rebus layout style is 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."
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.
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.
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
As the name implies, a layout style characterized by the use of a very large headline
A layout style characterized by the use of a wide variety of shapes and sizes of design elements.
A layout style characterized by the use of a border.
A layout style named after a Dutch painter and characterized by emphasis dividing the space into obvious sections.
A vertical layout style characterized by a large picture at the top with a headline and body copy below.
A layout style characterized by a headline with some of the words replaced with pictures.
A layout style characterized by picture elements that are cut out of their backgrounds.