Applications of Layout

1. Advertisement

Below is an image of an older advertisement.

This advertisement demonstrates a nice use of borders, as there are multiple design elements with borders surrounding the body copy. This provides a clear sense of hierarchy.

You can see the use of justified alignment, particularly inside the frame underneath "Prince Albert;" as well as the use of margins and gutters between the pages. Hierarchy again plays an important role with layout, columns, rows, and alleys.

2. Web Design

The website design below is another example of the layout elements in action.

This layout is Mondrian; it has a very distinct separation of elements, and everything is inside blocks. If all of the information and graphics were swapped out, those block layouts would still remain. This organization makes viewing the information much easier, which is why it is frequently used for websites.

In order to get a feel for a page layout, particularly in the web design field, designers will often use what's called a wireframe.

In web design, a wireframe is a schematic which shows the underlying structure of a web page. It typically looks something like the image below.

This is not to be confused with the page layout grid that you learned about previously. The grid is used for page layout in publishing and printing, whereas wireframes are typically suited for web design.

term to know

Wireframe

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

3. Movie Poster

Below is a movie poster that shows the application of layout principles.

There are hundreds of movie posters in existence. In order for a single poster to stand out, the elements have to be arranged in very clear ways, creating striking, unique, identifiable, and easy-to-read designs.

As basic and simplistic as a design like this may appear, hierarchy and strategy are still being put to use via decisions about typeface, spacing, size, color, etc.

4. Smartphone Screen

Even on your smartphone, you can see the effects of good layout.

Analyzing this layout, you can answer a few questions immediately:

• What information do you see right away?
• What is the most important piece of information?
• What is the least important piece of information?

Then you'll naturally go all the way down to the smallest text or element, which happens to be the text below the lock that reads "Human iOS."

On this lock-screen, eye flow goes from top to bottom. Of course, no smartphone is complete without a nice collection of apps. Looking at those, you can see grids, which are crucial to layout.