+
4 Tutorials that teach Applications of Layout
Take your pick:
Applications of Layout

Applications of Layout

Description:

In this lesson you will learn how layout principles are utilized in a variety of visual communications disciplines.

(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

Video Transcription

Download PDF

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.

Notes on "Applications of Layout"


Citations

Image of Prince Albert Ad, Public Domain


Image of Magazines, Creative Commons

http://www.flickr.com/photos/shoestringtheband/128...

Image of Mozarthenriques Web Layout, Creative Commons

http://mozarthenriques.deviantart.com/art/Personal...

Image of Sherlock Holmes Movie Poster, Creative Commons

http://alwinofdoom.deviantart.com/art/Sherlock-Hol...

Image of Profile Wireframe, Creative Commons


Image of Ambience Theme, Creative Commons

http://www.flickr.com/photos/bloguetechno/38441754...

Image of Productum Theme, Creative Commons

http://www.flickr.com/photos/bloguetechno/38433966...

Image of My Weblog Theme, Creative Commons

http://www.flickr.com/photos/bloguetechno/38441843...


TERMS TO KNOW
  • Wireframe

    In Web design, a schematic which shows the underlying structure of a web page.