Topic: Layouts

This material covers week 10 of the course.

Note that this material is subject to ongoing refinements and updates!

Overview

These sessions follow on from the previous theme and go into layouts in further detail.

Working with layouts

You should account for both the layout's dimensions and format prior to beginning any design project. For screen layouts, this means accounting for the aspect ratio of the screen (its width and height).

See the example on p. 68 of the reading. The spaces between columns (grey) is called an alley. The space between pages is called a gutter (bright green). Working with columns and alleys is crucial when working with text.

Once you account for format/aspect ratio, establish the layout boundaries, including live/safe area, margins, headers, footers, etc. More complex layouts benefit from grid systems that include columns (perhaps horizontal as well as vertical columns) and alleys of negative space between columns.

Web pages are a unique platform because their ratio has to be flexible. As an example, see how aneventapart.com adjusts content at different sizes. HTML and CSS control the content with flexible grids: w3schools.com/w3css/w3css_grid.asp.

Designing for multiple pages (in print or digital)

Visual unity. All design elements (type, image placement/ratios, use of colour, etc) should be consistent.
Don’t overwhelm users with several pages of type. This is especially important in the digital world. Design for “scanning” behaviour.
When working with type, you should use a grid and set the legs of content at appropriate length. Use headings of various levels and visuals to break up the type. Use negative space in a strategic way.

Remember the Gestalt principles covered in the previous module when designing.

Hierarchy with type

Hierarchy in design gives the viewer a sense of the most important elements in the design, and one of the easiest ways to create a hierarchy is with type. A typographic hierarchy helps show us where one section begins and ends. It also helps us to classify information according to its kind. It is important to use a hierarchy consistently. Always remember the Gestalt principles when creating a layout.

We process thousands of pages of information every day. This means that we usually only pay attention to headings or display text, or leading text.

There are a few basic methods for establishing a visual typographic hierarchy:

Size — using the same font — is the simplest way to differentiate between a heading/display text and body text.
Contrasting typefaces (e.g., a sans serif heading with serif body text) is a simple way to differentiate between text.
Using a different colour. It’s important to choose a colour that provides sufficient contrast to the background colour, as this ensures readability.
Positioning is another simple technique for creating a sense of hierarchy between different levels of text. And you can also use combinations of these four methods.

A useful rule for creating font sizes for a design (digital or print) is to use sizes of 3/4 for each level. e.g.:

Heading 1 at 80pt
Heading 2 at 60pt
Heading 3 at 45pt
Heading 4 at 34pt
Heading 5 at 25pt
Paragraphs and lists at 19pt.

You can skip a font-size level if it doesn't suit your design, and the pt (point) or px (pixel) sizes are always adjustable. Trust your own eyes!

Examples on typographic hierarchy: Loyd, J. (2013). Understanding Typographic Hierarchy. https://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636