Hi everyone. My name is Mario. And I'd like to welcome you to today's lesson, Applications of Layout. So today we're going to learn how layout principles are utilized in a variety of visual communication disciplines. So as always, throughout the lesson feel free to stop, fast-forward, and rewind at your own pace. And when you're ready, let's get started.
All right. So we've talked a lot about layout and design elements. So this is just kind of a quick refresher good layout strategies and how they pertain to a wide variety of disciplines and visual communications media.
So we have our advertisement here. Nice use of these borders. And we also have other design elements with borders within here, surrounding that body copy there. And you see a good sense of hierarchy, justified alignment, particularly inside the frame underneath "Prince Albert."
So here's our naturally our use of layout in magazines. And we talked about things like our margins, gutters between the pages, again hierarchy playing such an important role with layout, columns, rows, alleys. We covered a lot of ground. And all of it applies to designing the magazine covers as well as all of the content within the magazine itself.
And also applications in web design, they use type size, the color and placement. This layout is pretty close I'd say to Mondrian layout in that it has very clear, distinct separation of elements. Everything is in these blocks. And all that information and graphics can be swapped, interchanged and still remain in those kind of same block layouts.
But it's a very clear layout nonetheless, you know. It's very easy to see the information there. Not too much jumping around.
And then of course, the use of layout in movie posters. Very important. We have plenty of these. Very widely used.
And 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.
And wouldn't you know it, even on our smartphones. And there's not a lot going on here, but really again creating that eye flow. What's information that I want to see right away? What's the most important and what's least important? And how to convey that level of importance?
And so in this example, again very basic. But I want to know the time typically right away. So we have a specific size for that typeface chosen.
And then I might want to know the date. Typically they seem to follow one another. And so we have-- it almost works kind of in that headline-subhead layout, time and date.
And then I'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 humanios or Human iOS. And wouldn't you know it, there's a target there, that lock screen. So kind of again that eye flow, top to bottom, top to bottom.
And of course, no smartphone is complete without a nice collection of apps. And what do we see here? I see grids, so again, grids really, really important. Really, really simple concept but it does have applications, very real-world use.
So when laying out pages, particularly in web design, designers will often use what's called a wireframe. And a wireframe in web design is a schematic which shows the underlying structure of a web page. And basically it looks something like this. So think of it like a basic sketch or layout of your design.
So it's definitely not final. And it could look pretty rough. It can be at different stages. And it can often look a bit more polished as well if the designer has assets on hand that he can use to kind of put things together in kind of this rough manner.
But this serves the purpose of just getting a sense of where things are going, where elements are being placed, and do they work well together? Figure out the most effective layout for what the designer is trying to achieve. What's the ultimate goal? What's the purpose?
And 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. So that's kind of the main distinction there. One again is web design and the other is print.
Well, everyone, that concludes today's lesson. We'll end with our single key term, which was wireframe, which was again in web design a schematic which shows the underlying structure of a web page. So I hope you've enjoyed this lesson with me today. My name is Mario. And I will see you next lesson.
