Hi, everyone. My name is Mario. And I'd like to welcome you to today's lesson on common layout styles. So today we're going to learn to recognize and identify a variety of commonly-used layout styles. So as always, throughout the lesson feel free to stop, fast forward, and rewind as you see fit. And when you're ready to go, let's get this lesson started.
OK, so we're going to be looking at some common layout styles and going through some of their characteristics and attributes that contribute to their particular style and category. So let's start off with Mondrian. And this is a layout style named after a Dutch painter, and characterized by emphasis in dividing the space into obvious sections.
So you can see in this web page-- this is 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. And this is kind of a pretty obvious use of grid layout, where elements are set in these rows or columns. So this is Mondrian layout style, and again with emphasis on dividing space into those obvious sections.
Next we have Frame. And this is a layout style characterized by the use of a border.
And you can see we have this newspaper ad for Columbia Bicycles. And that ad is surrounded by a lovely border of flowers. And even within the ad, there's another element here, and it's a kind of a graphic of a bicycle frame. And there's type on the right-hand side there. And it's surrounded by this other border or graphic, and 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.
Moving on, we have Picture Window. And Picture Window is a vertical layout style characterized by a large picture at the top, with a headline and body copy below.
So you can see we have the large picture at the top with our clear headline. And then you have the body copy below that. And 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.
Next we have Circus. And this is a layout style characterized by the use of a wide variety of shapes and sizes of design elements.
So you can see there's 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. And it's very fun and dynamic. But again, the distinction here for this layout style is that variety, the variety of shapes and sizes of the design elements. So pretty cool.
Let's jump then to Silhouette layout. And this is a layout style characterized by picture elements that are cut out of the backgrounds. So almost pretty much literally silhouettes here.
This is actually a pretty neat ad. And the headline itself appears to be kind of a silhouette. And it unifies well with the silhouette of the dancers. And the type below appears to be cut out. So it kind of looks like a paper cutout. It's really cool. And those old iPod posters and ads could also be considered layout, where you have those guys rocking out, and they're completely in shadow, with the white earbuds.
So on to Rebus. And this layout style is characterized by a headline with some of the words replaced with pictures.
So a real easy example here, 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. And you see this quite often, and it's pretty simple but effective.
And nowadays I think the big craze is the mustache. And 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." So kind of funny, pretty clever.
Finally, we have Big Type. And as the name implies, it's a layout style characterized by the use of very large headlines.
And that's really all there is to it here. 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. So big type, large headline.
Well, everyone, that ends today's lesson. We'll conclude with our key terms, Mondrian, Picture Window, Circus, Silhouette, and Rebus. Hope you've enjoyed this lesson with me today. My name is Mario, and I will see you next lesson.
